completed Payment Summary Page (付款概要)

component/global/slideInImage.tsx

@@ -1,12 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import {
-    Animated,
-    StyleSheet,
-    View,
-    Image,
-    Dimensions,
-    ImageSourcePropType
-} from 'react-native';
+import { Animated, StyleSheet, Image, ImageSourcePropType } from 'react-native';
 import {
     widthPercentageToDP as wp,
     heightPercentageToDP as hp
@@ -16,8 +9,9 @@ interface SlideInImageProps {
     source: ImageSourcePropType;
 }
 
+// This component creates a "slide-in" effect for Images. Images slide from left to view.
 const SlideInImage: React.FC<SlideInImageProps> = ({ source }) => {
-    const slideAnim = useRef(new Animated.Value(-200)).current;
+    const slideAnim = useRef(new Animated.Value(-400)).current;
     useEffect(() => {
         Animated.timing(slideAnim, {
             toValue: 0,
@@ -35,7 +29,7 @@ const SlideInImage: React.FC<SlideInImageProps> = ({ source }) => {
                 }
             ]}
         >
-            <Image source={source} style={styles.image} resizeMode="contain" />
+            <Image source={source} style={styles.image} resizeMode="stretch" />
         </Animated.View>
     );
 };
@@ -45,7 +39,7 @@ const styles = StyleSheet.create({
         flex: 1
     },
     image: {
-        height: wp('40%'),
+        height: wp('60%'),
         width: wp('100%')
     }
 });

component/paymentSummaryPage.tsx

@@ -1,21 +1,9 @@
-import {
-    View,
-    Text,
-    ScrollView,
-    StyleSheet,
-    Pressable,
-    Image,
-    Dimensions
-} from 'react-native';
-import React from 'react';
+import { View, Text, ScrollView, StyleSheet, Pressable } from 'react-native';
+
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Svg, { Path, Rect } from 'react-native-svg';
 import NormalButton from './global/normal_button';
 import SlideInImage from './global/slideInImage';
-import {
-    widthPercentageToDP as wp,
-    heightPercentageToDP as hp
-} from 'react-native-responsive-screen';
 
 const TickLogoSvg = () => (
     <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
@@ -36,7 +24,7 @@ const RightArrowSvg = () => (
     </Svg>
 );
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+// **This is 付款概要 page**
 
 const PaymentSummaryPage = () => {
     return (
@@ -106,7 +94,7 @@ const PaymentSummaryPage = () => {
                             <Text className="text-xl">總計</Text>
                             <Text className="text-3xl">HK$ 186</Text>
                         </View>
-                        <View className="mt-4">
+                        <View className="mt-4 ">
                             <NormalButton
                                 title={
                                     <Text
@@ -123,6 +111,7 @@ const PaymentSummaryPage = () => {
                                 extendedStyle={{ padding: 24 }}
                             />
                         </View>
+                        <View className="h-8" />
                     </View>
                 </View>
             </ScrollView>