fixed bug related to scrolling

component/homePage/homePage.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { View, Text, ScrollView } from 'react-native';
 import NormalButton from '../global/normal_button';
 import Svg, { Path } from 'react-native-svg';
 import NormalInput from '../global/normal_input';
@@ -80,270 +80,281 @@ const BookingIconSvg = () => (
 );
 const HomePage: React.FC<HomePageProps> = () => {
     return (
-        <ScrollView className="bg-[#ffffff] flex-1 h-[100vh]">
-            <View className="flex-1 mx-[5%] mt-[30px]">
-                <View className="flex-1 pb-6">
-                    <View className="flex-row items-center pb-2">
-                        <HomeIconSvg />
-                        <View className="pl-2 flex-1 flex-column ">
-                            <View className="flex-row justify-between">
-                                <Text className="text-lg pb-1">你好！</Text>
-                                <BellIconSvg />
-                            </View>
-                            <Text className="text-4xl font-light ">
-                                Mike Chan
-                            </Text>
+        <View className="bg-[#ffffff] flex-1 px-[5%] pt-[70px]">
+            <View className="basis-1/3">
+                <View className="flex-row items-center pb-8">
+                    <HomeIconSvg />
+                    <View className="pl-2 flex-1 flex-column ">
+                        <View className="flex-row justify-between">
+                            <Text className="text-lg pb-1">你好！</Text>
+                            <BellIconSvg />
                         </View>
+                        <Text className="text-4xl font-light ">Mike Chan</Text>
                     </View>
-                    <NormalInput
-                        placeholder="搜尋充電站或地區"
-                        onChangeText={() => console.log('abc')}
-                    />
                 </View>
-                <View className="flex-column">
-                    <View style={styles.recentBookingMainContainer}>
-                        <Text
-                            style={{
-                                fontWeight: 400,
-                                fontSize: 16,
-                                color: '#222222',
-                                marginBottom: '5%'
-                            }}
-                        >
-                            近期預約過
-                        </Text>
-                        <ScrollView>
-                            <View style={styles.recentBookingRowContainer}>
-                                <BookingIconSvg />
+                <NormalInput
+                    placeholder="搜尋充電站或地區"
+                    onChangeText={() => console.log('abc')}
+                />
+            </View>
+            <View className="basis-1/3 mt-[-35] pb-6 flex-column">
+                <View>
+                    <Text
+                        style={{
+                            fontWeight: 400,
+                            fontSize: 16,
+                            color: '#222222',
+                            marginBottom: '5%'
+                        }}
+                    >
+                        近期預約過
+                    </Text>
+                    <ScrollView>
+                        <View style={styles.recentBookingRowContainer}>
+                            <BookingIconSvg />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
                                 <View
                                     style={{
-                                        flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                        flex: 1,
-                                        borderBottomWidth: 0.5,
-                                        paddingVertical: 15,
-                                        borderColor: '#ccc',
-                                        borderRadius: 8
+                                        marginLeft: 15,
+                                        gap: 3
                                     }}
                                 >
-                                    <View
+                                    <Text
                                         style={{
-                                            marginLeft: 15,
-                                            gap: 3
+                                            fontSize: 16,
+                                            color: '#222222'
                                         }}
                                     >
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#222222'
-                                            }}
-                                        >
-                                            充電站#1
-                                        </Text>
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#888888'
-                                            }}
-                                        >
-                                            充電站地址#1
-                                        </Text>
-                                    </View>
-                                    <NormalButton
-                                        title={
-                                            <Text style={{ color: '#061E25' }}>
-                                                重新預約
-                                            </Text>
-                                        }
-                                        onPress={() => console.log('abc')}
-                                        buttonPressedStyle={{
-                                            backgroundColor: '#CFDEE4'
-                                        }}
-                                        extendedStyle={{
-                                            backgroundColor: '#E3F2F8',
-                                            paddingHorizontal: 25,
-                                            paddingVertical: 1,
-                                            borderRadius: 8
+                                        充電站#1
+                                    </Text>
+                                    <Text
+                                        style={{
+                                            fontSize: 16,
+                                            color: '#888888'
                                         }}
-                                    />
+                                    >
+                                        充電站地址#1
+                                    </Text>
                                 </View>
+                                <NormalButton
+                                    title={
+                                        <Text style={{ color: '#061E25' }}>
+                                            重新預約
+                                        </Text>
+                                    }
+                                    onPress={() => console.log('abc')}
+                                    buttonPressedStyle={{
+                                        backgroundColor: '#CFDEE4'
+                                    }}
+                                    extendedStyle={{
+                                        backgroundColor: '#E3F2F8',
+                                        paddingHorizontal: 25,
+                                        paddingVertical: 1,
+                                        borderRadius: 8
+                                    }}
+                                />
                             </View>
-                            <View style={styles.recentBookingRowContainer}>
-                                <BookingIconSvg />
+                        </View>
+                        <View style={styles.recentBookingRowContainer}>
+                            <BookingIconSvg />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
                                 <View
                                     style={{
-                                        flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                        flex: 1,
-                                        borderBottomWidth: 0.5,
-                                        paddingVertical: 15,
-                                        borderColor: '#ccc',
-                                        borderRadius: 8
+                                        marginLeft: 15,
+                                        gap: 3
                                     }}
                                 >
-                                    <View
+                                    <Text
                                         style={{
-                                            marginLeft: 15,
-                                            gap: 3
+                                            fontSize: 16,
+                                            color: '#222222'
                                         }}
                                     >
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#222222'
-                                            }}
-                                        >
-                                            充電站#2
-                                        </Text>
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#888888'
-                                            }}
-                                        >
-                                            充電站地址#2
-                                        </Text>
-                                    </View>
-                                    <NormalButton
-                                        title={
-                                            <Text style={{ color: '#061E25' }}>
-                                                重新預約
-                                            </Text>
-                                        }
-                                        onPress={() => console.log('abc')}
-                                        buttonPressedStyle={{
-                                            backgroundColor: '#CFDEE4'
-                                        }}
-                                        extendedStyle={{
-                                            backgroundColor: '#E3F2F8',
-                                            paddingHorizontal: 25,
-                                            paddingVertical: 1,
-                                            borderRadius: 8
+                                        充電站#2
+                                    </Text>
+                                    <Text
+                                        style={{
+                                            fontSize: 16,
+                                            color: '#888888'
                                         }}
-                                    />
+                                    >
+                                        充電站地址#2
+                                    </Text>
                                 </View>
+                                <NormalButton
+                                    title={
+                                        <Text style={{ color: '#061E25' }}>
+                                            重新預約
+                                        </Text>
+                                    }
+                                    onPress={() => console.log('abc')}
+                                    buttonPressedStyle={{
+                                        backgroundColor: '#CFDEE4'
+                                    }}
+                                    extendedStyle={{
+                                        backgroundColor: '#E3F2F8',
+                                        paddingHorizontal: 25,
+                                        paddingVertical: 1,
+                                        borderRadius: 8
+                                    }}
+                                />
                             </View>
-                            <View style={styles.recentBookingRowContainer}>
-                                <BookingIconSvg />
+                        </View>
+                        <View style={styles.recentBookingRowContainer}>
+                            <BookingIconSvg />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
                                 <View
                                     style={{
-                                        flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                        flex: 1,
-                                        borderBottomWidth: 0.5,
-                                        paddingVertical: 15,
-                                        borderColor: '#ccc',
-                                        borderRadius: 8
+                                        marginLeft: 15,
+                                        gap: 3
                                     }}
                                 >
-                                    <View
+                                    <Text
                                         style={{
-                                            marginLeft: 15,
-                                            gap: 3
+                                            fontSize: 16,
+                                            color: '#222222'
                                         }}
                                     >
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#222222'
-                                            }}
-                                        >
-                                            充電站#3
-                                        </Text>
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#888888'
-                                            }}
-                                        >
-                                            充電站地址#3
-                                        </Text>
-                                    </View>
-                                    <NormalButton
-                                        title={
-                                            <Text style={{ color: '#061E25' }}>
-                                                重新預約
-                                            </Text>
-                                        }
-                                        onPress={() => console.log('abc')}
-                                        buttonPressedStyle={{
-                                            backgroundColor: '#CFDEE4'
-                                        }}
-                                        extendedStyle={{
-                                            backgroundColor: '#E3F2F8',
-                                            paddingHorizontal: 25,
-                                            paddingVertical: 1,
-                                            borderRadius: 8
+                                        充電站#3
+                                    </Text>
+                                    <Text
+                                        style={{
+                                            fontSize: 16,
+                                            color: '#888888'
                                         }}
-                                    />
+                                    >
+                                        充電站地址#3
+                                    </Text>
                                 </View>
+                                <NormalButton
+                                    title={
+                                        <Text style={{ color: '#061E25' }}>
+                                            重新預約
+                                        </Text>
+                                    }
+                                    onPress={() => console.log('abc')}
+                                    buttonPressedStyle={{
+                                        backgroundColor: '#CFDEE4'
+                                    }}
+                                    extendedStyle={{
+                                        backgroundColor: '#E3F2F8',
+                                        paddingHorizontal: 25,
+                                        paddingVertical: 1,
+                                        borderRadius: 8
+                                    }}
+                                />
                             </View>
-                            <View style={styles.recentBookingRowContainer}>
-                                <BookingIconSvg />
+                        </View>
+                        <View className="flex-row items-center">
+                            <BookingIconSvg />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
                                 <View
                                     style={{
-                                        flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                        flex: 1,
-                                        borderBottomWidth: 0.5,
-                                        paddingVertical: 15,
-                                        borderColor: '#ccc',
-                                        borderRadius: 8
+                                        marginLeft: 15,
+                                        gap: 3
                                     }}
                                 >
-                                    <View
+                                    <Text
                                         style={{
-                                            marginLeft: 15,
-                                            gap: 3
+                                            fontSize: 16,
+                                            color: '#222222'
                                         }}
                                     >
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#222222'
-                                            }}
-                                        >
-                                            充電站#4
-                                        </Text>
-                                        <Text
-                                            style={{
-                                                fontSize: 16,
-                                                color: '#888888'
-                                            }}
-                                        >
-                                            充電站地址#4
-                                        </Text>
-                                    </View>
-                                    <NormalButton
-                                        title={
-                                            <Text style={{ color: '#061E25' }}>
-                                                重新預約
-                                            </Text>
-                                        }
-                                        onPress={() => console.log('abc')}
-                                        buttonPressedStyle={{
-                                            backgroundColor: '#CFDEE4'
-                                        }}
-                                        extendedStyle={{
-                                            backgroundColor: '#E3F2F8',
-                                            paddingHorizontal: 25,
-                                            paddingVertical: 1,
-                                            borderRadius: 8
+                                        充電站#4
+                                    </Text>
+                                    <Text
+                                        style={{
+                                            fontSize: 16,
+                                            color: '#888888'
                                         }}
-                                    />
+                                    >
+                                        充電站地址#4
+                                    </Text>
                                 </View>
+                                <NormalButton
+                                    title={
+                                        <Text style={{ color: '#061E25' }}>
+                                            重新預約
+                                        </Text>
+                                    }
+                                    onPress={() => console.log('abc')}
+                                    buttonPressedStyle={{
+                                        backgroundColor: '#CFDEE4'
+                                    }}
+                                    extendedStyle={{
+                                        backgroundColor: '#E3F2F8',
+                                        paddingHorizontal: 25,
+                                        paddingVertical: 1,
+                                        borderRadius: 8
+                                    }}
+                                />
                             </View>
-                        </ScrollView>
-                    </View>
+                        </View>
+                    </ScrollView>
                 </View>
-
-                <View className="min-h-[30vh]">
-                    <View className="mt-6 mb-4">
+            </View>
+            <View className="basis-1/3">
+                <View className="mt-6 mb-4">
+                    <NormalButton
+                        onPress={() => console.log('掃瞄及充電')}
+                        title={
+                            <Text className="text-white font-bold text-lg">
+                                掃瞄及充電
+                            </Text>
+                        }
+                        extendedStyle={{
+                            alignItems: 'flex-start',
+                            padding: 24
+                        }}
+                    />
+                </View>
+                <View className="flex-1 flex-row justify-between gap-6">
+                    <View className="flex-1">
                         <NormalButton
-                            onPress={() => console.log('掃瞄及充電')}
+                            onPress={() => console.log('我的預約')}
                             title={
                                 <Text className="text-white font-bold text-lg">
-                                    掃瞄及充電
+                                    我的預約
                                 </Text>
                             }
                             extendedStyle={{
@@ -352,50 +363,23 @@ const HomePage: React.FC<HomePageProps> = () => {
                             }}
                         />
                     </View>
-                    <View className="flex-1 flex-row justify-between gap-6">
-                        <View className="flex-1">
-                            <NormalButton
-                                onPress={() => console.log('我的預約')}
-                                title={
-                                    <Text className="text-white font-bold text-lg">
-                                        我的預約
-                                    </Text>
-                                }
-                                extendedStyle={{
-                                    alignItems: 'flex-start',
-                                    padding: 24
-                                }}
-                            />
-                        </View>
-                        <View className="flex-1">
-                            <NormalButton
-                                onPress={() => console.log('我的車輛')}
-                                title={
-                                    <Text className="text-white font-bold text-lg">
-                                        我的車輛
-                                    </Text>
-                                }
-                                extendedStyle={{
-                                    alignItems: 'flex-start',
-                                    padding: 24
-                                }}
-                            />
-                        </View>
+                    <View className="flex-1">
+                        <NormalButton
+                            onPress={() => console.log('我的車輛')}
+                            title={
+                                <Text className="text-white font-bold text-lg">
+                                    我的車輛
+                                </Text>
+                            }
+                            extendedStyle={{
+                                alignItems: 'flex-start',
+                                padding: 24
+                            }}
+                        />
                     </View>
                 </View>
             </View>
-        </ScrollView>
+        </View>
     );
 };
 export default HomePage;
-
-const styles = StyleSheet.create({
-    recentBookingMainContainer: {
-        flex: 1,
-        maxHeight: 240
-    },
-    recentBookingRowContainer: {
-        flexDirection: 'row',
-        alignItems: 'center'
-    }
-});