up 1st all file app naga

components/header/HeaderAllPage.tsx

@@ -0,0 +1,291 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import EditScreenInfo from '../EditScreenInfo';
+import { Text, View } from '../Themed';
+import { TextInput } from 'react-native-gesture-handler';
+import { useNavigation } from '@react-navigation/native';
+import Swiper from 'react-native-swiper';
+import { Picker } from '@react-native-picker/picker';
+import { RadioButton, Checkbox } from 'react-native-paper';
+
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+
+const HeaderHome = () => {
+    return (
+        <View style={styles.headerBox}>
+            <Image style={styles.headerBoxLogo} source={require('../../assets/images/logo.png')} />
+            <View style={styles.headerBoxSearch}>
+                <TouchableOpacity style={styles.headerBoxSearchButton}>
+                    <LinearGradient style={styles.headerBoxSearchBg} colors={['#FF5136', '#D8262F']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
+                        <Ionicons style={styles.headerBoxSearchIcon} name="search-outline" />
+                    </LinearGradient>
+                </TouchableOpacity>
+                <TextInput style={styles.headerBoxSearchInput} placeholder="Nhập từ khóa tìm kiếm" />
+            </View>
+        </View>
+    )
+}
+
+const HeaderCategory = () => {
+    const [openSearch, setopenSearch] = useState(true);
+    return (
+        <View style={styles.headerCategory}>
+            <TouchableOpacity style={styles.headerCategoryBack}>
+                <Ionicons style={styles.headerCategoryBackIcon} name="chevron-back-outline" />
+            </TouchableOpacity>
+            <View style={styles.headerCategorySearch}>
+                <TouchableOpacity style={styles.headerCategorySearchOpen} onPress={() => setopenSearch(!openSearch)}>
+                    <Ionicons style={styles.headerCategorySearchOpenIcon} name="search-outline" />
+                </TouchableOpacity>
+                <View style={openSearch ? styles.headerCategorySearchMain : [styles.headerCategorySearchMain, styles.headerCategorySearchMainActive]}>
+                    <TextInput style={styles.headerCategorySearchInput} placeholder="Nhập tên sản phẩm tìm kiếm..." />
+                    <TouchableOpacity style={styles.headerCategorySearchSubmit}>
+                        <Ionicons style={styles.headerCategorySearchSubmitIcon} name="search-outline" />
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <Text style={styles.headerCategoryTitle}>Điện gia dụng</Text>
+            <View style={styles.headerCategoryList}>
+                <TouchableOpacity style={styles.headerCategoryListButton}>
+                    <Image style={styles.headerCategoryListButtonImage} source={require('../../assets/images/list-item.png')} />
+                </TouchableOpacity>
+            </View>
+            <View style={styles.headerCategoryCart}>
+                <TouchableOpacity style={styles.headerCategoryCartButton}>
+                    <Ionicons style={styles.headerCategoryCartIcon} name="cart-outline" />
+                    <Text style={styles.headerCategoryCartCount}>0</Text>
+                </TouchableOpacity>
+
+            </View>
+        </View>
+    )
+}
+
+const HeaderProductDetail = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxHeaderProductDetail}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.boxHeaderProductDetailGoBack}>
+                <Ionicons style={styles.boxHeaderProductDetailIcon} name="chevron-back-outline" />
+            </TouchableOpacity>
+            <View style={styles.boxHeaderProductDetailRight}>
+                <TouchableOpacity onPress={() => navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
+                    <Ionicons style={styles.boxHeaderProductDetailIcon} name="home-outline" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.boxHeaderProductDetailCart}>
+                    <Ionicons style={styles.boxHeaderProductDetailIcon} name="cart-outline" />
+                    <Text style={styles.boxHeaderProductDetailCartCount}>0</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+
+export { HeaderHome, HeaderCategory, HeaderProductDetail };
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f2f2f2'
+    },
+    headerBox: {
+        width: winWidth,
+        padding: 10,
+        backgroundColor: '#fff',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    headerBoxLogo: {
+        marginBottom: 10,
+    },
+    headerBoxSearch: {
+        width: '100%',
+        borderColor: '#D8262F',
+        borderRadius: 5,
+        borderWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerBoxSearchButton: {
+        width: 36,
+    },
+    headerBoxSearchBg: {
+        width: 36,
+        height: 36,
+        borderTopRightRadius: 5,
+        borderBottomRightRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    headerBoxSearchIcon: {
+        fontSize: 24,
+        color: '#fff',
+    },
+    headerBoxSearchInput: {
+        width: winWidth - 56,
+        paddingHorizontal: 10,
+        height: 36,
+    },
+    headerCategory: {
+        width: winWidth,
+        padding: 10,
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    headerCategoryBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    headerCategoryBackIcon: {
+        fontSize: 26,
+    },
+    headerCategorySearch: {
+        width: 40,
+        position: 'relative',
+        zIndex: 1,
+    },
+    headerCategorySearchOpen: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    headerCategorySearchOpenIcon: {
+        fontSize: 26,
+    },
+    headerCategorySearchMain: {
+        width: 230,
+        borderWidth: 1,
+        borderRadius: 3,
+        overflow: 'hidden',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'none',
+        backgroundColor: '#fff',
+    },
+    headerCategorySearchMainActive: {
+        display: 'flex',
+    },
+    headerCategorySearchInput: {
+        width: '100%',
+        height: 40,
+        paddingLeft: 10,
+        paddingRight: 40,
+    },
+    headerCategorySearchSubmit: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        justifyContent: 'center',
+    },
+    headerCategorySearchSubmitIcon: {
+        fontSize: 26,
+    },
+    headerCategoryTitle: {
+        width: winWidth - 180,
+        textAlign: 'center',
+        fontSize: 17,
+        fontWeight: 'bold',
+    },
+    headerCategoryList: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    headerCategoryListButton: {},
+    headerCategoryListButtonImage: {
+        width: 19,
+        height: 16,
+    },
+    headerCategoryCart: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    headerCategoryCartButton: {},
+    headerCategoryCartIcon: {
+        fontSize: 26,
+    },
+    headerCategoryCartCount: {
+        width: 15,
+        height: 15,
+        backgroundColor: '#D8262F',
+        borderRadius: 7.5,
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        color: '#fff',
+        textAlign: 'center',
+        lineHeight: 15,
+        overflow: 'hidden'
+    },
+    boxHeaderProductDetail: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+    },
+    boxHeaderProductDetailGoBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxHeaderProductDetailIcon: {
+        fontSize: 26,
+    },
+    boxHeaderProductDetailRight: {
+        flexDirection: 'row',
+    },
+    boxHeaderProductDetailHome: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    boxHeaderProductDetailCart: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        position: 'relative',
+    },
+    boxHeaderProductDetailCartCount: {
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+        overflow: 'hidden',
+        backgroundColor: '#D8262F',
+        textAlign: 'center',
+        lineHeight: 14,
+        fontSize: 10,
+        color: '#fff',
+        position: 'absolute',
+        top: 5,
+        right: 0,
+    },
+})

components/product/ProductItem.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import EditScreenInfo from '../EditScreenInfo';
+import { Text, View } from '../Themed';
+import { TextInput } from 'react-native-gesture-handler';
+import { useNavigation } from '@react-navigation/native';
+import Swiper from 'react-native-swiper';
+import { Picker } from '@react-native-picker/picker';
+import { RadioButton, Checkbox } from 'react-native-paper';
+
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+
+const ProductItemSt = () => {
+    return (
+        <View></View>
+    )
+}
+
+
+export { };
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f2f2f2'
+    },
+})

navigation/BottomTabNavigator.tsx

@@ -2,72 +2,186 @@ import { Ionicons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
+import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
+import { Text, View } from '../components/Themed';
 
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
-import TabOneScreen from '../screens/TabOneScreen';
-import TabTwoScreen from '../screens/TabTwoScreen';
-import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
+import HomePage from '../screens/HomePage';
+import ProductList from '../screens/ProductList';
+import MenuCategory from '../screens/MenuCategory';
+import ProductDetail from '../screens/ProductDetail';
+import { HeaderHome, HeaderCategory, HeaderProductDetail } from '../components/header/HeaderAllPage'
 
-const BottomTab = createBottomTabNavigator<BottomTabParamList>();
 
+const BottomTab = createBottomTabNavigator();
 export default function BottomTabNavigator() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <BottomTab.Navigator
-      initialRouteName="TabOne"
-      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
-      <BottomTab.Screen
-        name="TabOne"
-        component={TabOneNavigator}
-        options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
-        }}
-      />
-      <BottomTab.Screen
-        name="TabTwo"
-        component={TabTwoNavigator}
-        options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
-        }}
-      />
-    </BottomTab.Navigator>
-  );
+    const colorScheme = useColorScheme();
+    return (
+        <BottomTab.Navigator
+            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={ProductListNavigator}
+                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={ProductListNavigator}
+                options={{
+                    tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
+                }}
+            />
+        </BottomTab.Navigator>
+    );
 }
 
 // You can explore the built-in icon families and icons on the web at:
 // https://icons.expo.fyi/
 function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']; color: string }) {
-  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
+    return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
 }
 
 // Each tab has its own navigation stack, you can read more about this pattern here:
 // https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
-const TabOneStack = createStackNavigator<TabOneParamList>();
+const HomepageStack = createStackNavigator<TabOneParamList>();
 
-function TabOneNavigator() {
-  return (
-    <TabOneStack.Navigator>
-      <TabOneStack.Screen
-        name="TabOneScreen"
-        component={TabOneScreen}
-        options={{ headerTitle: 'Tab One Title' }}
-      />
-    </TabOneStack.Navigator>
-  );
+function HomePageNavigator({ navigation }: { navigation: any }) {
+    return (
+        <HomepageStack.Navigator>
+            <HomepageStack.Screen
+                name="HomePage"
+                component={HomePage}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderHome />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 100,
+                    }
+                }}
+            />
+        </HomepageStack.Navigator>
+    );
 }
 
-const TabTwoStack = createStackNavigator<TabTwoParamList>();
+const MenuStack = createStackNavigator();
 
-function TabTwoNavigator() {
-  return (
-    <TabTwoStack.Navigator>
-      <TabTwoStack.Screen
-        name="TabTwoScreen"
-        component={TabTwoScreen}
-        options={{ headerTitle: 'Tab Two Title' }}
-      />
-    </TabTwoStack.Navigator>
-  );
+function MenuNavigation() {
+    return (
+        <MenuStack.Navigator>
+            <MenuStack.Screen
+                name="Menu"
+                component={MenuCategory}
+                options={{
+                    headerTitle: 'Tất cả danh mục',
+                    headerTintColor: '#fff',
+                    headerStyle: {
+                        backgroundColor: '#D8262F',
+                        height: 80,
+                    }
+                }}
+            />
+        </MenuStack.Navigator>
+    );
+}
+
+const ProductListStack = createStackNavigator<TabTwoParamList>();
+
+function ProductListNavigator() {
+    return (
+        <ProductListStack.Navigator>
+            <ProductListStack.Screen
+                name="ProductList"
+                component={ProductList}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderCategory />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 100,
+                    }
+                }}
+            />
+        </ProductListStack.Navigator>
+    );
+}
+
+const ProductDetailStack = createStackNavigator();
+
+function ProductDetailNavigation() {
+    return (
+        <ProductDetailStack.Navigator>
+            <ProductDetailStack.Screen
+                name="ProductDetail"
+                component={ProductDetail}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderProductDetail />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </ProductDetailStack.Navigator>
+    );
+}
+
+const AllStack = createStackNavigator();
+function AllStackNavigation() {
+    return (
+        <AllStack.Navigator initialRouteName="Home">
+            <AllStack.Screen
+                name="Home"
+                component={HomePageNavigator}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="Menu"
+                component={MenuNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ProductCategory"
+                component={ProductListNavigator}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ProductDetail"
+                component={ProductDetailNavigation}
+                options={{ headerShown: false }}
+            />
+        </AllStack.Navigator>
+    );
 }

package-lock.json

@@ -5,8 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
-        "@expo/vector-icons": "^12.0.0",
+        "@expo/vector-icons": "^12.0.4",
         "@react-native-community/masked-view": "0.1.10",
+        "@react-native-picker/picker": "^1.14.0",
         "@react-navigation/bottom-tabs": "5.11.2",
         "@react-navigation/native": "~5.8.10",
         "@react-navigation/stack": "~5.12.8",
@@ -14,6 +15,7 @@
         "expo-asset": "~8.2.1",
         "expo-constants": "~9.3.0",
         "expo-font": "~8.4.0",
+        "expo-linear-gradient": "~8.4.0",
         "expo-linking": "~2.0.0",
         "expo-splash-screen": "~0.8.0",
         "expo-status-bar": "~1.0.3",
@@ -22,8 +24,10 @@
         "react-dom": "16.13.1",
         "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
         "react-native-gesture-handler": "~1.8.0",
+        "react-native-paper": "^4.7.2",
         "react-native-safe-area-context": "3.1.9",
         "react-native-screens": "~2.15.0",
+        "react-native-swiper": "^1.6.0",
         "react-native-web": "~0.13.12"
       },
       "devDependencies": {
@@ -1430,6 +1434,26 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz",
+      "integrity": "sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@cnakazawa/watch": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -3778,6 +3802,15 @@
         "react-native": ">=0.57"
       }
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-1.14.0.tgz",
+      "integrity": "sha512-KN/nOSxO64LxYms/8RpdjdIqemqDlxM8glDi4upg40/3JqalmXoHHBQxA0XYdAoL+padSVHAoAS6Ie5zAn8gTw==",
+      "peerDependencies": {
+        "react": "16 || 17",
+        "react-native": ">=0.57"
+      }
+    },
     "node_modules/@react-navigation/bottom-tabs": {
       "version": "5.11.2",
       "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.2.tgz",
@@ -13554,6 +13587,21 @@
         "react-native": ">=0.42.0"
       }
     },
+    "node_modules/react-native-paper": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.7.2.tgz",
+      "integrity": "sha512-MOcDWjBOaknEpQgdm4fIOsRFIt4PJlMCgWlLk4kIe8Wv99/M0JIoxWABkAf4Lj5BuJgXjXdwr0DA/lhGY1BRoQ==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.5",
+        "color": "^3.1.2",
+        "react-native-iphone-x-helper": "^1.3.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz",
@@ -13572,6 +13620,154 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-swiper": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz",
+      "integrity": "sha512-OnkTTZi+9uZUgy0uz1I9oYDhCU3z36lZn+LFsk9FXPRelxb/KeABzvPs3r3SrHWy1aA67KGtSFj0xNK2QD0NJQ==",
+      "dependencies": {
+        "prop-types": "^15.5.10"
+      }
+    },
+    "node_modules/react-native-vector-icons": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
+      "integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==",
+      "peer": true,
+      "dependencies": {
+        "lodash.frompairs": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isstring": "^4.0.1",
+        "lodash.omit": "^4.5.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.template": "^4.5.0",
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
+    },
+    "node_modules/react-native-vector-icons/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "peer": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/y18n": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz",
+      "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.7",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
+      "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
@@ -17762,6 +17958,22 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "@callstack/react-theme-provider": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz",
+      "integrity": "sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==",
+      "requires": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+          "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
+        }
+      }
+    },
     "@cnakazawa/watch": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -19620,6 +19832,12 @@
       "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==",
       "requires": {}
     },
+    "@react-native-picker/picker": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-1.14.0.tgz",
+      "integrity": "sha512-KN/nOSxO64LxYms/8RpdjdIqemqDlxM8glDi4upg40/3JqalmXoHHBQxA0XYdAoL+padSVHAoAS6Ie5zAn8gTw==",
+      "requires": {}
+    },
     "@react-navigation/bottom-tabs": {
       "version": "5.11.2",
       "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.2.tgz",
@@ -27364,6 +27582,16 @@
       "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
       "requires": {}
     },
+    "react-native-paper": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.7.2.tgz",
+      "integrity": "sha512-MOcDWjBOaknEpQgdm4fIOsRFIt4PJlMCgWlLk4kIe8Wv99/M0JIoxWABkAf4Lj5BuJgXjXdwr0DA/lhGY1BRoQ==",
+      "requires": {
+        "@callstack/react-theme-provider": "^3.0.5",
+        "color": "^3.1.2",
+        "react-native-iphone-x-helper": "^1.3.1"
+      }
+    },
     "react-native-safe-area-context": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz",
@@ -27376,6 +27604,122 @@
       "integrity": "sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==",
       "requires": {}
     },
+    "react-native-swiper": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz",
+      "integrity": "sha512-OnkTTZi+9uZUgy0uz1I9oYDhCU3z36lZn+LFsk9FXPRelxb/KeABzvPs3r3SrHWy1aA67KGtSFj0xNK2QD0NJQ==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
+    "react-native-vector-icons": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
+      "integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==",
+      "peer": true,
+      "requires": {
+        "lodash.frompairs": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isstring": "^4.0.1",
+        "lodash.omit": "^4.5.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.template": "^4.5.0",
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "peer": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "peer": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "peer": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "peer": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "peer": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "peer": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "peer": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz",
+          "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==",
+          "peer": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "peer": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.7",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
+          "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
+          "peer": true
+        }
+      }
+    },
     "react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",

package.json

@@ -12,8 +12,9 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "@expo/vector-icons": "^12.0.0",
+    "@expo/vector-icons": "^12.0.4",
     "@react-native-community/masked-view": "0.1.10",
+    "@react-native-picker/picker": "^1.14.0",
     "@react-navigation/bottom-tabs": "5.11.2",
     "@react-navigation/native": "~5.8.10",
     "@react-navigation/stack": "~5.12.8",
@@ -21,6 +22,7 @@
     "expo-asset": "~8.2.1",
     "expo-constants": "~9.3.0",
     "expo-font": "~8.4.0",
+    "expo-linear-gradient": "~8.4.0",
     "expo-linking": "~2.0.0",
     "expo-splash-screen": "~0.8.0",
     "expo-status-bar": "~1.0.3",
@@ -29,8 +31,10 @@
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-gesture-handler": "~1.8.0",
+    "react-native-paper": "^4.7.2",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.0",
+    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.13.12"
   },
   "devDependencies": {

screens/MenuCategory.tsx

@@ -0,0 +1,345 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View } from '../components/Themed';
+import { TextInput } from 'react-native-gesture-handler';
+import { useNavigation } from '@react-navigation/native';
+
+export default function MenuCategory() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ListMenuCat />
+        </SafeAreaView>
+    );
+}
+
+const dataCategory = [
+    {
+        id: 1,
+        name: 'Điện gia dụng',
+        image: require('../assets/images/icon-menu1.png'),
+        imageActive: require('../assets/images/icon-menu1active.png'),
+    },
+    {
+        id: 2,
+        name: 'Đồ gia dụng',
+        image: require('../assets/images/icon-menu2.png'),
+        imageActive: require('../assets/images/icon-menu2active.png'),
+        children: [],
+    },
+    {
+        id: 3,
+        name: 'Thiết bị nhà bếp',
+        image: require('../assets/images/icon-menu3.png'),
+        imageActive: require('../assets/images/icon-menu3active.png'),
+        children: [],
+    },
+    {
+        id: 4,
+        name: 'Điều hòa',
+        image: require('../assets/images/icon-menu4.png'),
+        imageActive: require('../assets/images/icon-menu4active.png'),
+        children: [],
+    },
+    {
+        id: 5,
+        name: 'Khâu trang vải',
+        image: require('../assets/images/icon-menu5.png'),
+        imageActive: require('../assets/images/icon-menu5active.png'),
+        children: [],
+    },
+]
+
+const dataChildren = [
+    {
+        id: 6,
+        name: 'Ấm siêu tốc',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 7,
+        name: 'Bàn là',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 8,
+        name: 'Bếp hồng ngoại',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 9,
+        name: 'Bếp từ',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 10,
+        name: 'Bình thủy điện',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 11,
+        name: 'Cây nước nóng lạnh',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 12,
+        name: 'Lẩu điện',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 13,
+        name: 'Lò nướng',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 14,
+        name: 'Máy làm mát',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 15,
+        name: 'Máy lọc nước',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 16,
+        name: 'Máy sấy tóc',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 17,
+        name: 'Máy xay sinh tố',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 18,
+        name: 'Nồi áp xuất điện đa năng',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 19,
+        name: 'Nồi cơm điện',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 20,
+        name: 'Quạt đứng',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 22,
+        name: 'Máy xay thịt',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 23,
+        name: 'Nồi cơm điện tách đường',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 24,
+        name: 'Bếp nướng điện lẩu nướng',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 25,
+        name: 'Nồi chiên không dầu',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 26,
+        name: 'Lõi lọc Nagakawa',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+    {
+        id: 27,
+        name: 'Máy lọc không khí',
+        image: require('../assets/images/icon-menuc.png'),
+        imageActive: require('../assets/images/icon-menuc.png'),
+    },
+]
+
+const OtherMenuFix = [
+    {
+        id: 'dh',
+        name: 'Deal hot',
+        image: require('../assets/images/icon-cat7.png'),
+        imageActive: require('../assets/images/icon-cat7.png'),
+    },
+    {
+        id: 'cb',
+        name: 'Combo',
+        image: require('../assets/images/icon-cat8.png'),
+        imageActive: require('../assets/images/icon-cat8.png'),
+    },
+]
+
+const ListMenuCat = () => {
+    const [activeMenu, setActiveMenu] = useState(1);
+    const [activeMenuOther, setActiveMenuother] = useState('');
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxMenu}>
+            <View style={styles.boxMenuLeft}>
+                <ScrollView>
+                    {
+                        dataCategory.map((item, index) => {
+                            return (
+                                <View style={activeMenu == item.id ? [styles.boxMenuLeftItem, styles.boxMenuLeftItemActive] : styles.boxMenuLeftItem} key={item.id}>
+                                    <TouchableOpacity style={styles.boxMenuLeftItemButton} onPress={() => setActiveMenu(item.id)}>
+                                        {
+                                            activeMenu == item.id ?
+                                                <Image style={styles.boxMenuLeftItemImage} source={item.imageActive} />
+                                                : <Image style={styles.boxMenuLeftItemImage} source={item.image} />
+                                        }
+                                        {
+                                            activeMenu == item.id ?
+                                                <Text style={[styles.boxMenuLeftItemText, styles.boxMenuLeftItemTextActive]}>{item.name}</Text>
+                                                : <Text style={styles.boxMenuLeftItemText}>{item.name}</Text>
+                                        }
+
+                                    </TouchableOpacity>
+                                </View>
+                            )
+                        })
+                    }
+                    {
+                        OtherMenuFix.map((item, index) => {
+                            return (
+                                <View style={activeMenuOther == item.id ? [styles.boxMenuLeftItem, styles.boxMenuLeftItemActive] : styles.boxMenuLeftItem} key={item.id}>
+                                    <TouchableOpacity style={styles.boxMenuLeftItemButton} onPress={() => setActiveMenuother(item.id)}>
+                                        {
+                                            activeMenuOther == item.id ?
+                                                <Image style={styles.boxMenuLeftItemImage} source={item.imageActive} />
+                                                : <Image style={styles.boxMenuLeftItemImage} source={item.image} />
+                                        }
+                                        {
+                                            activeMenuOther == item.id ?
+                                                <Text style={[styles.boxMenuLeftItemText, styles.boxMenuLeftItemTextActive]}>{item.name}</Text>
+                                                : <Text style={styles.boxMenuLeftItemText}>{item.name}</Text>
+                                        }
+
+                                    </TouchableOpacity>
+                                </View>
+                            )
+                        })
+                    }
+                </ScrollView>
+            </View>
+            <View style={styles.boxMenuRight}>
+                <ScrollView>
+                    <View style={styles.boxMenuRightCt}>
+                        {
+                            dataChildren.map((item, index) => {
+                                return (
+                                    <View style={styles.boxMenuRightItem} key={item.id}>
+                                        <TouchableOpacity onPress={() => navigation.navigate('ProductCategory')}>
+                                            <Image style={styles.boxMenuRightItemImage} source={item.image} />
+                                            <Text style={styles.boxMenuRightItemText}>{item.name}</Text>
+                                        </TouchableOpacity>
+                                    </View>
+                                )
+                            })
+                        }
+                    </View>
+                </ScrollView>
+            </View>
+        </View>
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    boxMenu: {
+        width: winWidth,
+        flexDirection: 'row',
+        flex: 1,
+    },
+    boxMenuLeft: {
+        width: 110,
+        height: winHeight - 100,
+    },
+    boxMenuLeftItem: {
+        width: 110,
+        height: 110,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f2f2f2',
+        padding: 10,
+    },
+    boxMenuLeftItemActive: {
+        backgroundColor: '#fff',
+    },
+    boxMenuLeftItemButton: {
+        width: '100%',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    boxMenuLeftItemImage: {
+        marginBottom: 10,
+    },
+    boxMenuLeftItemText: {
+        textAlign: 'center',
+    },
+    boxMenuLeftItemTextActive: {
+        color: '#D8262F',
+    },
+    boxMenuRight: {
+        width: winWidth - 110,
+        height: winHeight - 130,
+    },
+    boxMenuRightCt: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        width: '100%',
+        justifyContent: 'center',
+    },
+    boxMenuRightItem: {
+        width: '33.333%',
+        padding: 10,
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    boxMenuRightItemImage: {
+        width: 52,
+        height: 52,
+        marginBottom: 10,
+    },
+    boxMenuRightItemText: {
+        textAlign: 'center',
+    },
+});

screens/ProductList.tsx

@@ -0,0 +1,772 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View } from '../components/Themed';
+import { TextInput } from 'react-native-gesture-handler';
+import { useNavigation } from '@react-navigation/native';
+
+export default function ProductList() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+
+                <SortAndFilter />
+
+                <ListCatCategory />
+
+                <ProductCategory />
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const SortAndFilter = () => {
+    const [openSort, setopenSort] = useState(true);
+    const [openFilter, setOpenFilter] = useState(false);
+    return (
+        <View style={styles.sortAndFilter}>
+            <View style={styles.boxSort}>
+                <TouchableOpacity style={styles.boxSortButton} onPress={() => setopenSort(!openSort)}>
+                    <Text style={styles.boxSortButtonTextBold}>Sắp xếp: </Text>
+                    <Text style={styles.boxSortButtonActive}>Mới nhất</Text>
+                    <Ionicons style={styles.boxSortButtonIcon} name="caret-down-outline" />
+                </TouchableOpacity>
+                <View style={openSort ? styles.boxSortList : [styles.boxSortList, styles.boxSortListActive]}>
+                    <TouchableOpacity style={[styles.boxSortItem, styles.boxSortItemActive]}>
+                        <Text style={[styles.boxSortItemText, styles.boxSortItemTextActive]}>Mới nhất</Text>
+                        <Ionicons style={styles.boxSortItemTextIcon} name="checkmark-outline" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.boxSortItem}>
+                        <Text style={styles.boxSortItemText}>Giá giảm dần</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.boxSortItem}>
+                        <Text style={styles.boxSortItemText}>Giá tăng dần</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={styles.boxFilter}>
+                <TouchableOpacity style={styles.boxFilterButton} onPress={() => setOpenFilter(true)}>
+                    <Ionicons style={styles.boxFilterIcon} name="funnel-outline" />
+                    <Text style={styles.boxFilterText}>Lọc</Text>
+                </TouchableOpacity>
+                <Modal visible={openFilter} animationType="slide" transparent={true} onRequestClose={() => { setOpenFilter(!openFilter); }}>
+                    <View style={styles.filterItemContent}>
+                        <Pressable onPress={() => setOpenFilter(!openFilter)} style={styles.filterItemContentBg}>
+                        </Pressable>
+                        <View style={styles.filterItemList}>
+                            <View style={styles.headerPopFilter}>
+                                <Pressable onPress={() => setOpenFilter(!openFilter)}>
+                                    <Ionicons style={styles.filterItemListClose} name="close-outline" />
+                                </Pressable>
+                                <Text style={styles.headerPopFilterText}>Bộ lọc</Text>
+                            </View>
+                            <View style={styles.listBoxFilter}>
+                                <ScrollView>
+                                    <PriceFilterList />
+
+                                    <OtherFilterList />
+
+                                    <OtherFilterListT />
+                                </ScrollView>
+                            </View>
+                        </View>
+                    </View>
+                </Modal>
+            </View>
+        </View>
+    )
+}
+
+const PriceFilterList = () => {
+    const dataPriceFilter = [
+        {
+            url: '/',
+            name: 'Dưới 200.000',
+            is_current: 1,
+        },
+        {
+            url: '/',
+            name: 'Từ 200.000 đến 500.000',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: 'Từ 500.000 đến 1.000.000',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: 'Từ 1.000.000 đến 5.000.000',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: 'Từ 5.000.000 đến 15.000.000',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: 'Trên 15.000.000',
+            is_current: 0,
+        },
+    ]
+    return (
+        <View style={styles.filterItemBox}>
+            <Text style={styles.filterItemListTitleName}>Khoảng giá</Text>
+            <View style={styles.filterItemBoxList}>
+                {
+                    dataPriceFilter.map((item, index) =>
+                        <FilterItem key={index} name={item.name} isCurrent={item.is_current} />
+                    )
+                }
+            </View>
+            <View style={styles.filterItemBoxInput}>
+                <Text style={styles.filterItemBoxInputText}>Hoặc nhập giá ở ô dưới đây</Text>
+                <View style={styles.filterItemBoxInputCtList}>
+                    <TextInput style={styles.filterItemBoxInputCt} placeholder="Từ 0đ" />
+                    <TextInput style={styles.filterItemBoxInputCt} placeholder="đến 10.000.00đ" />
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const OtherFilterList = () => {
+    const [openAllFilter, setOpenAllFilter] = useState(true);
+    const dataPriceFilter = [
+        {
+            url: '/',
+            name: '1 - 2 lít',
+            is_current: 1,
+        },
+        {
+            url: '/',
+            name: '2 - 3 lít',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '3 - 4 lít',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '4 - 9 lít',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '9 - 12 lít',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '12 - 15 lít',
+            is_current: 0,
+        },
+    ]
+    return (
+        <View style={styles.filterItemBox}>
+            <Text style={styles.filterItemListTitleName}>Dung tích</Text>
+            <View style={openAllFilter ? styles.filterItemBoxListHeight : [styles.filterItemBoxListHeight, styles.filterItemBoxListHeightAuto]}>
+                {
+                    dataPriceFilter.map((item, index) =>
+                        <FilterItem key={index} name={item.name} isCurrent={item.is_current} />
+                    )
+                }
+            </View>
+            <View style={styles.filterItemBoxVm}>
+                <TouchableOpacity onPress={() => setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}>
+                    <Text style={styles.filterItemBoxVmButtonText}>Xem thêm</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const OtherFilterListT = () => {
+    const [openAllFilter, setOpenAllFilter] = useState(true);
+    const dataPriceFilter = [
+        {
+            url: '/',
+            name: '30W - 100W',
+            is_current: 1,
+        },
+        {
+            url: '/',
+            name: '100W - 300W',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '300W - 500W',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '500W - 1000W',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '1000W - 2000W',
+            is_current: 0,
+        },
+        {
+            url: '/',
+            name: '2000W - 5000W',
+            is_current: 0,
+        },
+    ]
+    return (
+        <View style={styles.filterItemBox}>
+            <Text style={styles.filterItemListTitleName}>Công xuất</Text>
+            <View style={openAllFilter ? styles.filterItemBoxListHeight : [styles.filterItemBoxListHeight, styles.filterItemBoxListHeightAuto]}>
+                {
+                    dataPriceFilter.map((item, index) =>
+                        <FilterItem key={index} name={item.name} isCurrent={item.is_current} />
+                    )
+                }
+            </View>
+            <View style={styles.filterItemBoxVm}>
+                <TouchableOpacity onPress={() => setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}>
+                    <Text style={styles.filterItemBoxVmButtonText}>Xem thêm</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const FilterItem = (props: { name: string, isCurrent: number }) => {
+    const { name, isCurrent } = props;
+    return (
+        <Pressable style={isCurrent > 0 ? [styles.filterItem, styles.filterItemActive] : styles.filterItem} onPress={() => Alert.alert('danh muc sp')}>
+            <Text style={styles.filterItemName}>{name}</Text>
+            {
+                isCurrent > 0 ?
+                    <View style={styles.filterCurrent}>
+                        <Image style={styles.filterCurrentImg} source={require('../assets/images/filter-check.png')} />
+                        <Ionicons style={styles.filterCurrentIcon} name="checkmark-outline" />
+                    </View>
+                    : <View></View>
+            }
+        </Pressable>
+    );
+}
+
+const ListCatCategory = () => {
+    const dataCat = [
+        {
+            id: 1,
+            url: '/',
+            name: 'Ấm siêu tốc'
+        },
+        {
+            id: 2,
+            url: '/',
+            name: 'Bàn là'
+        },
+        {
+            id: 3,
+            url: '/',
+            name: 'Bếp từ'
+        },
+        {
+            id: 4,
+            url: '/',
+            name: 'Bếp hồng ngoại'
+        },
+        {
+            id: 5,
+            url: '/',
+            name: 'Bình thủy điện'
+        },
+    ]
+    let dataCatLength = dataCat.length;
+    return (
+        <View style={styles.boxCatCategory}>
+            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+                {
+                    dataCat.map((item, index) =>
+                        <TouchableOpacity style={(index + 1) == dataCatLength ? [styles.boxCatCategoryItem, styles.boxCatCategoryItemLast] : styles.boxCatCategoryItem} key={item.id}>
+                            <Text style={styles.boxCatCategoryItemText}>{item.name}</Text>
+                        </TouchableOpacity>
+                    )
+                }
+            </ScrollView>
+        </View>
+    )
+}
+
+const ProductCategory = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxProductCategoryList}>
+            <View style={styles.pItem}>
+                <View style={styles.pContainer}>
+                    <View style={styles.pImgContent}>
+                        <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
+                        <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
+                        <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
+                    </View>
+                    <View style={styles.pInfo}>
+                        <TouchableOpacity onPress={() => navigation.navigate('ProductDetail')}>
+                            <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
+                        </TouchableOpacity>
+                        <Text style={styles.pPrice}>1.292.000đ</Text>
+                        <View style={styles.pAllSale}>
+                            <Text style={styles.pOldPrice}>1.634.000đ</Text>
+                            <Text style={styles.pDiscount}>-30%</Text>
+                        </View>
+                        <View style={styles.pOffer}>
+                            <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
+                            <Text style={styles.pOfferPrice}>500.000đ</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+            <View style={styles.pItem}>
+                <View style={styles.pContainer}>
+                    <View style={styles.pImgContent}>
+                        <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
+                        <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
+                        <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
+                    </View>
+                    <View style={styles.pInfo}>
+                        <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
+                        <Text style={styles.pPrice}>1.292.000đ</Text>
+                        <View style={styles.pAllSale}>
+                            <Text style={styles.pOldPrice}>1.634.000đ</Text>
+                            <Text style={styles.pDiscount}>-30%</Text>
+                        </View>
+                        <View style={styles.pOffer}>
+                            <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
+                            <Text style={styles.pOfferPrice}>500.000đ</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+            <View style={styles.pItem}>
+                <View style={styles.pContainer}>
+                    <View style={styles.pImgContent}>
+                        <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
+                        <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
+                        <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
+                    </View>
+                    <View style={styles.pInfo}>
+                        <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
+                        <Text style={styles.pPrice}>1.292.000đ</Text>
+                        <View style={styles.pAllSale}>
+                            <Text style={styles.pOldPrice}>1.634.000đ</Text>
+                            <Text style={styles.pDiscount}>-30%</Text>
+                        </View>
+                        <View style={styles.pOffer}>
+                            <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
+                            <Text style={styles.pOfferPrice}>500.000đ</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+            <View style={styles.pItem}>
+                <View style={styles.pContainer}>
+                    <View style={styles.pImgContent}>
+                        <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
+                        <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
+                        <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
+                    </View>
+                    <View style={styles.pInfo}>
+                        <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
+                        <Text style={styles.pPrice}>1.292.000đ</Text>
+                        <View style={styles.pAllSale}>
+                            <Text style={styles.pOldPrice}>1.634.000đ</Text>
+                            <Text style={styles.pDiscount}>-30%</Text>
+                        </View>
+                        <View style={styles.pOffer}>
+                            <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
+                            <Text style={styles.pOfferPrice}>500.000đ</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    sortAndFilter: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        position: 'relative',
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
+        zIndex: 5,
+    },
+    boxSort: {
+        zIndex: 1,
+    },
+    boxSortButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 30,
+    },
+    boxSortButtonTextBold: {
+        fontSize: 14,
+        fontWeight: 'bold'
+    },
+    boxSortButtonActive: {},
+    boxSortButtonIcon: {
+        marginLeft: 5,
+    },
+    boxSortList: {
+        width: winWidth,
+        paddingHorizontal: 10,
+        position: 'absolute',
+        left: -10,
+        top: 40,
+        display: 'none',
+    },
+    boxSortListActive: {
+        display: 'flex',
+    },
+    boxSortItem: {
+        paddingVertical: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    boxSortItemActive: {
+        borderBottomColor: '#D8262F',
+        borderBottomWidth: 1,
+    },
+    boxSortItemText: {
+        fontSize: 14,
+    },
+    boxSortItemTextActive: {
+        color: '#D8262F'
+    },
+    boxSortItemTextIcon: {
+        color: '#D8262F'
+    },
+    boxFilter: {
+        width: 70,
+        height: 30,
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        borderLeftWidth: 1,
+        borderLeftColor: '#e1e1e1'
+    },
+    boxFilterButton: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    boxFilterIcon: {
+        fontSize: 18,
+        marginRight: 10,
+    },
+    boxFilterText: {
+        fontSize: 14,
+    },
+    filterItemContent: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        position: 'relative',
+        zIndex: 1,
+        flexDirection: 'row',
+    },
+    filterItemContentBg: {
+        width: winWidth - 300,
+        height: winHeight,
+    },
+    headerPopFilter: {
+        width: '100%',
+        paddingTop: 30,
+        paddingHorizontal: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1',
+        position: 'relative',
+    },
+    filterItemListClose: {
+        width: 40,
+        height: 40,
+        lineHeight: 40,
+        fontSize: 26,
+    },
+    headerPopFilterText: {
+        textAlign: 'center',
+        fontSize: 17,
+        fontWeight: 'bold',
+        width: '100%',
+        paddingRight: 40,
+    },
+    filterItemList: {
+        width: 300,
+        height: winHeight,
+        backgroundColor: '#fff',
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 0,
+        },
+        shadowOpacity: 2.22,
+        shadowRadius: 2.22,
+        elevation: 3,
+        overflow: 'hidden',
+        position: 'relative',
+        zIndex: 2,
+    },
+    listBoxFilter: {
+        width: '100%',
+        height: winHeight - 80,
+    },
+    filterItemListTitleName: {
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    filterItemBoxList: {
+        width: '100%',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    filterItem: {
+        width: 135,
+        height: 40,
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.2)',
+        borderRadius: 3,
+        marginBottom: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.2)',
+        position: 'relative',
+    },
+    filterItemActive: {
+        borderColor: '#D8262F'
+    },
+    filterItemName: {
+        width: '100%',
+        textAlign: 'center'
+    },
+    boxProductCategory: {
+        width: winWidth,
+    },
+    filterItemBox: {
+        width: '100%',
+        padding: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1',
+    },
+    filterCurrent: {
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    filterCurrentImg: {
+        width: 24,
+        height: 22,
+    },
+    filterCurrentIcon: {
+        position: 'absolute',
+        zIndex: 1,
+        color: '#fff',
+        right: 0,
+        top: 0,
+    },
+    filterItemBoxInput: {
+        width: '100%',
+        marginTop: 10,
+    },
+    filterItemBoxInputText: {
+        marginBottom: 10,
+    },
+    filterItemBoxInputCtList: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    filterItemBoxInputCt: {
+        width: 135,
+        height: 40,
+        paddingHorizontal: 10,
+        borderColor: '#e1e1e1',
+        borderWidth: 1,
+        borderRadius: 3,
+    },
+    filterItemBoxListHeight: {
+        width: '100%',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        maxHeight: 100,
+        overflow: 'hidden'
+    },
+    filterItemBoxListHeightAuto: {
+        maxHeight: 'auto'
+    },
+    filterItemBoxVm: {
+        width: '100%',
+        marginBottom: 10,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 10,
+    },
+    filterItemBoxVmButton: {
+        width: 128,
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#56C4F5',
+        borderRadius: 3,
+    },
+    filterItemBoxVmButtonText: {
+        color: '#56C4F5',
+        fontSize: 14,
+    },
+    boxCatCategory: {
+        padding: 10,
+    },
+    boxCatCategoryItem: {
+        display: 'flex',
+        padding: 10,
+        backgroundColor: 'rgba(0,0,0,0.08)',
+        marginRight: 10,
+    },
+    boxCatCategoryItemLast: {
+        marginRight: 0,
+    },
+    boxCatCategoryItemText: {
+        fontSize: 14,
+    },
+    pContainer: {
+        width: '100%',
+        padding: 10,
+    },
+    pImgContent: {
+        width: '100%',
+        position: 'relative',
+        paddingTop: '100%',
+        marginBottom: 10,
+    },
+    pNew: {
+        width: 24,
+        height: 18,
+        position: 'absolute',
+        zIndex: 6,
+        top: 0,
+        left: 0,
+    },
+    pImg: {
+        width: '100%',
+        position: 'absolute',
+        zIndex: 5,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    pTraGop: {
+        width: 68,
+        height: 16,
+        position: 'absolute',
+        zIndex: 6,
+        bottom: 0,
+        left: '50%',
+        transform: [{ translateX: -34 }],
+    },
+    pInfo: {
+        width: '100%',
+    },
+    pName: {
+        width: '100%',
+        fontSize: 14,
+        marginBottom: 10,
+    },
+    pPrice: {
+        width: '100%',
+        fontSize: 18,
+        marginBottom: 10,
+        color: '#D8262F',
+        fontWeight: 'bold',
+    },
+    pAllSale: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    pOldPrice: {
+        color: '#A1A1A1',
+        fontSize: 14,
+        textDecorationLine: 'line-through',
+    },
+    pDiscount: {
+        paddingVertical: 5,
+        backgroundColor: '#D8262F',
+        width: 50,
+        textAlign: 'center',
+        color: '#fff',
+        borderRadius: 5,
+        overflow: 'hidden',
+        marginLeft: 5,
+    },
+    pOffer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    pOfferText: {
+        fontSize: 10,
+        color: '#A1A1A1',
+    },
+    pOfferPrice: {
+        fontSize: 10,
+        color: '#D8262F',
+    },
+    pItem: {
+        width: winWidth / 2 - 15,
+        marginBottom: 10,
+        borderRadius: 5,
+        overflow: 'hidden',
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 3,
+        },
+        shadowOpacity: 0.27,
+        shadowRadius: 4.65,
+        elevation: 6,
+    },
+    boxProductCategoryList: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        backgroundColor: '#f2f2f2',
+    },
+});

screens/TabOneScreen.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
-import { Text, View } from '../components/Themed';
-
-export default function TabOneScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab One</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="/screens/TabOneScreen.tsx" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

screens/TabTwoScreen.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
-import { Text, View } from '../components/Themed';
-
-export default function TabTwoScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab Two</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="/screens/TabTwoScreen.tsx" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

types.tsx

@@ -5,13 +5,13 @@ export type RootStackParamList = {
 
 export type BottomTabParamList = {
   TabOne: undefined;
-  TabTwo: undefined;
+  TabTwo: undefined; 
 };
 
 export type TabOneParamList = {
-  TabOneScreen: undefined;
+  HomePage: undefined;
 };
 
 export type TabTwoParamList = {
-  TabTwoScreen: undefined;
+  ProductList: undefined;
 };