update navigation

navigation/BottomTabNavigator.tsx

@@ -36,49 +36,10 @@ import CustomerInfo from '../screens/CustomerInfo';
 import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage, HeaderLogin } from '../components/header/HeaderAllPage'
 
 
-const BottomTab = createBottomTabNavigator();
+export default function AllNavigator() {
-export default function BottomTabNavigator() {
     const colorScheme = useColorScheme();
     return (
-        <BottomTab.Navigator
+        <AllStackNavigation />
-            initialRouteName="Trang chủ"
-            tabBarOptions={{ activeTintColor: '#D8262F' }}>
-            <BottomTab.Screen
-                name="Trang chủ"
-                component={AllStackNavigation}
-                options={{
-                    tabBarIcon: ({ color }) => <TabBarIcon name="home-outline" color={color} />,
-                }}
-            />
-            <BottomTab.Screen
-                name="Danh mục"
-                component={MenuNavigation}
-                options={{
-                    tabBarIcon: ({ color }) => <TabBarIcon name="apps-outline" color={color} />,
-                }}
-            />
-            <BottomTab.Screen
-                name="Giỏ hàng"
-                component={CartNavigation}
-                options={{
-                    tabBarIcon: ({ color }) => <TabBarIcon name="cart-outline" color={color} />,
-                }}
-            />
-            <BottomTab.Screen
-                name="Chat"
-                component={ProductListNavigator}
-                options={{
-                    tabBarIcon: ({ color }) => <TabBarIcon name="chatbubble-ellipses-outline" color={color} />,
-                }}
-            />
-            <BottomTab.Screen
-                name="Tài khoản"
-                component={AccountIndexNavigation}
-                options={{
-                    tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
-                }}
-            />
-        </BottomTab.Navigator>
     );
 }
 
@@ -106,7 +67,8 @@ function HomePageNavigator({ navigation }: { navigation: any }) {
                     headerStyle: {
                         backgroundColor: '#fff',
                         height: 100,
-                    }
+                    },
+                    animationEnabled: true,
                 }}
             />
         </HomepageStack.Navigator>
@@ -603,7 +565,51 @@ function CustomerInfoNavigation() {
     );
 }
 
-
+const BottomTab = createBottomTabNavigator();
+function BottomTabNavigator() {
+    const colorScheme = useColorScheme();
+    return (
+        <BottomTab.Navigator
+            initialRouteName="Trang chủ"
+            tabBarOptions={{ activeTintColor: '#D8262F' }}>
+            <BottomTab.Screen
+                name="Trang chủ"
+                component={HomePageNavigator}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="home-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Danh mục"
+                component={MenuNavigation}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="apps-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Giỏ hàng"
+                component={CartNavigation}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="cart-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Chat"
+                component={ProductListNavigator}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="chatbubble-ellipses-outline" color={color} />,
+                }}
+            />
+            <BottomTab.Screen
+                name="Tài khoản"
+                component={AccountIndexNavigation}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
+                }}
+            />
+        </BottomTab.Navigator>
+    );
+}
 
 const AllStack = createStackNavigator();
 function AllStackNavigation() {
@@ -611,7 +617,7 @@ function AllStackNavigation() {
         <AllStack.Navigator initialRouteName="Home">
             <AllStack.Screen
                 name="Home"
-                component={HomePageNavigator}
+                component={BottomTabNavigator}
                 options={{ headerShown: false }}
             />
             <AllStack.Screen
@@ -654,6 +660,11 @@ function AllStackNavigation() {
                 component={ProductSearchNavigation}
                 options={{ headerShown: false }}
             />
+            <AllStack.Screen
+                name="ProductHotListNav"
+                component={ProductHotListNavigation}
+                options={{ headerShown: false }}
+            />
             <AllStack.Screen
                 name="Register"
                 component={RegisterNavigation}

screens/CartStep.tsx

@@ -42,7 +42,7 @@ const HeaderCart = () => {
     const navigation = useNavigation();
     return (
         <View style={styles.headerCartStep}>
-            <TouchableOpacity style={styles.goBack} onPress={() => navigation.navigate('Cart')}>
+            <TouchableOpacity style={styles.goBack} onPress={() => navigation.goBack()}>
                 <FontAwesome style={styles.goBackIcon} name="angle-left" />
             </TouchableOpacity>
             <Text style={styles.headerCartStepTitle}>Thanh toán</Text>

screens/HomePage.tsx

@@ -7,6 +7,7 @@ import { Text, View } from '../components/Themed';
 import { TextInput } from 'react-native-gesture-handler';
 import Swiper from 'react-native-swiper';
 import { Asset } from 'expo-asset';
+import { useNavigation } from '@react-navigation/core';
 
 export default function HomePage() {
     return (
@@ -67,63 +68,65 @@ const SliderHome = () => {
 }
 
 const CategoryHomePage = () => {
+    const navigation = useNavigation();
     return (
         <View style={styles.boxCatHome}>
-            <ScrollView horizontal={true} style={styles.boxCatHomeList}>
+            <ScrollView horizontal={true} style={styles.boxCatHomeList} showsHorizontalScrollIndicator={false}>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductHotListNav')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat1.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Siêu phẩm hè</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat2.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Diện gia dụng</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat3.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Đồ gia dụng</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat4.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Thiết bị nhà bếp</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat5.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Điều hòa</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat6.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Khẩu trang vải</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={styles.boxCatHomeItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={styles.boxCatHomeItem}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat7.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Deal Hot</Text>
-                </View>
+                </TouchableOpacity>
-                <View style={[styles.boxCatHomeItem, styles.boxCatHomeItemLast]}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')} style={[styles.boxCatHomeItem, styles.boxCatHomeItemLast]}>
                     <View style={styles.boxCatHomeItemImg}>
                         <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat8.png')} />
                     </View>
                     <Text style={styles.boxCatHomeText}>Combo</Text>
-                </View>
+                </TouchableOpacity>
             </ScrollView>
         </View>
     )
 }
 
 const FlastSale = () => {
+    const navigation = useNavigation();
     return (
         <View style={styles.boxFlastSaleHome}>
             <View style={styles.boxFlastSaleHomeTitle}>
@@ -134,10 +137,14 @@ const FlastSale = () => {
                 </TouchableOpacity>
             </View>
             <View style={styles.boxFlastSaleHomeFirstItem}>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductDetail')}>
                     <View style={styles.boxFlastSaleHomeImg}>
                         <Image style={styles.boxFlastSaleHomeImgCt} source={require('../assets/images/product.png')} />
                     </View>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => navigation.navigate('ProductDetail')}>
                     <Text style={styles.boxFlastSaleHomeFirstName} numberOfLines={2}>NỒI CHIÊN KHÔNG DẦU SMARTPLUS NAGAKAWA NAG3303 (9L)</Text>
+                </TouchableOpacity>
                 <View style={styles.boxFlastSaleHomeFirstAllPrice}>
                     <View style={styles.boxFlastSaleHomeFirstPrice}>
                         <Text style={styles.boxFlastSaleHomeFirstPriceName}>Giá sốc online</Text>
@@ -1299,7 +1306,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     boxProductHomeItem: {
-        width: winWidth/2 - 15,
+        width: winWidth / 2 - 15,
         marginRight: 10,
         marginBottom: 10,
         borderRadius: 10,