add cart, login, product search, update navigation

components/header/HeaderAllPage.tsx

@@ -16,11 +16,12 @@ const winWidth = Dimensions.get('window').width; //full width
 const winHeight = Dimensions.get('window').height; //full height
 
 const HeaderHome = () => {
+    const navigation = useNavigation();
     return (
         <View style={styles.headerBox}>
             <Image style={styles.headerBoxLogo} source={require('../../assets/images/logo.png')} />
             <View style={styles.headerBoxSearch}>
-                <TouchableOpacity style={styles.headerBoxSearchButton}>
+                <TouchableOpacity style={styles.headerBoxSearchButton} onPress={() => navigation.navigate('ProductSearch')}>
                     <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>
@@ -33,6 +34,7 @@ const HeaderHome = () => {
 
 const HeaderCategory = () => {
     const [openSearch, setopenSearch] = useState(true);
+    const navigation = useNavigation();
     return (
         <View style={styles.headerCategory}>
             <TouchableOpacity style={styles.headerCategoryBack}>
@@ -44,7 +46,7 @@ const HeaderCategory = () => {
                 </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}>
+                    <TouchableOpacity onPress={() => navigation.navigate('ProductSearch')} style={styles.headerCategorySearchSubmit}>
                         <Ionicons style={styles.headerCategorySearchSubmitIcon} name="search-outline" />
                     </TouchableOpacity>
                 </View>
@@ -56,7 +58,7 @@ const HeaderCategory = () => {
                 </TouchableOpacity>
             </View>
             <View style={styles.headerCategoryCart}>
-                <TouchableOpacity style={styles.headerCategoryCartButton}>
+                <TouchableOpacity style={styles.headerCategoryCartButton} onPress={() => navigation.navigate('Cart')}>
                     <Ionicons style={styles.headerCategoryCartIcon} name="cart-outline" />
                     <Text style={styles.headerCategoryCartCount}>0</Text>
                 </TouchableOpacity>
@@ -77,7 +79,29 @@ const HeaderProductDetail = () => {
                 <TouchableOpacity onPress={() => navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
                     <Ionicons style={styles.boxHeaderProductDetailIcon} name="home-outline" />
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.boxHeaderProductDetailCart}>
+                <TouchableOpacity style={styles.boxHeaderProductDetailCart} onPress={() => navigation.navigate('Cart')}>
+                    <Ionicons style={styles.boxHeaderProductDetailIcon} name="cart-outline" />
+                    <Text style={styles.boxHeaderProductDetailCartCount}>0</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const HeaderAllOtherPage = (props : {headerTitle: string}) => {
+    const {headerTitle} = props
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxHeaderProductDetail}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.boxHeaderProductDetailGoBack}>
+                <Ionicons style={styles.boxHeaderProductDetailIcon} name="chevron-back-outline" />
+            </TouchableOpacity>
+            <Text style={styles.boxHeaderProductDetailTitle}>{headerTitle}</Text>
+            <View style={styles.boxHeaderProductDetailRight}>
+                <TouchableOpacity onPress={() => navigation.navigate('Home')} style={styles.boxHeaderProductDetailHome}>
+                    <Ionicons style={styles.boxHeaderProductDetailIcon} name="home-outline" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.boxHeaderProductDetailCart} onPress={() => navigation.navigate('Cart')}>
                     <Ionicons style={styles.boxHeaderProductDetailIcon} name="cart-outline" />
                     <Text style={styles.boxHeaderProductDetailCartCount}>0</Text>
                 </TouchableOpacity>
@@ -87,7 +111,7 @@ const HeaderProductDetail = () => {
 }
 
 
-export { HeaderHome, HeaderCategory, HeaderProductDetail };
+export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage };
 
 const styles = StyleSheet.create({
     container: {
@@ -288,4 +312,10 @@ const styles = StyleSheet.create({
         top: 5,
         right: 0,
     },
+    boxHeaderProductDetailTitle: {
+        width: winWidth - 140,
+        textAlign: 'center',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
 })

components/product/ProductItem.tsx

@@ -17,7 +17,9 @@ const winHeight = Dimensions.get('window').height; //full height
 
 const ProductItemSt = () => {
     return (
-        <View></View>
+        <View>
+            
+        </View>
     )
 }
 

navigation/BottomTabNavigator.tsx

@@ -11,7 +11,10 @@ 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'
+import Cart from '../screens/Cart';
+import Login from '../screens/Login';
+import ProductSearch from '../screens/ProductSearch';
+import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage } from '../components/header/HeaderAllPage'
 
 
 const BottomTab = createBottomTabNavigator();
@@ -37,7 +40,7 @@ export default function BottomTabNavigator() {
             />
             <BottomTab.Screen
                 name="Giỏ hàng"
-                component={ProductListNavigator}
+                component={CartNavigation}
                 options={{
                     tabBarIcon: ({ color }) => <TabBarIcon name="cart-outline" color={color} />,
                 }}
@@ -51,7 +54,7 @@ export default function BottomTabNavigator() {
             />
             <BottomTab.Screen
                 name="Tài khoản"
-                component={ProductListNavigator}
+                component={LoginNavigation}
                 options={{
                     tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
                 }}
@@ -158,6 +161,75 @@ function ProductDetailNavigation() {
     );
 }
 
+const CartStack = createStackNavigator();
+
+function CartNavigation() {
+    return (
+        <CartStack.Navigator>
+            <CartStack.Screen
+                name="Cart"
+                component={Cart}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Giỏ hàng'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </CartStack.Navigator>
+    );
+}
+
+const LoginStack = createStackNavigator();
+
+function LoginNavigation() {
+    return (
+        <LoginStack.Navigator>
+            <LoginStack.Screen
+                name="ProductDetail"
+                component={Login}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Đăng nhập'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </LoginStack.Navigator>
+    );
+}
+
+const ProductSearchStack = createStackNavigator();
+
+function ProductSearchNavigation() {
+    return (
+        <ProductSearchStack.Navigator>
+            <ProductSearchStack.Screen
+                name="ProductSearch"
+                component={ProductSearch}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Tìm kiếm'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </ProductSearchStack.Navigator>
+    );
+}
+
 const AllStack = createStackNavigator();
 function AllStackNavigation() {
     return (
@@ -182,6 +254,21 @@ function AllStackNavigation() {
                 component={ProductDetailNavigation}
                 options={{ headerShown: false }}
             />
+            <AllStack.Screen
+                name="Cart"
+                component={CartNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="Login"
+                component={LoginNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ProductSearch"
+                component={ProductSearchNavigation}
+                options={{ headerShown: false }}
+            />
         </AllStack.Navigator>
     );
 }

screens/Login.tsx

@@ -0,0 +1,182 @@
+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 Login() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <View style={styles.boxLogin}>
+                    <View style={styles.boxLoginTitle}>
+                        <Text style={styles.boxLoginTitleText}>Chào mừng đến với Nagakawa!</Text>
+                        <Text style={styles.boxLoginTitleText}>Đăng nhập ngay!</Text>
+                    </View>
+                    <View style={styles.boxLoginToRegis}>
+                        <Text>Khách hàng mới?</Text>
+                        <TouchableOpacity>
+                            <Text style={styles.green}>Đăng ký</Text>
+                        </TouchableOpacity>
+                        <Text>tại đây</Text>
+                    </View>
+                    <View style={styles.loginCartSocialForm}>
+                        <View style={styles.loginCartSocialFormItem}>
+                            <Text style={styles.loginCartSocialFormItemText}>Email đăng nhập</Text>
+                            <TextInput style={styles.loginCartSocialFormItemInput} />
+                        </View>
+                        <View style={styles.loginCartSocialFormItem}>
+                            <Text style={styles.loginCartSocialFormItemText}>Mật khẩu</Text>
+                            <TextInput style={styles.loginCartSocialFormItemInput} />
+                        </View>
+                        <View style={styles.boxLoginForgetPass}>
+                            <TouchableOpacity>
+                                <Text style={styles.boxLoginForgetPassText}>Quên mật khẩu?</Text>
+                            </TouchableOpacity>
+                        </View>
+                        <TouchableOpacity style={styles.boxLoginSubmit}>
+                            <Text style={styles.boxLoginSubmitText}>Đăng nhập</Text>
+                        </TouchableOpacity>
+                        <View style={styles.boxLoginOther}>
+                            <Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
+                        </View>
+                        <View style={styles.boxLoginSocial}>
+                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
+                                <FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
+                            </TouchableOpacity>
+                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
+                                <FontAwesome style={styles.boxLoginSocialIcon} name="google" />
+                            </TouchableOpacity>
+                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
+                                <Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+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',
+    },
+    boxLogin: {
+        width: winWidth,
+        padding: 10,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    boxLoginTitle: {
+        width:  '100%',
+        backgroundColor: 'rgba(0,0,0,0)',
+        marginBottom: 20,
+    },
+    boxLoginTitleText: {
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    boxLoginToRegis: {
+        width:  '100%',
+        backgroundColor: 'rgba(0,0,0,0)',
+        marginBottom: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    green: {
+        color: '#008445',
+    },
+    loginCartSocialForm: {
+        marginBottom: 10,
+        padding: 10,
+    },
+    loginCartSocialFormItem: {
+        width: '100%',
+        marginBottom: 10,
+    },
+    loginCartSocialFormItemText: {
+        marginBottom: 5,
+        fontWeight: 'bold'
+    },
+    loginCartSocialFormItemInput: {
+        width: '100%',
+        height: 40,
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        borderRadius: 5,
+    },
+    loginCartSocialFormNote: {
+        marginBottom: 10,
+        flexDirection: 'row',
+    },
+    boxLoginForgetPass: {
+        width: '100%',
+        flexDirection: 'row',
+        marginBottom: 15,
+        justifyContent: 'flex-end',
+    },
+    boxLoginForgetPassText: {
+        color: '#008445',
+    },
+    boxLoginSubmit: {
+        width: '100%',
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 5,
+        overflow: 'hidden',
+        backgroundColor: '#d9282f',
+        marginBottom: 20,
+    },
+    boxLoginSubmitText: {
+        fontWeight: 'bold',
+        color: '#fff'
+    },
+    boxLoginOther: {
+        marginBottom: 20,
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    boxLoginOtherText: {},
+    boxLoginSocial: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    boxLoginSocialItem: {
+        width: 34,
+        height: 34,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 5,
+        marginHorizontal: 5,
+        backgroundColor: '#3b5998',
+    },
+    boxLoginSocialFace: {},
+    boxLoginSocialGoogle: {
+        backgroundColor: '#df4a32',
+    },
+    boxLoginSocialZalo: {
+        backgroundColor: '#0f8edd',
+    },
+    boxLoginSocialIcon: {
+        fontSize: 16,
+        color: '#fff',
+    },
+    boxLoginSocialImg: {
+        width: 16,
+        height: 16,
+    },
+});

screens/ProductList.tsx

@@ -72,6 +72,11 @@ const SortAndFilter = () => {
                                     <OtherFilterListT />
                                 </ScrollView>
                             </View>
+                            <View style={styles.filterViewAll}>
+                                <TouchableOpacity style={styles.filterViewAllButton}>
+                                    <Text style={styles.filterViewAllButtonText}>Xem 1020 sản phẩm</Text>
+                                </TouchableOpacity>
+                            </View>
                         </View>
                     </View>
                 </Modal>
@@ -535,7 +540,27 @@ const styles = StyleSheet.create({
     },
     listBoxFilter: {
         width: '100%',
-        height: winHeight - 80,
+        height: winHeight - 130,
+    },
+    filterViewAll: {
+        width: '100%',
+        height: 60,
+        paddingHorizontal: 10,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    filterViewAllButton: {
+        width: '100%',
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+    },
+    filterViewAllButtonText: {
+        color: '#fff',
     },
     filterItemListTitleName: {
         fontWeight: 'bold',

screens/ProductSearch.tsx

@@ -0,0 +1,751 @@
+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 ProductSearch() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+
+                <SortAndFilter />
+
+                <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 style={styles.filterViewAll}>
+                                <TouchableOpacity style={styles.filterViewAllButton}>
+                                    <Text style={styles.filterViewAllButtonText}>Xem 1020 sản phẩm</Text>
+                                </TouchableOpacity>
+                            </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 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 - 130,
+    },
+    filterViewAll: {
+        width: '100%',
+        height: 60,
+        paddingHorizontal: 10,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    filterViewAllButton: {
+        width: '100%',
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+    },
+    filterViewAllButtonText: {
+        color: '#fff',
+    },
+    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',
+    },
+});