created My Booking Reservation Page at component/bookingMenuPage/bookingMenuPage.tsx

app/index.tsx

@@ -0,0 +1,22 @@
+import { View, Text } from 'react-native';
+import { Link } from 'expo-router';
+
+import MultiStepForm from '../component/registrationMultiStepForm/multi_step_form';
+import BookingMenuPage from '../component/bookingMenuPage/bookingMenuPage';
+import HomePage from '../component/homePage/homePage';
+
+export default function Index() {
+    return (
+        <View style={{ flex: 1 }}>
+            {/* <Link href="/about">About</Link> */}
+            {/* ...other links */}
+            {/* <Link href="/user/bacon">View user</Link> */}
+
+            {/* <MultiStepForm /> */}
+
+            <BookingMenuPage />
+
+            {/* <HomePage /> */}
+        </View>
+    );
+}

component/bookingMenuPage/bookingMenuPage.tsx

@@ -0,0 +1,326 @@
+import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
+import TabViewComponent, { TabItem } from '../global/tabView';
+import NormalButton from '../global/normal_button';
+
+interface BookingMenuPageProps {}
+
+const dummyTabItems: TabItem[] = [
+    {
+        imgURL: require('../../assets/dummyStationPicture.png'),
+        date: '今天',
+        time: '16:30',
+        chargeStationName: '上環街市充電站',
+        chargeStationAddress: '香港上環皇后大道中345號',
+        distance: '400米'
+    },
+    {
+        imgURL: require('../../assets/dummyStationPicture2.png'),
+        date: '3月15',
+        time: '17:45',
+        chargeStationName: '中環IFC充電站',
+        chargeStationAddress: '香港中環皇后大道中999號',
+        distance: '680米'
+    },
+    {
+        imgURL: require('../../assets/dummyStationPicture2.png'),
+        date: '4月20',
+        time: '12:30',
+        chargeStationName: '中環IFC充電站',
+        chargeStationAddress: '香港中環皇后大道中999號',
+        distance: '680米'
+    }
+];
+
+const BookingMenuPage: React.FC<BookingMenuPageProps> = () => {
+    return (
+        <View style={styles.container}>
+            <View style={styles.topContainer}>
+                <Text style={{ fontSize: 45 }}>預約</Text>
+                <NormalButton
+                    title={
+                        <Text
+                            style={{
+                                color: 'white',
+                                fontSize: 16,
+                                fontWeight: '800'
+                            }}
+                        >
+                            + 新增預約
+                        </Text>
+                    }
+                    onPress={() => console.log('abc')}
+                />
+                <View style={styles.recentBookingMainContainer}>
+                    <Text
+                        style={{
+                            fontWeight: 400,
+                            fontSize: 16,
+                            color: '#222222',
+                            marginBottom: '5%'
+                        }}
+                    >
+                        近期預約過
+                    </Text>
+                    <ScrollView>
+                        <View style={styles.recentBookingRowContainer}>
+                            <Image
+                                source={require('../../assets/bookingLogo.png')}
+                                style={{ height: 40, width: 40 }}
+                            />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
+                                <View
+                                    style={{
+                                        marginLeft: 15,
+                                        gap: 3
+                                    }}
+                                >
+                                    <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
+                                    }}
+                                />
+                            </View>
+                        </View>
+                        <View style={styles.recentBookingRowContainer}>
+                            <Image
+                                source={require('../../assets/bookingLogo.png')}
+                                style={{ height: 40, width: 40 }}
+                            />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
+                                <View
+                                    style={{
+                                        marginLeft: 15,
+                                        gap: 3
+                                    }}
+                                >
+                                    <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
+                                    }}
+                                />
+                            </View>
+                        </View>
+                        <View style={styles.recentBookingRowContainer}>
+                            <Image
+                                source={require('../../assets/bookingLogo.png')}
+                                style={{ height: 40, width: 40 }}
+                            />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
+                                <View
+                                    style={{
+                                        marginLeft: 15,
+                                        gap: 3
+                                    }}
+                                >
+                                    <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
+                                    }}
+                                />
+                            </View>
+                        </View>
+                        <View style={styles.recentBookingRowContainer}>
+                            <Image
+                                source={require('../../assets/bookingLogo.png')}
+                                style={{ height: 40, width: 40 }}
+                            />
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    flex: 1,
+                                    borderBottomWidth: 0.5,
+                                    paddingVertical: 15,
+                                    borderColor: '#ccc',
+                                    borderRadius: 8
+                                }}
+                            >
+                                <View
+                                    style={{
+                                        marginLeft: 15,
+                                        gap: 3
+                                    }}
+                                >
+                                    <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
+                                    }}
+                                />
+                            </View>
+                        </View>
+                    </ScrollView>
+                </View>
+            </View>
+            <View style={styles.tabViewContainer}>
+                <TabViewComponent
+                    titles={['已預約', '已完成']}
+                    tabItems={dummyTabItems}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1, backgroundColor: 'white' },
+    topContainer: {
+        flex: 1,
+        gap: 20,
+        marginTop: '25%',
+        marginHorizontal: '5%'
+    },
+    recentBookingMainContainer: { flex: 1 },
+    recentBookingRowContainer: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    tabViewContainer: { flex: 1 }
+});
+
+export default BookingMenuPage;

component/global/normal_button.tsx

@@ -1,38 +1,106 @@
-import React, { ReactElement } from "react";
-import { Pressable, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import React, { ReactElement } from 'react';
+import {
+    Pressable,
+    Text,
+    StyleSheet,
+    ViewStyle,
+    StyleProp
+} from 'react-native';
 
 interface NormalButtonProps {
-	title: ReactElement;
-	extendedStyle?: StyleProp<ViewStyle>;
-	onPress: () => void;
-	disabled?: boolean;
+    title: ReactElement;
+    extendedStyle?: StyleProp<ViewStyle>;
+    onPress: () => void;
+    disabled?: boolean;
+    buttonPressedStyle?: StyleProp<ViewStyle>;
 }
 
-const NormalButton: React.FC<NormalButtonProps> = ({ title, extendedStyle, onPress, disabled }) => {
-	return (
-		<Pressable
-			onPress={onPress}
-			disabled={disabled}
-			style={({ pressed }) => [styles.button, pressed ? styles.buttonPressed : null, extendedStyle]}
-		>
-			{title}
-		</Pressable>
-	);
+const NormalButton: React.FC<NormalButtonProps> = ({
+    title,
+    extendedStyle,
+    onPress,
+    disabled,
+    buttonPressedStyle
+}) => {
+    return (
+
+        <Pressable
+            onPress={onPress}
+            disabled={disabled}
+            style={({ pressed }) => [
+                styles.button,
+                extendedStyle,
+                pressed ? buttonPressedStyle || styles.buttonPressed : null
+            ]}
+        >
+            {title}
+        </Pressable>
+    );
 };
 
 const styles = StyleSheet.create({
-	button: {
-		maxWidth: "100%",
-		fontSize: 16,
-		backgroundColor: "#025c72",
-		justifyContent: "center",
-		alignItems: "center",
-		borderRadius: 12,
-		padding: 20,
-	},
-	buttonPressed: {
-		backgroundColor: "#28495c",
-	},
+    button: {
+        maxWidth: '100%',
+        fontSize: 16,
+        backgroundColor: '#025c72',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 12,
+        padding: 20
+    },
+    buttonPressed: {
+        backgroundColor: '#28495c'
+    }
 });
 
 export default NormalButton;
+
+//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
+//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
+//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
+//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
+//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
+
+// import React, { ReactElement } from 'react';
+// import { Pressable, PressableProps, StyleSheet, TextStyle } from 'react-native';
+
+// interface NormalButtonProps extends PressableProps {
+//     title: ReactElement;
+//     extendedStyle?: TextStyle;
+// }
+// //2024-06-06 I modified the button so that it accept a forwarded ref for Navigation
+// const NormalButton = React.forwardRef<
+//     React.ElementRef<typeof Pressable>,
+//     NormalButtonProps
+// >(({ title, extendedStyle, onPress, disabled }, ref) => {
+//     return (
+//         <Pressable
+//             ref={ref}
+//             onPress={onPress}
+//             disabled={disabled}
+//             style={({ pressed }) => [
+//                 styles.button,
+//                 pressed ? styles.buttonPressed : null,
+//                 extendedStyle
+//             ]}
+//         >
+//             {title}
+//         </Pressable>
+//     );
+// });
+// const styles = StyleSheet.create({
+//     button: {
+//         maxWidth: '100%',
+//         fontSize: 16,
+//         backgroundColor: '#025c72',
+//         justifyContent: 'center',
+//         alignItems: 'center',
+//         borderRadius: 12,
+//         padding: 20
+//     },
+//     buttonPressed: {
+//         backgroundColor: '#28495c'
+//     }
+// });
+
+// export default NormalButton;