them cac trang cart, tai khoan

components/header/HeaderAllPage.tsx

@@ -110,8 +110,26 @@ const HeaderAllOtherPage = (props : {headerTitle: string}) => {
     )
 }
 
+const HeaderLogin = (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>
+                    <Text style={styles.headerLoginSp}>Trợ giúp</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
 
-export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage };
+
+export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage, HeaderLogin };
 
 const styles = StyleSheet.create({
     container: {
@@ -318,4 +336,8 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         fontSize: 16,
     },
+    headerLoginSp: {
+        fontWeight: '300',
+        color: '#777'
+    },
 })

navigation/BottomTabNavigator.tsx

@@ -9,6 +9,7 @@ import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
 import HomePage from '../screens/HomePage';
 import ProductList from '../screens/ProductList';
+import ProductHotList from '../screens/ProductHotList';
 import MenuCategory from '../screens/MenuCategory';
 import ProductDetail from '../screens/ProductDetail';
 import Cart from '../screens/Cart';
@@ -19,7 +20,20 @@ import ArticleHome from '../screens/ArticleHome';
 import ArticleList from '../screens/ArticleList';
 import ArticleDetail from '../screens/ArticleDetail';
 import AccountHome from '../screens/AccountHome';
-import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage } from '../components/header/HeaderAllPage'
+import ForgotPassword from '../screens/ForgotPassword';
+import CartStep from '../screens/CartStep';
+import CartPayInstallment from '../screens/CartPayInstallment';
+import AccountIndex from '../screens/AccountIndex';
+import SettingAccount from '../screens/SettingAccount';
+import AccountOrderList from '../screens/AccountOrderList';
+import AccountOrderDetail from '../screens/AccountOrderDetail';
+import AccountProductBought from '../screens/AccountProductBought';
+import AccountProductViewHistory from '../screens/AccountProductViewHistory';
+import AccountProductFavorite from '../screens/AccountProductFavorite';
+import AccountProductSave from '../screens/AccountProductSave';
+import AccountCoin from '../screens/AccountCoin';
+import CustomerInfo from '../screens/CustomerInfo';
+import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage, HeaderLogin } from '../components/header/HeaderAllPage'
 
 
 const BottomTab = createBottomTabNavigator();
@@ -59,7 +73,7 @@ export default function BottomTabNavigator() {
             />
             <BottomTab.Screen
                 name="Tài khoản"
-                component={LoginNavigation}
+                component={AccountIndexNavigation}
                 options={{
                     tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
                 }}
@@ -174,10 +188,58 @@ function CartNavigation() {
             <CartStack.Screen
                 name="Cart"
                 component={Cart}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </CartStack.Navigator>
+    );
+}
+
+const CartStepStack = createStackNavigator();
+
+function CartStepNavigation() {
+    return (
+        <CartStepStack.Navigator>
+            <CartStepStack.Screen
+                name="CartStep"
+                component={CartStep}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </CartStepStack.Navigator>
+    );
+}
+
+const CartPayInstallmentStack = createStackNavigator();
+
+function CartPayInstallmentNavigation() {
+    return (
+        <CartPayInstallmentStack.Navigator>
+            <CartPayInstallmentStack.Screen
+                name="CartPayInstallment"
+                component={CartPayInstallment}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </CartPayInstallmentStack.Navigator>
+    );
+}
+
+const AccountIndexStack = createStackNavigator();
+
+function AccountIndexNavigation() {
+    return (
+        <AccountIndexStack.Navigator>
+            <AccountIndexStack.Screen
+                name="AccountIndex"
+                component={AccountIndex}
                 options={{
                     headerTitle: '',
                     headerLeft: () => (
-                        <HeaderAllOtherPage headerTitle={'Giỏ hàng'} />
+                        <HeaderLogin headerTitle={'Đăng nhập'} />
                     ),
                     headerStyle: {
                         backgroundColor: '#fff',
@@ -185,7 +247,7 @@ function CartNavigation() {
                     }
                 }}
             />
-        </CartStack.Navigator>
+        </AccountIndexStack.Navigator>
     );
 }
 
@@ -200,7 +262,7 @@ function LoginNavigation() {
                 options={{
                     headerTitle: '',
                     headerLeft: () => (
-                        <HeaderAllOtherPage headerTitle={'Đăng nhập'} />
+                        <HeaderLogin headerTitle={'Đăng nhập'} />
                     ),
                     headerStyle: {
                         backgroundColor: '#fff',
@@ -223,7 +285,7 @@ function RegisterNavigation() {
                 options={{
                     headerTitle: '',
                     headerLeft: () => (
-                        <HeaderAllOtherPage headerTitle={'Đăng ký'} />
+                        <HeaderLogin headerTitle={'Đăng ký'} />
                     ),
                     headerStyle: {
                         backgroundColor: '#fff',
@@ -351,6 +413,197 @@ function AccountHomeNavigation() {
     );
 }
 
+const ProductHotListStack = createStackNavigator();
+
+function ProductHotListNavigation() {
+    return (
+        <ProductHotListStack.Navigator>
+            <ProductHotListStack.Screen
+                name="ProductHotList"
+                component={ProductHotList}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderAllOtherPage headerTitle={'Sản phẩm nổi bật'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </ProductHotListStack.Navigator>
+    );
+}
+
+const ForgotPasswordStack = createStackNavigator();
+
+function ForgotPasswordNavigation() {
+    return (
+        <ForgotPasswordStack.Navigator>
+            <ForgotPasswordStack.Screen
+                name="ForgotPassword"
+                component={ForgotPassword}
+                options={{
+                    headerTitle: '',
+                    headerLeft: () => (
+                        <HeaderLogin headerTitle={'Đăng nhập'} />
+                    ),
+                    headerStyle: {
+                        backgroundColor: '#fff',
+                        height: 80,
+                    }
+                }}
+            />
+        </ForgotPasswordStack.Navigator>
+    );
+}
+
+const SettingAccountStack = createStackNavigator();
+
+function SettingAccountNavigation() {
+    return (
+        <SettingAccountStack.Navigator>
+            <SettingAccountStack.Screen
+                name="SettingAccount"
+                component={SettingAccount}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </SettingAccountStack.Navigator>
+    );
+}
+
+const AccountOrderListStack = createStackNavigator();
+
+function AccountOrderListNavigation() {
+    return (
+        <AccountOrderListStack.Navigator>
+            <AccountOrderListStack.Screen
+                name="AccountOrderList"
+                component={AccountOrderList}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountOrderListStack.Navigator>
+    );
+}
+
+const AccountOrderDetailStack = createStackNavigator();
+
+function AccountOrderDetailNavigation() {
+    return (
+        <AccountOrderDetailStack.Navigator>
+            <AccountOrderDetailStack.Screen
+                name="AccountOrderDetail"
+                component={AccountOrderDetail}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountOrderDetailStack.Navigator>
+    );
+}
+
+const AccountProductBoughtStack = createStackNavigator();
+
+function AccountProductBoughtNavigation() {
+    return (
+        <AccountProductBoughtStack.Navigator>
+            <AccountProductBoughtStack.Screen
+                name="AccountProductBought"
+                component={AccountProductBought}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountProductBoughtStack.Navigator>
+    );
+}
+
+const AccountProductViewHistoryStack = createStackNavigator();
+
+function AccountProductViewHistoryNavigation() {
+    return (
+        <AccountProductViewHistoryStack.Navigator>
+            <AccountProductViewHistoryStack.Screen
+                name="AccountProductViewHistory"
+                component={AccountProductViewHistory}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountProductViewHistoryStack.Navigator>
+    );
+}
+
+const AccountProductFavoriteStack = createStackNavigator();
+
+function AccountProductFavoriteNavigation() {
+    return (
+        <AccountProductFavoriteStack.Navigator>
+            <AccountProductFavoriteStack.Screen
+                name="AccountProductFavorite"
+                component={AccountProductFavorite}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountProductFavoriteStack.Navigator>
+    );
+}
+
+const AccountProductSaveStack = createStackNavigator();
+
+function AccountProductSaveNavigation() {
+    return (
+        <AccountProductSaveStack.Navigator>
+            <AccountProductSaveStack.Screen
+                name="AccountProductSave"
+                component={AccountProductSave}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountProductSaveStack.Navigator>
+    );
+}
+
+const AccountCoinStack = createStackNavigator();
+
+function AccountCoinNavigation() {
+    return (
+        <AccountCoinStack.Navigator>
+            <AccountCoinStack.Screen
+                name="AccountCoin"
+                component={AccountCoin}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </AccountCoinStack.Navigator>
+    );
+}
+
+const CustomerInfoStack = createStackNavigator();
+
+function CustomerInfoNavigation() {
+    return (
+        <CustomerInfoStack.Navigator>
+            <CustomerInfoStack.Screen
+                name="CustomerInfo"
+                component={CustomerInfo}
+                options={{
+                    headerShown: false
+                }}
+            />
+        </CustomerInfoStack.Navigator>
+    );
+}
+
+
 
 const AllStack = createStackNavigator();
 function AllStackNavigation() {
@@ -381,6 +634,16 @@ function AllStackNavigation() {
                 component={CartNavigation}
                 options={{ headerShown: false }}
             />
+            <AllStack.Screen
+                name="CartStep"
+                component={CartStepNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="CartPayInstallment"
+                component={CartPayInstallmentNavigation}
+                options={{ headerShown: false }}
+            />
             <AllStack.Screen
                 name="Login"
                 component={LoginNavigation}
@@ -416,6 +679,61 @@ function AllStackNavigation() {
                 component={AccountHomeNavigation}
                 options={{ headerShown: false }}
             />
+            <AllStack.Screen
+                name="AccountIndex"
+                component={AccountIndexNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="ForgotPassword"
+                component={ForgotPasswordNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="SettingAccount"
+                component={SettingAccountNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountOrderList"
+                component={AccountOrderListNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountOrderDetail"
+                component={AccountOrderDetailNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountProductBought"
+                component={AccountProductBoughtNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountProductViewHistory"
+                component={AccountProductViewHistoryNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountProductFavorite"
+                component={AccountProductFavoriteNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountProductSave"
+                component={AccountProductSaveNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="AccountCoin"
+                component={AccountCoinNavigation}
+                options={{ headerShown: false }}
+            />
+            <AllStack.Screen
+                name="CustomerInfo"
+                component={CustomerInfoNavigation}
+                options={{ headerShown: false }}
+            />
         </AllStack.Navigator>
     );
 }

package-lock.json

@@ -21,8 +21,10 @@
         "expo-status-bar": "~1.0.3",
         "expo-web-browser": "~8.6.0",
         "react": "16.13.1",
+        "react-bootstrap-icons": "^1.4.0",
         "react-dom": "16.13.1",
         "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+        "react-native-bootstrap-icons": "^1.0.0-rc.1",
         "react-native-gesture-handler": "~1.8.0",
         "react-native-paper": "^4.7.2",
         "react-native-safe-area-context": "3.1.9",
@@ -4840,6 +4842,12 @@
       "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
       "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM="
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "peer": true
+    },
     "node_modules/bplist-creator": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.8.tgz",
@@ -5621,6 +5629,52 @@
         "isobject": "^3.0.1"
       }
     },
+    "node_modules/css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -5839,11 +5893,39 @@
         "node": ">= 8.3"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "peer": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "peer": true
+    },
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
+    "node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "peer": true
+    },
     "node_modules/domexception": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
@@ -5853,6 +5935,16 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "peer": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -5913,6 +6005,15 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/envinfo": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
@@ -10560,6 +10661,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "peer": true
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -12478,6 +12585,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -13496,6 +13612,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap-icons": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.4.0.tgz",
+      "integrity": "sha512-rxT8IxIU3Cnnj4y+rDJvlj5qITNfQP0jdw0e1gGCuyNDQDxvRvrA6QEFSLmWBgMqC/hig3CnZ+Snx2GwXbPxmQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.6 || ^17"
+      }
+    },
     "node_modules/react-devtools-core": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.10.1.tgz",
@@ -13568,6 +13695,15 @@
         "react": "16.13.1"
       }
     },
+    "node_modules/react-native-bootstrap-icons": {
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/react-native-bootstrap-icons/-/react-native-bootstrap-icons-1.0.0-rc.1.tgz",
+      "integrity": "sha512-V+LQbhzEegsrbnsMxLVDmOIyyTbK6iqDHQCypFkx3IUSR74a35n4s51Jam3cQW96PB/Y8BxP0TM1b/jPOY04Iw==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native-svg": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz",
@@ -13620,6 +13756,20 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.1.tgz",
+      "integrity": "sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==",
+      "peer": true,
+      "dependencies": {
+        "css-select": "^2.1.0",
+        "css-tree": "^1.0.0-alpha.39"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.50.0"
+      }
+    },
     "node_modules/react-native-swiper": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz",
@@ -20667,6 +20817,12 @@
       "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
       "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM="
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "peer": true
+    },
     "bplist-creator": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.8.tgz",
@@ -21298,6 +21454,42 @@
         "isobject": "^3.0.1"
       }
     },
+    "css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "peer": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "peer": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "peer": true
+        }
+      }
+    },
+    "css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+      "peer": true
+    },
     "cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -21470,11 +21662,35 @@
       "integrity": "sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==",
       "dev": true
     },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "peer": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "peer": true
+        }
+      }
+    },
     "dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "peer": true
+    },
     "domexception": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
@@ -21484,6 +21700,16 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "peer": true,
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -21540,6 +21766,12 @@
         "once": "^1.4.0"
       }
     },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "peer": true
+    },
     "envinfo": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
@@ -25132,6 +25364,12 @@
         "buffer-alloc": "^1.1.0"
       }
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "peer": true
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -26698,6 +26936,15 @@
         }
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "peer": true,
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -27463,6 +27710,14 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-bootstrap-icons": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.4.0.tgz",
+      "integrity": "sha512-rxT8IxIU3Cnnj4y+rDJvlj5qITNfQP0jdw0e1gGCuyNDQDxvRvrA6QEFSLmWBgMqC/hig3CnZ+Snx2GwXbPxmQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-devtools-core": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.10.1.tgz",
@@ -27565,6 +27820,12 @@
         }
       }
     },
+    "react-native-bootstrap-icons": {
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/react-native-bootstrap-icons/-/react-native-bootstrap-icons-1.0.0-rc.1.tgz",
+      "integrity": "sha512-V+LQbhzEegsrbnsMxLVDmOIyyTbK6iqDHQCypFkx3IUSR74a35n4s51Jam3cQW96PB/Y8BxP0TM1b/jPOY04Iw==",
+      "requires": {}
+    },
     "react-native-gesture-handler": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz",
@@ -27604,6 +27865,16 @@
       "integrity": "sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==",
       "requires": {}
     },
+    "react-native-svg": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.1.tgz",
+      "integrity": "sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==",
+      "peer": true,
+      "requires": {
+        "css-select": "^2.1.0",
+        "css-tree": "^1.0.0-alpha.39"
+      }
+    },
     "react-native-swiper": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz",

package.json

@@ -28,8 +28,10 @@
     "expo-status-bar": "~1.0.3",
     "expo-web-browser": "~8.6.0",
     "react": "16.13.1",
+    "react-bootstrap-icons": "^1.4.0",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-bootstrap-icons": "^1.0.0-rc.1",
     "react-native-gesture-handler": "~1.8.0",
     "react-native-paper": "^4.7.2",
     "react-native-safe-area-context": "3.1.9",

screens/AccountCoin.tsx

@@ -0,0 +1,177 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountCoin() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderAccountOrderList />
+
+                <NoteCoin />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerCoin}>
+            <Image style={styles.headerCoinBg} source={require('../assets/images/bg-coin.png')} />
+            <View style={styles.headerAOL}>
+                <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                    <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+                </TouchableOpacity>
+                <Text style={styles.headerAOLTitle}>Naga Xu</Text>
+            </View>
+            <View style={styles.headerCoinCtBot}>
+                <View style={styles.headerCoinCount}>
+                    <Image style={styles.headerCoinCountImg} source={require('../assets/images/coin.png')} />
+                    <Text style={styles.headerCoinCountText}>10</Text>
+                </View>
+                <Text style={styles.headerCoinText}>Bạn có <Text style={styles.textBold}>10</Text> xu trong tài khoản</Text>
+            </View>
+        </View>
+    )
+}
+
+const NoteCoin = () => {
+    return(
+        <View style={styles.noteCoin}>
+            <Text style={styles.noteCoinText}>Giới thiệu về Naga xu</Text>
+            <Text style={styles.noteCoinText}>- Naga Xu là hệ thống tích điểm dành cho Khách hàng của Nagakawa Shop.</Text>
+            <Text style={styles.noteCoinText}>- 10 Naga Xu = 1.000 đồng.</Text>
+            <Text style={styles.noteCoinText}>- Thời gian sử dụng Naga Xu là 01 năm từ khi bắt đầu đăng ký tài khoản tại website</Text>
+            <Text style={styles.noteCoinText}>- Khách hàng nhận Naga Xu khi mua hàng hoặc tương tác comment tại website Nagakawa</Text>
+        </View>
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        position: 'absolute',
+        top: 50,
+        left: 0,
+        paddingHorizontal: 10,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+        color: '#fff',
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 60,
+        textAlign: 'center',
+        fontWeight: '700',
+        color: '#fff',
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    headerCoin: {
+        width: winWidth,
+        position: 'relative',
+    },
+    headerCoinBg: {
+        width: winWidth,
+    },
+    headerCoinCtBot: {
+        width: winWidth,
+        paddingHorizontal: 10,
+        position: 'absolute',
+        bottom: 20,
+        left: 0,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    headerCoinCount: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    headerCoinCountImg: {
+        width: 105,
+        height: 105,
+        marginRight: 10,
+    },
+    headerCoinCountText: {
+        fontSize: 50,
+        fontWeight: '700',
+        marginLeft: 10,
+        color: '#fff'
+    },
+    headerCoinText: {
+        width: '100%',
+        textAlign: 'center',
+        color: '#fff'
+    },
+    textBold: {
+        fontWeight: '700',
+        color: '#fff',
+    },
+    noteCoin: {
+        width: winWidth,
+        padding: 10,
+    },
+    noteCoinText: {
+        width: '100%',
+        marginBottom: 6,
+        fontWeight: '300',
+    },
+})

screens/AccountHome.tsx

@@ -5,7 +5,7 @@ import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView,
 import Constants from 'expo-constants';
 import { Ionicons, FontAwesome } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-
+import { useNavigation } from '@react-navigation/native';
 import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View, } from '../components/Themed';
 import useColorScheme from '../hooks/useColorScheme';
@@ -17,91 +17,136 @@ export default function AccountHome() {
     return (
         <SafeAreaView style={styles.container}>
             <ScrollView>
-                <View style={styles.brecrumb}>
-                    <Text style={styles.brecrumbText}>Trang chủ</Text>
-                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
-                    <Text style={styles.brecrumbTextLast}>Tài khoản của bạn</Text>
-                </View>
+                <HeaderAccountHome />
+                
+                <ListContentAccount />
 
-                <View style={styles.accountBox}>
-                    <View style={styles.accountBoxHeader}>
-                        <View style={styles.accountBoxHeaderIcon}>
-                            <FontAwesome style={styles.accountBoxHeaderIconFont} name="user" />
-                        </View>
-                        <View style={styles.accountBoxHeaderInfo}>
-                            <Text style={styles.accountBoxHeaderInfoText}>Tài khoản</Text>
-                            <Text style={styles.accountBoxHeaderInfoName}>Hurasoft test</Text>
-                        </View>
-                    </View>
-
-                    <MenuAccount />
-
-                    <View style={styles.accountBoxContent}>
-                        <Text style={styles.accountBoxTextHome}>Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục.</Text>
-
-                        <CustommerInfo />
-
-                        <CustommerInfoChange />
-
-                        <ListOrder />
-
-                        <OrderDetail />
-
-                        <ProductSave />
-
-                        <ProductFavorite />
-
-                        <ChangePassword />
-
-
-                    </View>
-                </View>
             </ScrollView>
         </SafeAreaView>
     )
 }
 
-const MenuAccount = () => {
-    const [showMenuAccount, setShowMenuAccount] = useState(true)
+const HeaderAccountHome = () => {
+    const navigation = useNavigation();
     return (
-        <View style={styles.accountBoxSelec}>
-            <TouchableOpacity style={styles.accountBoxSelecBox} onPress={() => setShowMenuAccount(!showMenuAccount)}>
-                <Text style={styles.accountBoxSelecBoxText}>Xem thông tin</Text>
-                <FontAwesome style={styles.accountBoxSelecBoxIcon} name="angle-down" />
-            </TouchableOpacity>
-            <View style={showMenuAccount ? styles.accountBoxSelecList : [styles.accountBoxSelecList, styles.active]}>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="user" />
-                    <Text style={styles.accountNameTabText}>Thông tin tài khoản</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="list" />
-                    <Text style={styles.accountNameTabText}>Quản lý đơn hàng</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="eye" />
-                    <Text style={styles.accountNameTabText}>Sản phẩm đã xem</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="archive" />
-                    <Text style={styles.accountNameTabText}>Sản phẩm đã lưu</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="comment" />
-                    <Text style={styles.accountNameTabText}>Sản phẩm bạn đã đánh giá</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="heart" />
-                    <Text style={styles.accountNameTabText}>Sản phẩm bạn đã thích</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="lock" />
-                    <Text style={styles.accountNameTabText}>Thay đổi mật khẩu</Text>
-                </Pressable>
-                <Pressable style={styles.accountNameTab}>
-                    <FontAwesome style={styles.accountNameTabIcon} name="power-off" />
-                    <Text style={styles.accountNameTabText}>Logout</Text>
-                </Pressable>
+        <View style={styles.headerAccountHome}>
+            <Image style={styles.headerAccountHomeImg} source={require('../assets/images/bg-account.png')} />
+            <View style={styles.headerAccountHomeCt}>
+                <View style={styles.headerAccountHomeCtLeft}>
+                    <Image style={styles.headerAccountHomeCtCusImg} source={require('../assets/images/cus-img-account.png')} />
+                    <View style={styles.headerAccountHomeCtCusInfo}>
+                        <Text style={styles.headerAccountHomeCtCusName}>Nguyễn Quỳnh</Text>
+                        <Text style={styles.headerAccountHomeCtCusXu}>Xu 10</Text>
+                    </View>
+                </View>
+                <View style={styles.headerAccountHomeCtRight}>
+                    <TouchableOpacity onPress={() => navigation.navigate('SettingAccount')} style={styles.headerAccountHomeCtSetting}>
+                        <Ionicons style={styles.headerAccountHomeCtSettingIcon} name="settings-outline" />
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const ListContentAccount = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxListItemAcc}>
+            <View style={styles.boxListItemAccList}>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity onPress={() => navigation.navigate('AccountOrderList')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon1.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Đơn hàng của tôi</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Text style={styles.boxListItemAccItemRightText}>Xem tất cả</Text>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxListItemAccItem}>
+                    <TouchableOpacity onPress={() => navigation.navigate('AccountProductBought')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon2.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm bạn đã mua</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={styles.boxListItemAccList}>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity onPress={() => navigation.navigate('AccountProductViewHistory')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon3.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm bạn đã xem</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity onPress={() => navigation.navigate('AccountProductFavorite')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon4.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm yêu thích</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity onPress={() => navigation.navigate('AccountProductSave')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon5.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm mua sau</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxListItemAccItem}>
+                    <TouchableOpacity onPress={() => navigation.navigate('AccountCoin')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon6.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Quản lý Xu của tôi</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={styles.boxListItemAccList}>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity onPress={() => navigation.navigate('CustomerInfo')} style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon7.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Tài khoản</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxListItemAccItem}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon8.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Trung tậm trợ giúp</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
             </View>
         </View>
     )
@@ -214,109 +259,6 @@ function formatCurrency(price: string | number) {
     return priceConvert.substring(0, len - 3);
 }
 
-const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => {
-
-    const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props;
-    const discount = Math.ceil(100 - (price / marketPrice * 100));
-
-
-    return (
-        <View style={[styles.itemProduct, privateStyle]}>
-            <TouchableOpacity style={styles.pProductDelete}>
-                <FontAwesome style={styles.pProductDeleteIcon} name="times" />
-            </TouchableOpacity>
-            <View style={styles.pBloxImgProduct}>
-                <Text style={styles.pSkuProduct}>{productSKU}</Text>
-                <Text style={styles.pDiscountProduct}>-{discount}%</Text>
-                <View style={styles.pBloxImgProductBao}>
-                    <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
-                </View>
-            </View>
-            <Text style={styles.pNameProduct} numberOfLines={2}>
-                {productName}
-            </Text>
-            <Text style={styles.pSummaryProduct}>{summary}</Text>
-            <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
-            <Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
-        </View>
-    );
-}
-
-const productData = [
-    {
-        id: 1,
-        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
-        productSKU: 'TESTSKU',
-        productImage: {
-            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-        },
-        price: 30000000,
-        marketPrice: 50000000,
-        quantity: 1,
-        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
-    },
-    {
-        id: 2,
-        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
-        productSKU: 'TESTSKU',
-        productImage: {
-            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
-        },
-        price: 25000000,
-        marketPrice: 50000000,
-        quantity: 0,
-        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
-    },
-]
-
-const ProductSave = () => {
-    const itemProductStyle = {
-        width: '100%',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e8e8e8',
-        position: 'relative',
-    }
-    return (
-        <View style={styles.boxProductSave}>
-            <Text style={styles.boxProductSaveTitle}>Sản phẩm mua sau</Text>
-            <View style={styles.listProductSave}>
-                {
-                    productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
-                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
-                    />)
-                }
-            </View>
-        </View>
-    )
-}
-
-const ProductFavorite = () => {
-    const itemProductStyle = {
-        width: '100%',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e8e8e8',
-        position: 'relative',
-    }
-    return (
-        <View style={styles.boxProductSave}>
-            <Text style={styles.boxProductSaveTitle}>Sản phẩm Bạn đã thích</Text>
-            <View style={styles.listProductSave}>
-                {
-                    productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
-                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
-                    />)
-                }
-            </View>
-        </View>
-    )
-}
-
 const ChangePassword = () => {
     return (
         <View>
@@ -350,154 +292,6 @@ const ChangePassword = () => {
     )
 }
 
-const ListOrder = () => {
-    return (
-        <View style={styles.ListOrder}>
-            <Text style={styles.titleBoxInAccount}>Danh Sách đơn hàng</Text>
-            <View style={styles.ListOrderList}>
-                <View style={styles.ListOrderListHeader}>
-                    <Text style={styles.ListOrderListHeaderSt}>Số đơn hàng</Text>
-                    <Text style={styles.ListOrderListHeaderNd}>Giá trị</Text>
-                    <Text style={styles.ListOrderListHeaderRd}>Thời gian</Text>
-                    <Text style={styles.ListOrderListHeaderInfo}>Thông tin</Text>
-                </View>
-                <View style={styles.ListOrderItem}>
-                    <View style={styles.ListOrderItemSt}>
-                        <Text style={styles.ListOrderItemStText}>#123456</Text>
-                        <TouchableOpacity style={styles.ListOrderItemStButton}>
-                            <Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
-                        </TouchableOpacity>
-                    </View>
-                    <Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
-                    <Text style={styles.ListOrderItemRd}>13-03-2021</Text>
-                    <Text style={styles.ListOrderItemInfo}>Đã hoàn thành</Text>
-                </View>
-                <View style={[styles.ListOrderItem, styles.ListOrderItemLast]}>
-                    <View style={styles.ListOrderItemSt}>
-                        <Text style={styles.ListOrderItemStText}>#123457</Text>
-                        <TouchableOpacity style={styles.ListOrderItemStButton}>
-                            <Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
-                        </TouchableOpacity>
-                    </View>
-                    <Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
-                    <Text style={styles.ListOrderItemRd}>13-03-2021</Text>
-                    <Text style={styles.ListOrderItemInfo}>Hủy bỏ</Text>
-                </View>
-            </View>
-        </View>
-    )
-}
-
-const OrderDetail = () => {
-    return (
-        <View style={styles.boxOrderDetail}>
-            <Text style={styles.boxOrderDetailNum}>Đơn hàng số #123456</Text>
-            <Text style={styles.boxOrderDetailTime}><Text style={styles.bold}>Thời gian đặt mua: </Text>13-3-2021, 5:00 pm</Text>
-            <View style={styles.boxOrderDetailInfo}>
-                <Text style={styles.boxOrderDetailInfoTitle}>Thông tin người mua</Text>
-                <View style={styles.boxOrderDetailInfoItem}>
-                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Họ và tên:</Text>
-                    <Text style={styles.boxOrderDetailInfoItemTextNd}>Hurasoft Test</Text>
-                </View>
-                <View style={styles.boxOrderDetailInfoItem}>
-                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Email:</Text>
-                    <Text style={styles.boxOrderDetailInfoItemTextNd}>test@mail.com</Text>
-                </View>
-                <View style={styles.boxOrderDetailInfoItem}>
-                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Số điện thoại:</Text>
-                    <Text style={styles.boxOrderDetailInfoItemTextNd}>0912345678</Text>
-                </View>
-                <View style={styles.boxOrderDetailInfoItem}>
-                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Địa chỉ:</Text>
-                    <Text style={styles.boxOrderDetailInfoItemTextNd}>30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
-                </View>
-            </View>
-            <View style={styles.boxOrderDetailList}>
-                <View style={styles.boxOrderDetailListItem}>
-                    <View style={styles.boxOrderDetailListItemLine}>
-                        <View style={styles.boxOrderDetailListItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>STT</Text>
-                        </View>
-                        <View style={styles.boxOrderDetailListItemRight}>
-                            <Text style={styles.boxOrderDetailListItemText}>1</Text>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLine}>
-                        <View style={styles.boxOrderDetailListItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Ảnh</Text>
-                        </View>
-                        <View style={styles.boxOrderDetailListItemRight}>
-                            <View style={styles.boxOrderDetailListItemImage}>
-                                <Image style={styles.boxOrderDetailListItemImageCt} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_55620_ban_game_k_deck_khung_kim_loai_mat_go_tu_nhien_phu_pu_bong.jpg' }} />
-                            </View>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLine}>
-                        <View style={styles.boxOrderDetailListItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Tên Sản phẩm</Text>
-                        </View>
-                        <View style={styles.boxOrderDetailListItemRight}>
-                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>
-                                Bàn Game K-Deck  ( Khung Kim Loại , Mặt Gỗ Tự Nhiên Phủ PU Bóng )
-                            </Text>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLine}>
-                        <View style={styles.boxOrderDetailListItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Giá bán</Text>
-                        </View>
-                        <View style={styles.boxOrderDetailListItemRight}>
-                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLine}>
-                        <View style={styles.boxOrderDetailListItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Số lượng</Text>
-                        </View>
-                        <View style={styles.boxOrderDetailListItemRight}>
-                            <Text style={styles.boxOrderDetailListItemText}>1</Text>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLine}>
-                        <View style={styles.boxOrderDetailListItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Tổng</Text>
-                        </View>
-                        <View style={styles.boxOrderDetailListItemRight}>
-                            <Text style={styles.boxOrderDetailListItemText}>30.000.000 đ</Text>
-                        </View>
-                    </View>
-                </View>
-                <View style={styles.boxOrderDetailTotal}>
-                    <View style={styles.boxOrderDetailListItemLineTotal}>
-                        <View style={styles.boxOrderTotalItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Giá trị</Text>
-                        </View>
-                        <View style={styles.boxOrderTotalItemRight}>
-                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLineTotal}>
-                        <View style={styles.boxOrderTotalItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Phí vận chuyển</Text>
-                        </View>
-                        <View style={styles.boxOrderTotalItemRight}>
-                            <Text style={[styles.boxOrderDetailListItemText]}>30.000 đ</Text>
-                        </View>
-                    </View>
-                    <View style={styles.boxOrderDetailListItemLineTotal}>
-                        <View style={styles.boxOrderTotalItemLeft}>
-                            <Text style={styles.boxOrderDetailListItemText}>Tổng giá trị đơn hàng</Text>
-                        </View>
-                        <View style={styles.boxOrderTotalItemRight}>
-                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.030.000 đ</Text>
-                        </View>
-                    </View>
-                </View>
-            </View>
-        </View>
-    )
-}
-
 const winWidth = Dimensions.get('window').width; //full width
 const winHeight = Dimensions.get('window').height; //full height
 const winWidthP10 = winWidth - 20;
@@ -511,30 +305,110 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         backgroundColor: '#fff',
     },
-    brecrumb: {
-        display: 'flex',
+    headerAccountHome: {
         width: winWidth,
-        paddingLeft: 10,
-        paddingRight: 10,
+        position: 'relative',
+    },
+    headerAccountHomeImg: {
+        width: '100%',
+        height: 122,
+    },
+    headerAccountHomeCt: {
+        width: '100%',
+        position: 'absolute',
+        left: 0,
+        bottom: 18,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        backgroundColor: 'rgba(0,0,0,0)',
+        paddingHorizontal: 10,
+    },
+    headerAccountHomeCtLeft: {
         flexDirection: 'row',
-        height: 18,
         alignItems: 'center',
-        marginTop: 10,
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    headerAccountHomeCtCusImg: {
+        width: 56,
+        height: 56,
+        marginRight: 10,
+        borderRadius: 28,
+        overflow: 'hidden'
+    },
+    headerAccountHomeCtCusInfo: {
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    headerAccountHomeCtCusName: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#fff',
+        marginBottom: 5,
+    },
+    headerAccountHomeCtCusXu: {
+        fontSize: 13,
+        fontWeight: '300',
+        color: '#fff'
+    },
+    headerAccountHomeCtRight: {
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    headerAccountHomeCtSetting: {
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        backgroundColor: '#fff',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerAccountHomeCtSettingIcon: {
+        fontSize: 18,
+    },
+    boxListItemAcc: {
+        width: winWidth,
+        backgroundColor: '#f2f2f2',
+    },
+    boxListItemAccList: {
+        width: '100%',
+        backgroundColor: '#fff',
         marginBottom: 10,
     },
-    brecrumbText: {
-        fontSize: 13,
-        color: '#222',
+    borderBot: {
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
     },
-    brecrumbTextLast: {
-        fontSize: 13,
-        color: '#b7b7b7',
+    boxListItemAccItem: {
+        width: '100%',
+        paddingHorizontal: 10,
     },
-    brecrumbIcon: {
-        fontSize: 13,
-        color: '#222',
-        marginLeft: 6,
-        marginRight: 6
+    boxListItemAccBt: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 48,
+    },
+    boxListItemAccItemLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxListItemAccItemImg: {
+        width: 20,
+        marginRight: 10,
+    },
+    boxListItemAccItemLeftText: {
+        fontWeight: '500',
+    },
+    boxListItemAccItemRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxListItemAccItemRightText: {
+        marginRight: 10,
+    },
+    boxListItemAccItemIcon: {
+        fontSize: 24,
+        color: '#777'
     },
     accountBox: {
         marginBottom: 20,
@@ -574,47 +448,6 @@ const styles = StyleSheet.create({
         textTransform: 'uppercase',
         fontWeight: 'bold'
     },
-    accountBoxSelec: {
-        marginBottom: 20,
-    },
-    accountBoxSelecBox: {
-        borderRadius: 3,
-        borderWidth: 1,
-        borderColor: '#999',
-        paddingHorizontal: 10,
-        height: 40,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    accountBoxSelecBoxText: {
-        textTransform: 'uppercase',
-        fontWeight: 'bold',
-    },
-    accountBoxSelecBoxIcon: {},
-    accountBoxSelecList: {
-        width: '100%',
-        borderRadius: 3,
-        borderWidth: 1,
-        borderColor: '#999',
-        display: 'none',
-    },
-    active: {
-        display: 'flex',
-    },
-    accountNameTab: {
-        padding: 10,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    accountNameTabIcon: {
-        fontSize: 24,
-        color: '#7b7b7b',
-        marginRight: 8,
-    },
-    accountNameTabText: {},
-    accountBoxContent: {},
-    accountBoxTextHome: {},
     custommerInfo: {
     },
     custommerInfoItemHeader: {
@@ -700,287 +533,4 @@ const styles = StyleSheet.create({
     boxCustommerInfoChangeSubmitText: {
         color: '#fff'
     },
-    boxProductSave: {},
-    boxProductSaveTitle: {
-        fontSize: 16,
-        fontWeight: 'bold',
-        marginBottom: 15,
-    },
-    listProductSave: {},
-    ListOrder: {},
-    ListOrderList: {
-        width: '100%',
-        borderColor: '#e1e1e1',
-        borderWidth: 1,
-        borderRadius: 5,
-        padding: 5
-    },
-    ListOrderListHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderBottomColor: '#e1e1e1',
-        borderBottomWidth: 1,
-        height: 40,
-    },
-    ListOrderListHeaderSt: {
-        fontWeight: 'bold',
-        width: winWidthP10 - 260,
-        fontSize: 12,
-    },
-    ListOrderListHeaderNd: {
-        fontWeight: 'bold',
-        width: 90,
-        fontSize: 12,
-    },
-    ListOrderListHeaderRd: {
-        fontWeight: 'bold',
-        width: 75,
-        fontSize: 12,
-    },
-    ListOrderListHeaderInfo: {
-        fontWeight: 'bold',
-        width: 90,
-        fontSize: 12,
-    },
-    ListOrderItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderBottomColor: '#e1e1e1',
-        borderBottomWidth: 1,
-        paddingVertical: 10,
-    },
-    ListOrderItemLast: {
-        borderBottomWidth: 0,
-    },
-    ListOrderItemSt: {
-        width: winWidthP10 - 260,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-    },
-    ListOrderItemStText: {
-        fontSize: 12,
-        marginRight: 6,
-    },
-    ListOrderItemStButton: {},
-    ListOrderItemStButtonText: {
-        fontSize: 12,
-        color: '#f78d1c'
-    },
-    ListOrderItemNd: {
-        width: 90,
-        fontSize: 12,
-    },
-    ListOrderItemRd: {
-        width: 75,
-        fontSize: 12,
-    },
-    ListOrderItemInfo: {
-        width: 90,
-        fontSize: 12,
-    },
-    boxOrderDetail: {},
-    boxOrderDetailNum: {
-        width: '100%',
-        marginBottom: 15,
-        fontSize: 21,
-        fontWeight: 'bold',
-        textAlign: 'center'
-    },
-    boxOrderDetailTime: {
-        marginBottom: 15,
-    },
-    boxOrderDetailInfo: {
-        borderWidth: 1,
-        borderRadius: 5,
-        borderColor: '#e1e1e1',
-        marginBottom: 20,
-        padding: 8,
-    },
-    boxOrderDetailInfoTitle: {
-        fontWeight: 'bold',
-        color: '#f60',
-        marginBottom: 10,
-    },
-    boxOrderDetailInfoItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 10,
-    },
-    boxOrderDetailInfoItemTextSt: {
-        width: 100,
-    },
-    boxOrderDetailInfoItemTextNd: {
-        width: winWidthP10 - 120,
-    },
-    boxOrderDetailList: {
-        borderWidth: 1,
-        borderRadius: 5,
-        borderColor: '#e1e1e1',
-        width: '100%',
-        flexDirection: 'column',
-    },
-    bold: {
-        fontWeight: 'bold',
-    },
-    boxOrderDetailListItem: {
-        width: '100%',
-        flexDirection: 'column',
-    },
-    boxOrderDetailListItemLine: {
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e1e1e1',
-        width: '100%',
-    },
-    boxOrderDetailListItemLineTotal: {
-        width: '100%',
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e1e1e1',
-        alignItems: 'center',
-    },
-    boxOrderDetailListItemLeft: {
-        width: 100,
-        padding: 10,
-    },
-    boxOrderDetailListItemText: {},
-    boxOrderDetailListItemRight: {
-        width: winWidthP10 - 120,
-        borderLeftColor: '#e1e1e1',
-        borderLeftWidth: 1,
-        padding: 10,
-    },
-    boxOrderDetailListItemImage: {
-        width: 75,
-        height: 75,
-        position: 'relative',
-    },
-    boxOrderDetailListItemImageCt: {
-        width: '100%',
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-    },
-    boxOrderTotalItemLeft: {
-        width: '50%',
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        padding: 10,
-    },
-    boxOrderTotalItemRight: {
-        width: '50%',
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        borderLeftColor: '#e1e1e1',
-        borderLeftWidth: 1,
-        padding: 10,
-    },
-    boxOrderDetailTotal: {
-        width: '100%',
-        flexDirection: 'column',
-    },
-    itemProduct: {
-        padding: 10,
-    },
-    pBloxImgProduct: {
-        position: 'relative',
-        marginBottom: 10,
-    },
-    pSkuProduct: {
-        position: 'absolute',
-        fontSize: 12,
-        color: '#e00',
-        top: 0,
-        left: 0,
-        lineHeight: 36,
-        zIndex: 10,
-    },
-    pDiscountProduct: {
-        width: 36,
-        height: 36,
-        backgroundColor: '#e00',
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        color: '#fff',
-        textAlign: 'center',
-        lineHeight: 36,
-        borderRadius: 18,
-        overflow: 'hidden',
-        fontSize: 12,
-        zIndex: 10,
-    },
-    pBloxImgProductBao: {
-        position: 'relative',
-        paddingTop: '100%',
-        overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-    },
-    pImgProduct: {
-        position: 'absolute',
-        top: 0,
-        left: '5%',
-        right: 0,
-        bottom: 0,
-        maxHeight: 500,
-        width: '90%',
-    },
-    pNameProduct: {
-        height: 40,
-        lineHeight: 20,
-        overflow: 'hidden',
-        fontSize: 14,
-        color: '#111',
-        marginBottom: 5,
-    },
-    priceProduct: {
-        fontSize: 16,
-        fontWeight: 'bold',
-        color: '#f10000',
-        marginBottom: 5,
-    },
-    oldPriceProduct: {
-        fontSize: 14,
-        color: '#b7b7b7',
-        marginBottom: 5,
-        height: 24,
-        lineHeight: 24,
-        overflow: 'hidden',
-        textDecorationLine: 'line-through',
-    },
-    pBottonProduct: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        flexDirection: 'row',
-        marginTop: 5,
-    },
-    pStatusProduct: {
-        fontSize: 13,
-        color: '#00a706',
-    },
-    pCartProduct: {
-        fontSize: 13,
-        color: '#333',
-    },
-    pStatusProductIcon: {
-        fontSize: 15,
-    },
-    pCartProductIcon: {
-        fontSize: 15
-    },
-    pProductDelete: {},
-    pProductDeleteIcon: {
-        fontSize: 18,
-    },
-    pSummaryProduct: {
-        marginBottom: 10,
-        lineHeight: 20,
-    },
 })

screens/AccountIndex.tsx

@@ -0,0 +1,259 @@
+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 AccountIndex() {
+    const navigation = useNavigation();
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderAccountIndex />
+
+                <ListContentAccount />
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const HeaderAccountIndex = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAccountIndex}>
+            <Image style={styles.headerAccountIndexImg} source={require('../assets/images/bg-account.png')} />
+            <Text style={styles.headerAccountIndexTitle}>Chào mừng đến với Nagakawa, Đăng nhập ngay!</Text>
+            <View style={styles.headerAccountIndexBt}>
+                <TouchableOpacity onPress={() => navigation.navigate('Login')} style={styles.headerAccountIndexLogin}>
+                    <Text style={styles.headerAccountIndexLoginText}>Đăng nhập</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => navigation.navigate('Register')} style={styles.headerAccountIndexRegis}>
+                    <Text style={styles.headerAccountIndexRegisText}>Đăng ký</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const ListContentAccount = () => {
+    return (
+        <View style={styles.boxListItemAcc}>
+            <View style={styles.boxListItemAccList}>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon1.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Đơn hàng của tôi</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Text style={styles.boxListItemAccItemRightText}>Xem tất cả</Text>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxListItemAccItem}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon2.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm bạn đã mua</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={styles.boxListItemAccList}>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon3.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm bạn đã xem</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Text style={styles.boxListItemAccItemRightText}>Xem tất cả</Text>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon4.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm yêu thích</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon5.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Sản phẩm mua sau</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxListItemAccItem}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon6.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Quản lý Xu của tôi</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={styles.boxListItemAccList}>
+                <View style={[styles.boxListItemAccItem, styles.borderBot]}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon7.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Tài khoản</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxListItemAccItem}>
+                    <TouchableOpacity style={styles.boxListItemAccBt}>
+                        <View style={styles.boxListItemAccItemLeft}>
+                            <Image style={styles.boxListItemAccItemImg} source={require('../assets/images/acc-icon8.png')} />
+                            <Text style={styles.boxListItemAccItemLeftText}>Trung tậm trợ giúp</Text>
+                        </View>
+                        <View style={styles.boxListItemAccItemRight}>
+                            <Ionicons style={styles.boxListItemAccItemIcon} name="chevron-forward-outline" />
+                        </View>
+                    </TouchableOpacity>
+                </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',
+    },
+    headerAccountIndex: {
+        width: winWidth,
+        position: 'relative',
+    },
+    headerAccountIndexImg: {
+        width: '100%',
+        height: 122,
+    },
+    headerAccountIndexTitle: {
+        width: '100%',
+        textAlign: 'center',
+        fontSize: 12,
+        color: '#fff',
+        position: 'absolute',
+        top: 45,
+        left: 0,
+    },
+    headerAccountIndexBt: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        left: 0,
+        bottom: 16,
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    headerAccountIndexLogin: {
+        width: 84,
+        height: 32,
+        backgroundColor: '#fff',
+        borderColor: '#fff',
+        borderWidth: 1,
+        borderRadius: 3,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 5,
+    },
+    headerAccountIndexLoginText: {
+        fontWeight: '700',
+        color: '#D8262F'
+    },
+    headerAccountIndexRegis: {
+        width: 84,
+        height: 32,
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderColor: '#fff',
+        borderWidth: 1,
+        borderRadius: 3,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 5,
+    },
+    headerAccountIndexRegisText: {
+        fontWeight: '700',
+        color: '#fff'
+    },
+    boxListItemAcc: {
+        width: winWidth,
+        backgroundColor: '#f2f2f2',
+    },
+    boxListItemAccList: {
+        width: '100%',
+        backgroundColor: '#fff',
+        marginBottom: 10,
+    },
+    borderBot: {
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
+    },
+    boxListItemAccItem: {
+        width: '100%',
+        paddingHorizontal: 10,
+    },
+    boxListItemAccBt: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 48,
+    },
+    boxListItemAccItemLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxListItemAccItemImg: {
+        width: 20,
+        marginRight: 10,
+    },
+    boxListItemAccItemLeftText: {
+        fontWeight: '500',
+    },
+    boxListItemAccItemRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxListItemAccItemRightText: {
+        marginRight: 10,
+    },
+    boxListItemAccItemIcon: {
+        fontSize: 24,
+        color: '#777'
+    },
+});

screens/AccountOrderDetail.tsx

@@ -0,0 +1,316 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountOrderDetail() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <View>
+                <ScrollView>
+                    <HeaderAccountOrderList />
+
+                    <AccountOrderDetailContent />
+                </ScrollView>
+                <AccountOrderDetailBottom />
+            </View>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Đơn hàng 88899999</Text>
+            <TouchableOpacity style={styles.headerAOLChat}>
+                <Ionicons style={styles.headerAOLChatIcon} name="chatbubble-ellipses-outline" />
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+const AccountOrderDetailContent = () => {
+    return (
+        <View style={styles.boxAccOrDt}>
+            <View style={styles.boxAccOrDtCtTop}>
+                <Text style={styles.boxAccOrDtCtTopTextLeft}>Thời gian đặt mua: </Text>
+                <Text style={styles.boxAccOrDtCtTopTextRight}>06-05-2021, 4:01 pm</Text>
+            </View>
+            <View style={styles.boxAccOrDtCtTop}>
+                <Text style={styles.boxAccOrDtCtTopTextLeft}>Tình trạng: </Text>
+                <Text style={[styles.boxAccOrDtCtTopTextRight, styles.OrangeColor]}>Giao hàng thành công</Text>
+            </View>
+            <View style={styles.boxAccOrDtCus}>
+                <View style={styles.boxAccOrDtTitle}>
+                    <Text style={styles.boxAccOrDtTitleNum}>1</Text>
+                    <Text style={styles.boxAccOrDtTitleText}>Thông tin khách hàng</Text>
+                </View>
+                <View style={styles.boxAccOrDtCusInfo}>
+                    <View style={styles.boxAccOrDtCusInfoItem}>
+                        <Text style={styles.boxAccOrDtCusInfoItemLeft}>Họ tên:</Text>
+                        <Text style={styles.boxAccOrDtCusInfoItemRight}>Nguyễn Quỳnh</Text>
+                    </View>
+                    <View style={styles.boxAccOrDtCusInfoItem}>
+                        <Text style={styles.boxAccOrDtCusInfoItemLeft}>Email:</Text>
+                        <Text style={styles.boxAccOrDtCusInfoItemRight}>Quynhqt@gmail.com</Text>
+                    </View>
+                    <View style={styles.boxAccOrDtCusInfoItem}>
+                        <Text style={styles.boxAccOrDtCusInfoItemLeft}>Số điện thoại:</Text>
+                        <Text style={styles.boxAccOrDtCusInfoItemRight}>0932108199</Text>
+                    </View>
+                    <View style={styles.boxAccOrDtCusInfoItem}>
+                        <Text style={styles.boxAccOrDtCusInfoItemLeft}>Địa chỉ:</Text>
+                        <Text style={styles.boxAccOrDtCusInfoItemRight}>100 Láng Hạ</Text>
+                    </View>
+                </View>
+            </View>
+            <View>
+                <View style={styles.boxAccOrDtTitle}>
+                    <Text style={styles.boxAccOrDtTitleNum}>1</Text>
+                    <Text style={styles.boxAccOrDtTitleText}>Thông tin đơn hàng</Text>
+                </View>
+                <View style={styles.boxAccOrDtList}>
+                    <View style={styles.boxAccOrDtListItem}>
+                        <Image style={styles.boxAccOrDtListItemImg} source={require('../assets/images/product.png')} />
+                        <View style={styles.boxAccOrDtListItemInfo}>
+                            <Text style={styles.boxAccOrDtListItemName}>ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM()</Text>
+                            <Text style={styles.boxAccOrDtListItemPrice}>15.000.000đ</Text>
+                            <Text style={styles.boxAccOrDtListItemQuan}>Số lượng: 1</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const AccountOrderDetailBottom = () => {
+    return (
+        <View style={styles.accDtBt}>
+            <View style={styles.accDtBtItem}>
+                <Text style={styles.accDtBtItemTextLeft}>Giá trị</Text>
+                <Text style={styles.accDtBtItemTextRight}>10.500.000đ</Text>
+            </View>
+            <View style={styles.accDtBtItem}>
+                <Text style={styles.accDtBtItemTextLeft}>Phí vận chuyển</Text>
+                <Text style={styles.accDtBtItemTextRight}>0đ</Text>
+            </View>
+            <View style={styles.accDtBtItem}>
+                <Text style={styles.accDtBtItemTextLeft}>Tổng giá trị đơn hàng</Text>
+                <Text style={styles.accDtBtItemTextRight}>10.500.000đ</Text>
+            </View>
+            <TouchableOpacity style={styles.accDtBtButton}>
+                <Text style={styles.accDtBtButtonText}>Đặt lại</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 100,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    boxAccOrDt: {
+        width: winWidth,
+        padding: 10,
+    },
+    boxAccOrDtCtTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        marginBottom: 10,
+    },
+    boxAccOrDtCtTopTextLeft: {
+        fontWeight: '700',
+    },
+    boxAccOrDtCtTopTextRight: {},
+    boxAccOrDtCus: {
+        marginBottom: 10,
+        marginTop: 10,
+    },
+    boxAccOrDtTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingBottom: 5,
+        marginBottom: 10,
+        borderBottomColor: '#ababab',
+        borderBottomWidth: 1,
+    },
+    boxAccOrDtTitleNum: {
+        width: 20,
+        height: 20,
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#008445',
+        textAlign: 'center',
+        lineHeight: 20,
+        borderColor: '#008445',
+        borderWidth: 1,
+        marginRight: 5,
+        borderRadius: 10,
+    },
+    boxAccOrDtTitleText: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#008445',
+        textTransform: 'uppercase',
+    },
+    boxAccOrDtCusInfo: {},
+    boxAccOrDtCusInfoItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    boxAccOrDtCusInfoItemLeft: {
+        width: 100,
+        fontWeight: '300',
+    },
+    boxAccOrDtCusInfoItemRight: {
+        width: winWidth - 120,
+        fontWeight: '300',
+    },
+    boxAccOrDtList: {},
+    boxAccOrDtListItem: {
+        width: '100%',
+        marginBottom: 10,
+        flexDirection: 'row',
+    },
+    boxAccOrDtListItemImg: {
+        width: 48,
+        height: 48,
+        marginRight: 10,
+    },
+    boxAccOrDtListItemInfo: {
+        width: winWidth - 78,
+    },
+    boxAccOrDtListItemName: {
+        fontWeight: '700',
+        fontSize: 16,
+        marginBottom: 10,
+    },
+    boxAccOrDtListItemPrice: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#D8262F',
+        marginBottom: 10,
+    },
+    boxAccOrDtListItemQuan: {},
+    accDtBt: {
+        width: winWidth,
+        padding: 10,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 0.20,
+        shadowRadius: 1.41,
+        elevation: 2,
+    },
+    accDtBtItem: {
+        marginBottom: 5,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    accDtBtItemTextLeft: {
+        fontSize: 12,
+        marginRight: 10,
+    },
+    accDtBtItemTextRight: {
+        fontWeight: '700',
+        width: 150,
+    },
+    accDtBtButton: {
+        width: '100%',
+        height: 40,
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    accDtBtButtonText: {
+        textTransform: 'uppercase',
+        fontWeight: '700',
+        color: '#fff'
+    },
+})

screens/AccountOrderList.tsx

@@ -0,0 +1,255 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountOrderList() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderAccountOrderList />
+
+                <ListOrder />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.headerAOLSearch}>
+                <Ionicons style={styles.headerAOLSearchIcon} name="search-outline" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Đơn hàng của tôi</Text>
+            <TouchableOpacity style={styles.headerAOLChat}>
+                <Ionicons style={styles.headerAOLChatIcon} name="chatbubble-ellipses-outline" />
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+const ListOrder = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.ListOrder}>
+            <View style={styles.ListOrderItem}>
+                <View style={styles.ListOrderItemLeft}>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Mã đơn hàng</Text>
+                        <Text style={[styles.ListOrderItemLineTextRight, styles.GreenColor]}>09888888</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Ngày mua</Text>
+                        <Text style={styles.ListOrderItemLineTextRight}>15/5/2021</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Tổng tiền</Text>
+                        <Text style={styles.ListOrderItemLineTextRight}>5.000.000đ</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Trạng thái</Text>
+                        <Text style={[styles.ListOrderItemLineTextRight, styles.OrangeColor]}>Giao hàng thành công</Text>
+                    </View>
+                    <TouchableOpacity style={styles.ListOrderItemBt}>
+                        <Text style={styles.ListOrderItemBtText}>Đặt lại</Text>
+                    </TouchableOpacity>
+                </View>
+                <TouchableOpacity onPress={() => navigation.navigate('AccountOrderDetail')} style={styles.ListOrderItemBtDetail}>
+                    <FontAwesome style={styles.ListOrderItemBtDetailIcon} name="angle-right" />
+                </TouchableOpacity>
+            </View>
+            <View style={styles.ListOrderItem}>
+                <View style={styles.ListOrderItemLeft}>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Mã đơn hàng</Text>
+                        <Text style={[styles.ListOrderItemLineTextRight, styles.GreenColor]}>09888888</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Ngày mua</Text>
+                        <Text style={styles.ListOrderItemLineTextRight}>15/5/2021</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Tổng tiền</Text>
+                        <Text style={styles.ListOrderItemLineTextRight}>5.000.000đ</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Trạng thái</Text>
+                        <Text style={[styles.ListOrderItemLineTextRight, styles.OrangeColor]}>Giao hàng thành công</Text>
+                    </View>
+                    <TouchableOpacity style={styles.ListOrderItemBt}>
+                        <Text style={styles.ListOrderItemBtText}>Đặt lại</Text>
+                    </TouchableOpacity>
+                </View>
+                <TouchableOpacity onPress={() => navigation.navigate('AccountOrderDetail')} style={styles.ListOrderItemBtDetail}>
+                    <FontAwesome style={styles.ListOrderItemBtDetailIcon} name="angle-right" />
+                </TouchableOpacity>
+            </View>
+            <View style={styles.ListOrderItem}>
+                <View style={styles.ListOrderItemLeft}>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Mã đơn hàng</Text>
+                        <Text style={[styles.ListOrderItemLineTextRight, styles.GreenColor]}>09888888</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Ngày mua</Text>
+                        <Text style={styles.ListOrderItemLineTextRight}>15/5/2021</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Tổng tiền</Text>
+                        <Text style={styles.ListOrderItemLineTextRight}>5.000.000đ</Text>
+                    </View>
+                    <View style={styles.ListOrderItemLine}>
+                        <Text style={styles.ListOrderItemTextLeft}>Trạng thái</Text>
+                        <Text style={[styles.ListOrderItemLineTextRight, styles.RedColor]}>Đã hủy</Text>
+                    </View>
+                    <TouchableOpacity style={styles.ListOrderItemBt}>
+                        <Text style={styles.ListOrderItemBtText}>Đặt lại</Text>
+                    </TouchableOpacity>
+                </View>
+                <TouchableOpacity onPress={() => navigation.navigate('AccountOrderDetail')} style={styles.ListOrderItemBtDetail}>
+                    <FontAwesome style={styles.ListOrderItemBtDetailIcon} name="angle-right" />
+                </TouchableOpacity>
+            </View>
+
+        </View>
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 140,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    ListOrder: {
+        width: winWidth,
+        backgroundColor: '#f2f2f2',
+    },
+    ListOrderItem: {
+        width: winWidth,
+        padding: 10,
+        marginTop: 10,
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    ListOrderItemLine: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    ListOrderItemTextLeft: {
+        width: 100,
+        fontSize: 14,
+        fontWeight: '300',
+        color: '#777777',
+    },
+    ListOrderItemLineTextRight: {
+        width: winWidth - 170,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    ListOrderItemBt: {
+        width: 104,
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderColor: '#D8262F',
+        borderWidth: 1,
+        borderRadius: 5,
+    },
+    ListOrderItemBtText: {
+        fontWeight: '700',
+        textTransform: 'uppercase',
+        color: '#D8262F',
+    },
+    ListOrderItemLeft: {
+        width: winWidth - 70,
+    },
+    ListOrderItemBtDetail: {
+        width: 50,
+        height: 150,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    ListOrderItemBtDetailIcon: {
+        fontSize: 26,
+    },
+})

screens/AccountProductBought.tsx

@@ -0,0 +1,257 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountProductBought() {
+    return (
+        <SafeAreaView style={styles.container}>
+                <ScrollView>
+                    <HeaderAccountOrderList />
+
+                    <ProductBought />
+                </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Sản phẩm bạn đã mua</Text>
+        </View>
+    )
+}
+
+const ShowProductItemBought = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => {
+
+    const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity } = props;
+    const discount = Math.ceil(100 - (price / marketPrice * 100));
+
+
+    return (
+        <View style={[styles.itemProduct]}>
+            <View style={styles.itemProducCt}>
+                <View style={styles.pBloxImgProduct}>
+                    <View style={styles.pBloxImgProductBao}>
+                        <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
+                    </View>
+                </View>
+                <View style={styles.pBloxImgProductInfo}>
+                    <Text style={styles.pNameProduct}>
+                        {productName}
+                    </Text>
+                    <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
+                </View>
+            </View>
+            <TouchableOpacity style={styles.proReview}>
+                <Text style={styles.proReviewText}>Viết nhận xét</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const productData = [
+    {
+        id: 1,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 30000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+    {
+        id: 2,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 25000000,
+        marketPrice: 50000000,
+        quantity: 0,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+]
+
+const ProductBought = () => {
+    return (
+        <View style={styles.boxProductSave}>
+            <View style={styles.listProductSave}>
+                {
+                    productData.map(item => <ShowProductItemBought key={item.id} id={item.id} productName={item.productName}
+                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity}
+                    />)
+                }
+            </View>
+        </View>
+    )
+}
+
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 60,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    boxAccOrDt: {
+        width: winWidth,
+        padding: 10,
+    },
+    boxProductSave: {
+        backgroundColor: '#f2f2f2'
+    },
+    listProductSave: {
+        backgroundColor: '#f2f2f2'
+    },
+    itemProduct: {
+        padding: 10,
+        marginBottom: 10,
+    },
+    itemProducCt: {
+        width: '100%',
+        flexDirection: 'row',
+        marginBottom: 10,
+    },
+    pBloxImgProduct: {
+        position: 'relative',
+        width: 96,
+        height: 96,
+        marginRight: 10,
+    },
+    pBloxImgProductBao: {
+        position: 'relative',
+        paddingTop: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    pImgProduct: {
+        position: 'absolute',
+        top: 0,
+        left: '5%',
+        right: 0,
+        bottom: 0,
+        maxHeight: 500,
+        width: '90%',
+    },
+    pBloxImgProductInfo: {
+        width: winWidth - 136,
+    },
+    pNameProduct: {
+        fontSize: 16,
+        color: '#111',
+        marginBottom: 10,
+        fontWeight: '700',
+        textTransform: 'uppercase'
+    },
+    priceProduct: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#f10000',
+        marginBottom: 5,
+    },
+    proReview: {
+        width: '100%',
+        height: 40,
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    proReviewText: {
+        textTransform: 'uppercase',
+        fontWeight: '700',
+        color: '#fff'
+    },
+})

screens/AccountProductFavorite.tsx

@@ -0,0 +1,308 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountProductFavorite() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderAccountOrderList />
+
+                <ProductBought />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Sản phẩm yêu thích</Text>
+        </View>
+    )
+}
+
+const ShowProductItemBought = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => {
+
+    const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity } = props;
+    const discount = Math.ceil(100 - (price / marketPrice * 100));
+
+
+    return (
+        <View style={[styles.itemProduct]}>
+            <View style={styles.itemProducCt}>
+                <View style={styles.pBloxImgProduct}>
+                    <View style={styles.pBloxImgProductBao}>
+                        <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
+                    </View>
+                    <TouchableOpacity style={styles.pBloxImgProductDelete}>
+                        <Ionicons style={styles.pBloxImgProductDeleteIcon} name="trash" />
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.pBloxImgProductInfo}>
+                    <Text style={styles.pNameProduct}>
+                        {productName}
+                    </Text>
+                    <View style={styles.pNameProductFavo}>
+                        <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
+                        <View style={styles.pNameProductFavoBt}>
+                            <TouchableOpacity style={styles.pNameProductFavoHeart}>
+                                <Ionicons style={styles.pNameProductFavoHeartIcon} name="heart" />
+                            </TouchableOpacity>
+                            <TouchableOpacity style={styles.pNameProductFavoCart}>
+                                <Ionicons style={styles.pNameProductFavoCartIcon} name="cart-outline" />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+const productData = [
+    {
+        id: 1,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 30000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+    {
+        id: 2,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 25000000,
+        marketPrice: 50000000,
+        quantity: 0,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+]
+
+const ProductBought = () => {
+    return (
+        <View style={styles.boxProductSave}>
+            <View style={styles.listProductSave}>
+                {
+                    productData.map(item => <ShowProductItemBought key={item.id} id={item.id} productName={item.productName}
+                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity}
+                    />)
+                }
+            </View>
+        </View>
+    )
+}
+
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 60,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    boxAccOrDt: {
+        width: winWidth,
+        padding: 10,
+    },
+    boxProductSave: {
+        backgroundColor: '#f2f2f2'
+    },
+    listProductSave: {
+        backgroundColor: '#f2f2f2'
+    },
+    itemProduct: {
+        padding: 10,
+        marginBottom: 10,
+    },
+    itemProducCt: {
+        width: '100%',
+        flexDirection: 'row',
+        marginBottom: 10,
+    },
+    pBloxImgProduct: {
+        width: 96,
+        marginRight: 10,
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    pBloxImgProductBao: {
+        width: 96,
+        position: 'relative',
+        paddingTop: 96,
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    pImgProduct: {
+        position: 'absolute',
+        top: 0,
+        left: '5%',
+        right: 0,
+        bottom: 0,
+        maxHeight: 500,
+        width: '90%',
+    },
+    pBloxImgProductInfo: {
+        width: winWidth - 136,
+    },
+    pNameProduct: {
+        fontSize: 16,
+        color: '#111',
+        marginBottom: 10,
+        fontWeight: '700',
+        textTransform: 'uppercase'
+    },
+    priceProduct: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#f10000',
+        marginBottom: 5,
+    },
+    proReview: {
+        width: '100%',
+        height: 40,
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    proReviewText: {
+        textTransform: 'uppercase',
+        fontWeight: '700',
+        color: '#fff'
+    },
+    pNameProductFavo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    pNameProductFavoBt: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    pNameProductFavoHeart: {
+        marginRight: 10,
+    },
+    pNameProductFavoHeartIcon: {
+        fontSize: 24,
+        color: '#D8262F',
+    },
+    pNameProductFavoCart: {
+        width: 32,
+        height: 32,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#D8262F',
+        borderRadius: 3,
+    },
+    pNameProductFavoCartIcon: {
+        fontSize: 18,
+        color: '#fff',
+    },
+    pBloxImgProductDelete: {
+        marginTop: 10,
+        padding: 5,
+        borderRadius: 3,
+        borderWidth: 1,
+        borderColor: '#ababab',
+    },
+    pBloxImgProductDeleteIcon: {
+        fontSize: 16,
+        color: '#ababab',
+    },
+})

screens/AccountProductSave.tsx

@@ -0,0 +1,305 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountProductSave() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderAccountOrderList />
+
+                <ProductBought />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Sản phẩm mua sau</Text>
+        </View>
+    )
+}
+
+const ShowProductItemBought = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => {
+
+    const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity } = props;
+    const discount = Math.ceil(100 - (price / marketPrice * 100));
+
+
+    return (
+        <View style={[styles.itemProduct]}>
+            <View style={styles.itemProducCt}>
+                <View style={styles.pBloxImgProduct}>
+                    <View style={styles.pBloxImgProductBao}>
+                        <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
+                    </View>
+                    <TouchableOpacity style={styles.pBloxImgProductDelete}>
+                        <Ionicons style={styles.pBloxImgProductDeleteIcon} name="trash" />
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.pBloxImgProductInfo}>
+                    <Text style={styles.pNameProduct}>
+                        {productName}
+                    </Text>
+                    <View style={styles.pNameProductFavo}>
+                        <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
+                        <View style={styles.pNameProductFavoBt}>
+                            <TouchableOpacity style={styles.pNameProductFavoCart}>
+                                <Ionicons style={styles.pNameProductFavoCartIcon} name="cart-outline" />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+const productData = [
+    {
+        id: 1,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 30000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+    {
+        id: 2,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 25000000,
+        marketPrice: 50000000,
+        quantity: 0,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+]
+
+const ProductBought = () => {
+    return (
+        <View style={styles.boxProductSave}>
+            <View style={styles.listProductSave}>
+                {
+                    productData.map(item => <ShowProductItemBought key={item.id} id={item.id} productName={item.productName}
+                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity}
+                    />)
+                }
+            </View>
+        </View>
+    )
+}
+
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 60,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    boxAccOrDt: {
+        width: winWidth,
+        padding: 10,
+    },
+    boxProductSave: {
+        backgroundColor: '#f2f2f2'
+    },
+    listProductSave: {
+        backgroundColor: '#f2f2f2'
+    },
+    itemProduct: {
+        padding: 10,
+        marginBottom: 10,
+    },
+    itemProducCt: {
+        width: '100%',
+        flexDirection: 'row',
+        marginBottom: 10,
+    },
+    pBloxImgProduct: {
+        width: 96,
+        marginRight: 10,
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    pBloxImgProductBao: {
+        width: 96,
+        position: 'relative',
+        paddingTop: 96,
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    pImgProduct: {
+        position: 'absolute',
+        top: 0,
+        left: '5%',
+        right: 0,
+        bottom: 0,
+        maxHeight: 500,
+        width: '90%',
+    },
+    pBloxImgProductInfo: {
+        width: winWidth - 136,
+    },
+    pNameProduct: {
+        fontSize: 16,
+        color: '#111',
+        marginBottom: 10,
+        fontWeight: '700',
+        textTransform: 'uppercase'
+    },
+    priceProduct: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#f10000',
+        marginBottom: 5,
+    },
+    proReview: {
+        width: '100%',
+        height: 40,
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    proReviewText: {
+        textTransform: 'uppercase',
+        fontWeight: '700',
+        color: '#fff'
+    },
+    pNameProductFavo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    pNameProductFavoBt: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    pNameProductFavoHeart: {
+        marginRight: 10,
+    },
+    pNameProductFavoHeartIcon: {
+        fontSize: 24,
+        color: '#D8262F',
+    },
+    pNameProductFavoCart: {
+        width: 32,
+        height: 32,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#D8262F',
+        borderRadius: 3,
+    },
+    pNameProductFavoCartIcon: {
+        fontSize: 18,
+        color: '#fff',
+    },
+    pBloxImgProductDelete: {
+        marginTop: 10,
+        padding: 5,
+        borderRadius: 3,
+        borderWidth: 1,
+        borderColor: '#ababab',
+    },
+    pBloxImgProductDeleteIcon: {
+        fontSize: 16,
+        color: '#ababab',
+    },
+})

screens/AccountProductViewHistory.tsx

@@ -0,0 +1,346 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function AccountProductViewHistory() {
+    return (
+        <SafeAreaView style={styles.container}>
+                <ScrollView>
+                    <HeaderAccountOrderList />
+
+                    <ProductCategory />
+                </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function formatCurrency(price: string | number) {
+    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    let len = priceConvert.length;
+    return priceConvert.substring(0, len - 3);
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Sản phẩm đã xem</Text>
+        </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 productData = [
+    {
+        id: 1,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 30000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+    {
+        id: 2,
+        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
+        },
+        price: 25000000,
+        marketPrice: 50000000,
+        quantity: 0,
+        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
+    },
+]
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 60,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    boxAccOrDt: {
+        width: winWidth,
+        padding: 10,
+    },
+    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/CartPayInstallment.tsx

@@ -0,0 +1,248 @@
+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 CartPayInstallment() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderCart />
+
+                <CartItemPayInstall />
+
+                <BoxPayInstallForm />
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const HeaderCart = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerCartStep}>
+            <TouchableOpacity style={styles.goBack} onPress={() => navigation.navigate('Cart')}>
+                <FontAwesome style={styles.goBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerCartStepTitle}>Mua trả góp</Text>
+        </View>
+    )
+}
+
+const CartItemPayInstall = () => {
+    return(
+        <View style={styles.boxItemCartPayInstall}>
+            <View style={styles.boxItemCartPayInstallItem}>
+                <View style={styles.boxItemCartPayInstallItemLeft}>
+                    <Image style={styles.boxItemCartPayInstallItemImg} source={require('../assets/images/product.png')} />
+                    <TouchableOpacity style={styles.boxItemCartPayInstallItemDelete}>
+                        <FontAwesome style={styles.boxItemCartPayInstallItemDeleteIcon} name="trash" />
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxItemCartPayInstallItemInfo}>
+                    <Text style={styles.boxItemCartPayInstallItemName}>ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM()</Text>
+                    <Text style={styles.boxItemCartPayInstallItemPrice}>10.000.000đ</Text>
+                </View>
+            </View>
+            <View style={styles.boxItemCartPayInstallItem}>
+                <View style={styles.boxItemCartPayInstallItemLeft}>
+                    <Image style={styles.boxItemCartPayInstallItemImg} source={require('../assets/images/product.png')} />
+                    <TouchableOpacity style={styles.boxItemCartPayInstallItemDelete}>
+                        <FontAwesome style={styles.boxItemCartPayInstallItemDeleteIcon} name="trash" />
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxItemCartPayInstallItemInfo}>
+                    <Text style={styles.boxItemCartPayInstallItemName}>ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM()</Text>
+                    <Text style={styles.boxItemCartPayInstallItemPrice}>10.000.000đ</Text>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const BoxPayInstallForm = () => {
+    return(
+        <View style={styles.boxPayForm}>
+            <View style={styles.boxPayFormHeader}>
+                <Text style={styles.boxPayFormHeaderText}>Trả góp 0% bằng thẻ tín dụng</Text>
+                <Image style={styles.boxPayFormHeaderImg} source={require('../assets/images/payinstall-bank.png')} />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Giá trị sản phẩm (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="0" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Số tiền trả góp (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="0" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Tiền tệ (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="VND" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Họ tên (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Địa chỉ (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Số tiền trả trước (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="0" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Số lượng (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="1" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Email (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="Email" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Số điện thoại (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="Số điện thoại" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <Text  style={styles.boxPayFormItemText}>Thành phố (*)</Text>
+                <TextInput style={styles.boxPayFormItemInput} value="Hà Nội" />
+            </View>
+            <View  style={styles.boxPayFormItem}>
+                <TouchableOpacity style={styles.boxPayFormItemSend}>
+                    <Text style={styles.boxPayFormItemSendText}>Thanh toán trả góp</Text>
+                </TouchableOpacity>
+            </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',
+    },
+    headerCartStep: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+    },
+    goBack: {
+        width: 50,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    goBackIcon: {
+        fontSize: 24,
+    },
+    headerCartStepTitle: {
+        fontWeight: '700',
+        width: winWidth - 70,
+        textAlign: 'center'
+    },
+    boxItemCartPayInstall: {
+        marginBottom: 10,
+        backgroundColor: '#f2f2f2',
+    },
+    boxItemCartPayInstallItem: {
+        width: '100%',
+        padding: 10,
+        backgroundColor: '#fff',
+        flexDirection: 'row',
+    },
+    boxItemCartPayInstallItemLeft: {
+        width: 65,
+        paddingRight: 15,
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    boxItemCartPayInstallItemImg: {
+        width: '100%',
+        height: 50,
+        marginBottom: 10,
+    },
+    boxItemCartPayInstallItemDelete: {
+        padding: 5,
+        borderColor: '#e1e1e1',
+        borderWidth: 1,
+        borderRadius: 3,
+    },
+    boxItemCartPayInstallItemDeleteIcon: {
+        fontSize: 16,
+        color: '#999'
+    },
+    boxItemCartPayInstallItemInfo: {
+        width: winWidth - 85,
+    },
+    boxItemCartPayInstallItemName: {
+        marginBottom: 10,
+        fontWeight: '700'
+    },
+    boxItemCartPayInstallItemPrice: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#D8262F',
+    },
+    boxPayForm: {
+        width: winWidth,
+        padding: 10,
+    },
+    boxPayFormHeader: {
+        marginBottom: 10,
+        padding: 10,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#008445',
+        backgroundColor: '#DBF1E6',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    boxPayFormHeaderText: {
+        marginBottom: 10,
+        fontWeight: '700',
+        fontSize: 16,
+    },
+    boxPayFormHeaderImg: {
+        width: 149,
+        height: 24,
+    },
+    boxPayFormItem: {
+        marginBottom: 15,
+    },
+    boxPayFormItemText: {
+        fontSize: 16,
+        marginBottom: 5,
+    },
+    boxPayFormItemInput: {
+        width: '100%',
+        height: 40,
+        paddingHorizontal: 10,
+        borderColor: '#ABABAB',
+        borderWidth: 1,
+        borderRadius: 3,
+    },
+    boxPayFormItemSend: {
+        width: '100%',
+        height: 40,
+        backgroundColor: '#D8262F',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 5,
+    },
+    boxPayFormItemSendText: {
+        fontSize: 14,
+        color: '#fff',
+        textTransform: 'uppercase',
+        fontWeight: 'bold',
+    },
+});

screens/CartStep.tsx

@@ -0,0 +1,872 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal } 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 Swiper from 'react-native-swiper';
+import { Asset } from 'expo-asset';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+import { useNavigation } from '@react-navigation/core';
+
+export default function CartStep() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <CustommerInfo />
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const CustommerInfo = () => {
+    return (
+        <View style={styles.boxCustommerInfoCart}>
+            <HeaderCart />
+
+            <CustommerInfoCart />
+
+            <SelecPayOption />
+
+            <Bill />
+
+            <TotalCart />
+        </View>
+    )
+}
+
+const HeaderCart = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerCartStep}>
+            <TouchableOpacity style={styles.goBack} onPress={() => navigation.navigate('Cart')}>
+                <FontAwesome style={styles.goBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerCartStepTitle}>Thanh toán</Text>
+        </View>
+    )
+}
+
+const CustommerInfoCart = () => {
+    const [selecSex, setSelecSex] = React.useState('male');
+    const [checkedInfo, setCheckedInfo] = React.useState(false);
+    const [selectedProvince, setSelectedProvince] = React.useState();
+    const [selectedDistrict, setSelectedDistrict] = React.useState();
+    return (
+        <View style={styles.noBg}>
+            <View style={styles.boxInfoCusCartTitleAll}>
+                <Text style={styles.boxInfoCusCartTitleAllNum}>1</Text>
+                <Text style={styles.boxInfoCusCartTitle}>Thông tin khách hàng</Text>
+            </View>
+            <View style={styles.boxInfoCusCartHeading}>
+                <Text style={styles.boxInfoCusCartHeadingText}>Thông tin người mua</Text>
+                <Text style={styles.boxInfoCusCartHeadingNote}>(<Text style={styles.red}>*</Text>) Thông tin bắt buộc</Text>
+            </View>
+            <View style={styles.boxInfoCusCartItemSex}>
+                <View style={styles.boxInfoCusCartItemSexIt}>
+                    <View style={styles.itemRadio}>
+                        <RadioButton color={'#243a76'} value={'male'} status={selecSex === 'male' ? 'checked' : 'unchecked'} onPress={() => setSelecSex('male')} />
+                    </View>
+                    <Text>Anh</Text>
+                </View>
+                <View style={styles.boxInfoCusCartItemSexIt}>
+                    <View style={styles.itemRadio}>
+                        <RadioButton color={'#243a76'} value={'female'} status={selecSex === 'female' ? 'checked' : 'unchecked'} onPress={() => setSelecSex('female')} />
+                    </View>
+                    <Text>Chị</Text>
+                </View>
+            </View>
+            <View style={styles.boxInfoCusCartContent}>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Email*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ (Tên đường, Số nhà)*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemArea} multiline={true} numberOfLines={3} placeholder="Ghi chú" />
+                </View>
+            </View>
+            <View style={styles.boxInfoCusCartHeading}>
+                <Text style={styles.boxInfoCusCartHeadingText}>Thông tin người nhận</Text>
+                <Text style={styles.boxInfoCusCartHeadingNote}>(<Text style={styles.red}>*</Text>) Thông tin bắt buộc</Text>
+            </View>
+            <View style={styles.boxInfoCusCartItemCheckInfo}>
+                <View style={styles.itemRadio}>
+                    <Checkbox status={checkedInfo ? 'checked' : 'unchecked'} onPress={() => setCheckedInfo(!checkedInfo)} />
+                </View>
+                <Text>Lấy thông tin người mua</Text>
+            </View>
+            <View style={styles.boxInfoCusCartContent}>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <View style={styles.boxInfoCusCartItemHalf}>
+                        <Picker
+                            style={styles.picker}
+                            itemStyle={styles.onePickerItem}
+                            selectedValue={selectedProvince}
+                            onValueChange={(itemValue, itemIndex) =>
+                                setSelectedProvince(itemValue)
+                            }
+                        >
+                            <Picker.Item label="-- Chọn tỉnh/TP --" value="0" />
+                            <Picker.Item label="Hà Nội" value="1" />
+                            <Picker.Item label="Đà Nẵng" value="2" />
+                            <Picker.Item label="Hải Phòng" value="3" />
+                            <Picker.Item label="TP Hồ Chí Minh" value="4" />
+                        </Picker>
+                    </View>
+                    <View style={styles.boxInfoCusCartItemHalf}>
+                        <Picker
+                            style={styles.picker}
+                            itemStyle={styles.onePickerItem}
+                            selectedValue={selectedDistrict}
+                            onValueChange={(itemValue, itemIndex) =>
+                                setSelectedDistrict(itemValue)
+                            }
+                        >
+                            <Picker.Item label="-- Chọn Quận/Huyện --" value="0" />
+                            <Picker.Item label="Hà Nội" value="1" />
+                            <Picker.Item label="Đà Nẵng" value="2" />
+                            <Picker.Item label="Hải Phòng" value="3" />
+                            <Picker.Item label="TP Hồ Chí Minh" value="4" />
+                        </Picker>
+                    </View>
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ (tên đường, số nhà)*" />
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const SelecPayOption = () => {
+    const [checkedPayment, setCheckedPayment] = React.useState('pay1');
+    const listPayment = [
+        {
+            id: 1,
+            name: 'COD - Thanh toán khi nhận hàng',
+            description: '',
+            image: require('../assets/images/pay_1.png'),
+        },
+        {
+            id: 2,
+            name: 'Thanh toán trực tuyến (bằng thẻ ATM, VISA, MASTER) ',
+            description: '',
+            image: require('../assets/images/pay_2.png'),
+        },
+        {
+            id: 3,
+            name: 'Trả góp qua Alepay (Ngân Lượng)',
+            description: '',
+            image: require('../assets/images/pay_2.png'),
+        },
+    ]
+    return (
+        <View style={styles.boxPayment}>
+            <View style={styles.boxInfoCusCartTitleAll}>
+                <Text style={styles.boxInfoCusCartTitleAllNum}>1</Text>
+                <Text style={styles.boxInfoCusCartTitle}>Phương thức thanh toán</Text>
+            </View>
+            <Text style={styles.boxPaymentTitle}>Chọn phương thức thanh toán</Text>
+            <View style={styles.boxPaymentList}>
+                {
+                    listPayment.map(item => {
+                        let idpay = 'pay' + item.id;
+                        return (
+                            <View style={styles.paymentItem} key={item.id}>
+                                <View style={styles.paymentItemImage}>
+                                    <Image style={styles.paymentItemImageCt} source={item.image} />
+                                </View>
+                                <Text style={styles.paymentItemText}>{item.name}</Text>
+                                <View style={styles.paymentItemRadio}>
+                                    <RadioButton color={'#243a76'} value={idpay} status={checkedPayment === idpay ? 'checked' : 'unchecked'} onPress={() => setCheckedPayment(idpay)} />
+                                </View>
+                            </View>
+                        )
+                    })
+                }
+            </View>
+        </View>
+    )
+}
+
+const Bill = () => {
+    const [checkedBill, setCheckedBill] = React.useState(false);
+    return (
+        <View style={styles.boxBill}>
+            <View style={styles.boxInfoCusCartItemCheckInfo}>
+                <View style={styles.itemRadio}>
+                    <Checkbox status={checkedBill ? 'checked' : 'unchecked'} onPress={() => setCheckedBill(!checkedBill)} />
+                </View>
+                <Text style={styles.boxBillText}>Yêu cầu xuất hóa đơn GTGT cho đơn hàng này</Text>
+            </View>
+            <View style={checkedBill ? [styles.boxBillList, styles.active] : styles.boxBillList}>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Tên công ty*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ*" />
+                </View>
+                <View style={styles.boxInfoCusCartItem}>
+                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Mã số thuế*" />
+                </View>
+            </View>
+        </View>
+    )
+}
+
+
+
+const TotalCart = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.boxTotalCart}>
+            <View style={styles.boxTotalCartXu}>
+                <Image style={styles.boxTotalCartXuImg} source={require('../assets/images/icon_xu.png')} />
+                <TouchableOpacity style={styles.boxTotalCartXuButton}>
+                    <Text style={styles.boxTotalCartButtonTex}>Bạn chưa có Naga Xu </Text>
+                    <FontAwesome style={styles.boxTotalCartButtonIcon} name="question-circle" />
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxTotalCartItem}>
+                <Text style={styles.boxTotalCartItemLeft}>Tổng cộng</Text>
+                <Text style={styles.boxTotalCartItemRight}>5.000.000đ</Text>
+            </View>
+            <View style={styles.boxTotalCartItem}>
+                <Text style={styles.boxTotalCartItemLeft}>Giảm giá Voucher</Text>
+                <Text style={styles.boxTotalCartItemRight}>00đ</Text>
+            </View>
+            <View style={styles.boxTotalCartItem}>
+                <Text style={styles.boxTotalCartItemLeft}>Phí giao hàng</Text>
+                <Text style={styles.boxTotalCartItemRight}>00đ</Text>
+            </View>
+            <View style={styles.boxTotalCartItem}>
+                <Text style={[styles.boxTotalCartItemLeft, styles.TextBold]}>Thanh toán</Text>
+                <Text style={[styles.boxTotalCartItemRight, styles.TextBold, styles.red]}>5.000.000đ</Text>
+            </View>
+            <View style={styles.boxTotalCartItem}>
+                <Text style={[styles.boxTotalCartItemCoin, styles.TextBold]}>Nhận thêm 500 xu</Text>
+            </View>
+            <View style={styles.boxTotalCartItemAll}>
+                <Text style={styles.boxTotalCartItemAllText}>Tổng cộng:</Text>
+                <Text style={[styles.boxTotalCartItemAllPrice, styles.TextBold]}>5.000.000 đ</Text>
+            </View>
+            <View style={styles.boxTotalCartSubmit}>
+            <TouchableOpacity onPress={() => navigation.navigate('CartPayInstallment')} style={styles.boxTotalCartSubmitButtonTragop}>
+                    <Text style={styles.boxTotalCartSubmitTextTragop}>Mua trả góp</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.boxTotalCartSubmitButton}>
+                    <Text style={styles.boxTotalCartSubmitText}>Đặt hàng</Text>
+                </TouchableOpacity>
+            </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',
+        backgroundColor: '#fff',
+    },
+    headerCartStep: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+    },
+    goBack: {
+        width: 50,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    goBackIcon: {
+        fontSize: 24,
+    },
+    headerCartStepTitle: {
+        fontWeight: '700',
+        width: winWidth - 70,
+        textAlign: 'center'
+    },
+    boxCustommerInfoCart: {
+        width: winWidth,
+        backgroundColor: '#fff',
+        paddingHorizontal: 10,
+    },
+    green: {
+        color: '#008445',
+    },
+    boxInfoCusCart: {
+        width: '100%',
+        backgroundColor: 'rgba(0,0,0,0)',
+        display: 'none',
+    },
+    boxInfoCusCartTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        color: '#008445',
+    },
+    boxInfoCusCartTitleAll: {
+        width: '100%',
+        marginBottom: 10,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderBottomColor: '#ababab',
+        borderBottomWidth: 1,
+        paddingBottom: 5,
+    },
+    boxInfoCusCartTitleAllNum: {
+        width: 30,
+        height: 30,
+        textAlign: 'center',
+        lineHeight: 30,
+        borderColor: '#008445',
+        borderWidth: 1,
+        borderRadius: 15,
+        marginRight: 10,
+    },
+    boxInfoCusCartHeading: {
+        marginBottom: 10,
+        backgroundColor: 'rgba(0,0,0,0)',
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    boxInfoCusCartHeadingText: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        marginRight: 5,
+    },
+    boxInfoCusCartHeadingNote: {},
+    boxInfoCusCartItemSex: {
+        padding: 10,
+        marginBottom: 10,
+        width: '100%',
+        flexDirection: 'row',
+    },
+    boxInfoCusCartItemSexIt: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: 20,
+    },
+    itemRadio: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        marginRight: 5,
+    },
+    boxInfoCusCartContent: {
+        width: '100%',
+        marginBottom: 10,
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    boxInfoCusCartItem: {
+        width: '100%',
+        marginBottom: 10,
+        backgroundColor: 'rgba(0,0,0,0)',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    boxInfoCusCartItemInput: {
+        width: '100%',
+        height: 42,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        paddingHorizontal: 10,
+        backgroundColor: '#fff',
+    },
+    red: {
+        color: '#d9282f'
+    },
+    boxInfoCusCartItemHalf: {
+        width: winWidth / 2 - 15,
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    boxInfoCusCartItemArea: {
+        width: '100%',
+        height: 85,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        paddingHorizontal: 10,
+        backgroundColor: '#fff',
+    },
+    boxInfoCusCartItemCheckInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    picker: {
+        height: 42,
+        width: '100%',
+        backgroundColor: '#fff',
+        borderRadius: 5,
+    },
+    onePickerItem: {
+        height: 46,
+        color: '#222',
+        fontSize: 14,
+        textAlign: 'center',
+        width: '100%',
+        backgroundColor: '#fff',
+    },
+    active: {
+        display: 'flex',
+    },
+    noBg: {
+        width: '100%',
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    boxPayment: {
+        width: '100%',
+        marginBottom: 20,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    boxPaymentHead: {
+        width: '100%',
+        marginBottom: 10,
+        backgroundColor: '#008445',
+        lineHeight: 40,
+        paddingHorizontal: 10,
+        fontSize: 18,
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        color: '#fff',
+    },
+    boxPaymentTitle: {
+        marginBottom: 10,
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    boxPaymentList: {},
+    paymentItem: {
+        width: '100%',
+        padding: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    paymentItemImage: {
+        width: 31,
+        height: 31,
+        borderRadius: 15.5,
+        overflow: 'hidden',
+        marginRight: 10,
+    },
+    paymentItemImageCt: {
+        width: 31,
+        height: 31,
+    },
+    paymentItemText: {
+        width: winWidth - 130,
+    },
+    paymentItemRadio: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        marginLeft: 10,
+    },
+    boxBill: {
+        width: '100%',
+        paddingVertical: 10,
+        marginBottom: 20,
+    },
+    boxBillList: {
+        display: 'none',
+    },
+    boxBillText: {
+        fontSize: 12,
+    },
+    boxCartItem: {
+        width: '100%',
+        marginBottom: 20,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    boxCartItemBuyOther: {
+        marginBottom: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxCartItemBuyOtherIcon: {
+        fontSize: 15,
+        color: '#d9282f',
+        marginRight: 5,
+    },
+    boxCartItemBuyOtherIconText: {
+        fontSize: 15,
+        color: '#d9282f',
+        marginRight: 5,
+        textTransform: 'uppercase'
+    },
+    boxVoucher: {
+        width: '100%',
+        marginBottom: 20,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    boxVoucherForm: {
+        marginBottom: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 5,
+    },
+    boxVoucherFormInput: {
+        width: winWidth - 98,
+        height: 40,
+        paddingHorizontal: 10,
+        backgroundColor: '#fff',
+        borderTopLeftRadius: 5,
+        borderBottomLeftRadius: 5,
+        overflow: 'hidden',
+    },
+    boxVoucherFormButton: {
+        width: 78,
+        height: 40,
+        backgroundColor: '#6c757d',
+        borderTopRightRadius: 5,
+        borderBottomRightRadius: 5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    boxVoucherFormButtonText: {
+        color: '#fff',
+    },
+    boxVoucherShowPop: {
+        width: '100%',
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    boxVoucherShowPopButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1'
+    },
+    boxVoucherShowPopButtonCt: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxVoucherShowPopImg: {
+        marginRight: 10,
+    },
+    boxVoucherShowPopText: {
+        color: '#d9282f',
+    },
+    boxVoucherShowPopIcon: {},
+    boxXuShowPopButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1'
+    },
+    boxXuShowPopButtonImg: {
+        marginRight: 10,
+    },
+    boxXuShowPopButtonText: {
+        marginRight: 10,
+    },
+    boxXuShowPopButtonIcon: {},
+    boxVoucherNote: {
+        backgroundColor: '#f2f2f2',
+        padding: 10,
+    },
+    boxVoucherNoteText: {
+        marginBottom: 10,
+        fontStyle: 'italic',
+    },
+    TextBold: {
+        fontWeight: 'bold',
+    },
+    boxCloseModalVoucher: {
+        width: winWidth,
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    boxCloseModalVoucherPress: {
+        width: '100%',
+    },
+    contentPopVoucher: {
+        width: winWidth,
+        padding: 10,
+        height: winHeight,
+        paddingTop: 50,
+    },
+    contentPopVoucherHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    contentPopVoucherBack: {
+        width: 50,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    contentPopVoucherBackIcon: {
+        fontSize: 24,
+        height: 24,
+    },
+    contentPopVoucherTitle: {
+        width: winWidth - 70,
+        fontSize: 18,
+        lineHeight: 25,
+        textAlign: 'center',
+        fontWeight: '700'
+    },
+    contentPopVoucherForm: {
+        width: '100%',
+        padding: 10,
+        borderRadius: 5,
+        backgroundColor: '#f5f5f5',
+        marginBottom: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    contentPopVoucherFormText: {
+        width: 78,
+    },
+    contentPopVoucherFormInput: {
+        width: winWidth - 205,
+        height: 40,
+        borderRadius: 5,
+        paddingHorizontal: 10,
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        borderColor: '#ababab'
+    },
+    contentPopVoucherFormButton: {
+        width: 72,
+        height: 40,
+        borderRadius: 5,
+        backgroundColor: '#d9282f',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    contentPopVoucherFormButtonText: {
+        fontSize: 12,
+        textTransform: 'uppercase',
+        color: '#fff',
+        fontWeight: 'bold'
+    },
+    contentPopVoucherPop: {
+        width: '100%',
+        height: winHeight - 350,
+    },
+    contentPopVoucherPopTitle: {
+        marginBottom: 10,
+    },
+    contentPopVoucherPopList: {
+        width: '100%',
+        height: winHeight - 370,
+    },
+    contentPopVoucherPopItem: {
+        width: '100%',
+        marginBottom: 10,
+        borderWidth: 1,
+        borderColor: '#999',
+        flexDirection: 'row',
+        borderRadius: 5,
+        overflow: 'hidden',
+        alignItems: 'center',
+        paddingRight: 8,
+    },
+    contentPopVoucherPopItemLeft: {
+        width: 130,
+        padding: 10,
+        backgroundColor: '#999',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    contentPopVoucherPopItemHasUse: {
+        borderColor: '#008445',
+    },
+    contentPopVoucherPopItemLeftHasUse: {
+        backgroundColor: '#008445'
+    },
+    contentPopVoucherPopItemLeftSt: {
+        color: '#fff',
+        marginBottom: 5,
+        fontSize: 15,
+    },
+    contentPopVoucherPopItemLeftNd: {
+        color: '#fff',
+        marginBottom: 5,
+        fontSize: 15,
+        textTransform: 'uppercase',
+        fontWeight: 'bold'
+    },
+    contentPopVoucherPopItemCenter: {
+
+    },
+    contentPopVoucherPopItemCenterText: {
+        width: winWidth - 194,
+        paddingHorizontal: 10,
+    },
+    contentPopVoucherPopItemCheck: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        borderWidth: 1,
+        borderColor: '#999',
+    },
+    contentPopVoucherPopBot: {
+        width: '100%',
+        height: 60,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    contentPopVoucherPopBotBack: {
+        width: winWidth / 2 - 15,
+        backgroundColor: '#ebebeb',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 5,
+        height: 40,
+    },
+    contentPopVoucherPopBotBackText: {
+        fontSize: 18,
+        textTransform: 'uppercase',
+    },
+    contentPopVoucherPopBotOk: {
+        width: winWidth / 2 - 15,
+        backgroundColor: '#d9282f',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 5,
+        height: 40,
+    },
+    contentPopVoucherPopBotOkText: {
+        fontSize: 18,
+        textTransform: 'uppercase',
+        color: '#fff',
+        fontWeight: 'bold',
+    },
+    boxTotalCart: {
+    },
+    boxTotalCartXu: {
+        width: '100%',
+        paddingVertical: 15,
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxTotalCartXuImg: {
+        width: 20,
+        height: 20,
+        marginRight: 10,
+    },
+    boxTotalCartXuButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxTotalCartButtonTex: {},
+    boxTotalCartButtonIcon: {},
+    boxTotalCartItem: {
+        width: '100%',
+        paddingVertical: 15,
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    boxTotalCartItemLeft: {
+        fontSize: 14,
+        textTransform: 'uppercase',
+    },
+    boxTotalCartItemRight: {
+        fontSize: 14,
+    },
+    boxTotalCartItemCoin: {
+        color: '#FE9923',
+        textAlign: 'right',
+        width: '100%'
+    },
+    boxTotalCartSubmit: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    boxTotalCartSubmitButton: {
+        width: winWidth / 2 - 15,
+        height: 40,
+        backgroundColor: '#d9282f',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 5,
+    },
+    boxTotalCartSubmitText: {
+        fontSize: 15,
+        color: '#fff',
+        textTransform: 'uppercase',
+        fontWeight: 'bold',
+    },
+    boxTotalCartItemAll: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingVertical: 10,
+    },
+    boxTotalCartItemAllText: {
+        marginRight: 5,
+    },
+    boxTotalCartItemAllPrice: {
+        fontSize: 16,
+        color: '#D8262F',
+    },
+    boxTotalCartSubmitButtonTragop: {
+        width: winWidth / 2 - 15,
+        height: 40,
+        backgroundColor: '#FE9923',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 5,
+    },
+    boxTotalCartSubmitTextTragop: {
+        fontSize: 15,
+        color: '#fff',
+        textTransform: 'uppercase',
+        fontWeight: 'bold',
+    },
+});

screens/CustomerInfo.tsx

@@ -0,0 +1,289 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+
+export default function CustomerInfo() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <HeaderAccountOrderList />
+
+                <CustomerInfoContent />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+const HeaderAccountOrderList = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAOL}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerAOLBack}>
+                <FontAwesome style={styles.headerAOLBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAOLTitle}>Thông tin tài khoản</Text>
+        </View>
+    )
+}
+
+const CustomerInfoContent = () => {
+    const [openModalCusInfoChange, setOpenModalCusInfoChange] = useState(false);
+    return (
+        <View style={styles.boxCustommer}>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity onPress={() => setOpenModalCusInfoChange(true)} style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Họ tên</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}>Nguyễn Quỳnh</Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Giới tính</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}>Nữ</Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Địa chỉ email</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}>quynhnt@gmail.com</Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Địa chỉ nhà</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}>100 Láng Hạ, Đống Đa</Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Tỉnh / TP</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}>Hà Nội</Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Điện thoại</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}>0912345678</Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <View style={styles.boxCustommerItem}>
+                <TouchableOpacity style={styles.boxCustommerBt}>
+                    <Text style={styles.boxCustommerTextLeft}>Thay đổi mật khẩu</Text>
+                    <View style={styles.boxCustommerCtRight}>
+                        <Text style={styles.boxCustommerTextRight}></Text>
+                        <Ionicons style={styles.boxCustommerIcon} name="chevron-forward-outline" />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            <Modal visible={openModalCusInfoChange} animationType="slide" transparent={true} onRequestClose={() => { setOpenModalCusInfoChange(!openModalCusInfoChange); }}>
+                <View style={styles.cusInfoContent}>
+                    <Pressable onPress={() => setOpenModalCusInfoChange(!openModalCusInfoChange)} style={styles.cusInfoContentBg}>
+                    </Pressable>
+                    <View style={styles.cusInfoContentct}>
+                        <View style={styles.cusInfoContentctHead}>
+                            <Text style={styles.cusInfoContentctHeadText}>Họ tên</Text>
+                            <TouchableOpacity style={styles.cusInfoContentctHeadBt} onPress={() => setOpenModalCusInfoChange(!openModalCusInfoChange)}>
+                                <Ionicons style={styles.cusInfoContentctHeadBtIcon} name="close-outline" />
+                            </TouchableOpacity>
+                        </View>
+                        <View style={styles.cusInfoContentctIp}>
+                            <Text style={styles.cusInfoContentctIpText}>Họ tên</Text>
+                            <TextInput style={styles.cusInfoContentctIpInput} value="Nguyễn quỳnh" />
+                        </View>
+                        <TouchableOpacity style={styles.cusInfoContentctBtSubmit}>
+                            <Text style={styles.cusInfoContentctBtSubmitText}>Thay đổi</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    )
+}
+
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    headerAOL: {
+        width: winWidth,
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerAOLBack: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLBackIcon: {
+        fontSize: 24,
+    },
+    headerAOLSearch: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerAOLSearchIcon: {
+        fontSize: 24,
+    },
+    headerAOLTitle: {
+        width: winWidth - 60,
+        textAlign: 'center',
+        fontWeight: '700',
+    },
+    headerAOLChat: {
+        width: 40,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerAOLChatIcon: {
+        fontSize: 24,
+    },
+    GreenColor: {
+        color: '#008445',
+    },
+    OrangeColor: {
+        color: '#FE9923',
+    },
+    RedColor: {
+        color: '#D8262F',
+    },
+    boxCustommer: {
+        width: winWidth,
+        paddingTop: 10,
+        backgroundColor: '#f2f2f2',
+    },
+    boxCustommerItem: {
+        width: winWidth,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f2f2f2',
+    },
+    boxCustommerBt: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 10,
+        height: 40,
+    },
+    boxCustommerTextLeft: {},
+    boxCustommerCtRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxCustommerTextRight: {
+        color: '#777777',
+        marginRight: 10,
+    },
+    boxCustommerIcon: {
+        fontSize: 18,
+        color: '#777'
+    },
+    cusInfoContent: {
+        width: winWidth,
+        height: winHeight,
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    cusInfoContentBg: {
+        width: winHeight,
+        height: winHeight - 236,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    cusInfoContentct: {
+        width: winWidth,
+        paddingHorizontal: 10,
+        backgroundColor: '#fff',
+        height: 236,
+    },
+    cusInfoContentctHead: {
+        marginBottom: 30,
+        position: 'relative',
+        padding: 10,
+    },
+    cusInfoContentctHeadText: {
+        width: '100%',
+        textAlign: 'center',
+        fontSize: 16,
+        fontWeight: '700'
+    },
+    cusInfoContentctHeadBt: {
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        zIndex: 2,
+    },
+    cusInfoContentctHeadBtIcon: {
+        fontSize: 18,
+    },
+    cusInfoContentctIp: {
+        borderBottomColor: '#ababab',
+        borderBottomWidth: 1,
+        marginBottom: 20,
+    },
+    cusInfoContentctIpText: {
+        marginBottom: 10,
+        fontWeight: '500',
+        color: '#008445'
+    },
+    cusInfoContentctIpInput: {
+        width: '100%',
+        height: 40,
+    },
+    cusInfoContentctBtSubmit: {
+        width: '100%',
+        height: 40,
+        backgroundColor: '#D8262F',
+        borderRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    cusInfoContentctBtSubmitText: {
+        textTransform: 'uppercase',
+        fontWeight: '700',
+        color: '#fff'
+    },
+})

screens/ForgotPassword.tsx

@@ -0,0 +1,80 @@
+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 ForgotPassword() {
+    const navigation = useNavigation();
+    return (
+        <SafeAreaView style={styles.container}>
+            <View style={styles.boxForgotPassword}>
+                <Text style={styles.boxForgotPasswordTitle}>Bạn quên mật khẩu vào tài khoản?</Text>
+                <Text style={styles.boxForgotPasswordNote}>Vui lòng nhập địa chỉ email đã đăng ký với chúng tôi để tạo mật khẩu mới. Chúng tôi sẽ gửi 1 email vào địa chỉ email cung cấp và yêu cầu xác minh trước khi có thể tạo mật khẩu mới</Text>
+                <View style={styles.boxForgotPasswordInput}>
+                    <TextInput style={styles.boxForgotPasswordInputCt} placeholder="Email" />
+                </View>
+                <TouchableOpacity style={styles.boxForgotPasswordButton}>
+                    <Text style={styles.boxForgotPasswordButtonText}>Lấy lại mật khẩu</Text>
+                </TouchableOpacity>
+            </View>
+        </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',
+    },
+    boxForgotPassword: {
+        width: winWidth,
+        padding: 10,
+        height: '100%',
+    },
+    boxForgotPasswordTitle: {
+        marginBottom: 20,
+        textAlign: 'center',
+        fontWeight: '700'
+    },
+    boxForgotPasswordNote: {
+        textAlign: 'center',
+        marginBottom: 20,
+        fontWeight: '300'
+    },
+    boxForgotPasswordInput: {
+        width: '100%',
+        marginBottom: 15,
+        borderBottomColor: '#ABABAB',
+        borderBottomWidth: 1,
+        paddingBottom: 5,
+    },
+    boxForgotPasswordInputCt: {
+        width: '100%',
+        height: 30,
+    },
+    boxForgotPasswordButton: {
+        width: '100%',
+        height: 40,
+        borderRadius: 5,
+        marginBottom: 10,
+        backgroundColor: '#D8262F',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    boxForgotPasswordButtonText: {
+        fontWeight: '700',
+        color: '#fff',
+        textTransform: 'uppercase',
+    },
+
+});

screens/Login.tsx

@@ -12,53 +12,51 @@ export default function Login() {
     const navigation = useNavigation();
     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 style={styles.boxLogin}>
+                <View style={styles.boxLoginTop}>
+                    <TouchableOpacity style={styles.boxLoginLogo}>
+                        <Image source={require('../assets/images/logo.png')} />
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxLoginItemList}>
+                    <View style={styles.boxLoginItem}>
+                        <Ionicons style={styles.boxLoginItemIcon} name="person-outline" />
+                        <TextInput style={styles.boxLoginItemInput} placeholder="Email đăng nhập*" />
                     </View>
-                    <View style={styles.boxLoginToRegis}>
-                        <Text>Khách hàng mới?</Text>
-                        <TouchableOpacity onPress={() => navigation.navigate('Register')}>
-                            <Text style={styles.green}>Đăng ký</Text>
+                    <View style={styles.boxLoginItem}>
+                        <Ionicons style={styles.boxLoginItemIcon} name="lock-closed-outline" />
+                        <TextInput style={[styles.boxLoginItemInput, styles.boxLoginItemInputMk]} placeholder="Mật khẩu" />
+                        <TouchableOpacity onPress={() => navigation.navigate('ForgotPassword')} style={styles.boxLoginItemForgitPas}>
+                            <Text style={styles.boxLoginItemForgitPasText}>Quên?</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} onPress={() => navigation.navigate('AccountHome')}>
-                            <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>
+                <TouchableOpacity onPress={() => navigation.navigate('AccountHome')} style={styles.boxLoginButton}>
+                    <Text style={styles.boxLoginButtonText}>Đăng nhập</Text>
+                </TouchableOpacity>
+                <View style={styles.boxLoginButtonRegis}>
+                    <Text style={styles.boxLoginButtonRegisText}>Khách hàng mới?</Text>
+                    <TouchableOpacity onPress={() => navigation.navigate('Register')}>
+                        <Text style={styles.boxLoginButtonRegisBt}>Đăng ký</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxLoginLineChia}>
+                    <View style={styles.boxLoginLine}></View>
+                    <Text style={styles.boxLoginLineChiaText}>Hoặc</Text>
+                    <View style={styles.boxLoginLine}></View>
+                </View>
+                <View style={styles.loginSocial}>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemFace]}>
+                        <FontAwesome style={styles.loginSocialItemIcon} name="facebook" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemGoogle]}>
+                        <FontAwesome style={styles.loginSocialItemIcon} name="google" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemZalo]}>
+                        <Image style={styles.loginSocialItemImg} source={require('../assets/images/zalo-login.png')} />
+                    </TouchableOpacity>
+                </View>
+            </View>
         </SafeAreaView>
     );
 }
@@ -74,110 +72,120 @@ const styles = StyleSheet.create({
     },
     boxLogin: {
         width: winWidth,
+        height: winHeight - 130,
         padding: 10,
-        backgroundColor: 'rgba(0,0,0,0)'
     },
-    boxLoginTitle: {
-        width:  '100%',
-        backgroundColor: 'rgba(0,0,0,0)',
+    boxLoginTop: {
+        flexDirection: 'row',
+        justifyContent: 'center',
         marginBottom: 20,
     },
-    boxLoginTitleText: {
-        fontSize: 18,
-        fontWeight: 'bold',
-    },
-    boxLoginToRegis: {
-        width:  '100%',
-        backgroundColor: 'rgba(0,0,0,0)',
+    boxLoginLogo: {},
+    boxLoginItemList: {},
+    boxLoginItem: {
         marginBottom: 10,
         flexDirection: 'row',
         alignItems: 'center',
+        borderBottomColor: '#ABABAB',
+        borderBottomWidth: 1,
+        paddingBottom: 5,
+        position: 'relative',
+    },
+    boxLoginItemIcon: {
+        fontSize: 24,
+        width: 32,
+    },
+    boxLoginItemInput: {
+        width: winWidth - 52,
+        height: 30,
+    },
+    boxLoginItemInputMk: {
+        paddingRight: 50,
+    },
+    boxLoginItemForgitPas: {
+        position: 'absolute',
+        right: 0,
+        borderLeftColor: '#e1e1e1',
+        borderLeftWidth: 1,
+        width: 50,
+        height: 30,
+        flexDirection: 'row',
         justifyContent: 'flex-end',
+        alignItems: 'center',
     },
-    green: {
-        color: '#008445',
+    boxLoginItemForgitPasText: {
+        color: '#0070C7'
     },
-    loginCartSocialForm: {
-        marginBottom: 10,
-        padding: 10,
-    },
-    loginCartSocialFormItem: {
-        width: '100%',
-        marginBottom: 10,
-    },
-    loginCartSocialFormItemText: {
-        marginBottom: 5,
-        fontWeight: 'bold'
-    },
-    loginCartSocialFormItemInput: {
+    boxLoginButton: {
         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,
+        backgroundColor: '#D8262F',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: 5,
-        overflow: 'hidden',
-        backgroundColor: '#d9282f',
-        marginBottom: 20,
     },
-    boxLoginSubmitText: {
-        fontWeight: 'bold',
+    boxLoginButtonText: {
+        fontWeight: '700',
+        color: '#fff',
+        textTransform: 'uppercase',
+    },
+    boxLoginButtonRegis: {
+        marginBottom: 20,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    boxLoginButtonRegisText: {
+        marginRight: 5,
+    },
+    boxLoginButtonRegisBt: {
+        color: '#0070C7',
+    },
+    boxLoginLineChia: {
+        marginBottom: 20,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    boxLoginLine: {
+        width: 80,
+        height: 1,
+        backgroundColor: '#e1e1e1',
+    },
+    boxLoginLineChiaText: {
+        marginHorizontal: 5,
+        color: '#777',
+        fontWeight: '300',
+    },
+    loginSocial: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    loginSocialItem: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#3B5998',
+        marginHorizontal: 8,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    loginSocialItemIcon: {
+        fontSize: 18,
         color: '#fff'
     },
-    boxLoginOther: {
-        marginBottom: 20,
-        flexDirection: 'row',
-        justifyContent: 'center',
+    loginSocialItemImg: {
+        width: 22,
+        height: 24,
     },
-    boxLoginOtherText: {},
-    boxLoginSocial: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
+    loginSocialItemFace: {},
+    loginSocialItemGoogle: {
+        backgroundColor: '#DF4A32',
     },
-    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,
+    loginSocialItemZalo: {
+        backgroundColor: '#0F8EDD'
     },
 });

screens/ProductHotList.tsx

@@ -0,0 +1,797 @@
+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 ProductHotList() {
+    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 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 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 - 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',
+    },
+});

screens/Register.tsx

@@ -8,81 +8,81 @@ import { Text, View } from '../components/Themed';
 import { TextInput } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 import { Checkbox } from 'react-native-paper';
+import Person from "react-native-bootstrap-icons/icons/person";
+import Telephone from "react-native-bootstrap-icons/icons/telephone";
+import Envelope from "react-native-bootstrap-icons/icons/envelope";
+import Geoalt from "react-native-bootstrap-icons/icons/geo-alt";
+import Lock from "react-native-bootstrap-icons/icons/lock";
 
 export default function Register() {
     const [checkedRegis, setCheckedRegis] = useState(false);
+    const [checkedRegisBaoMat, setCheckedRegisBaoMat] = useState(false);
     const navigation = useNavigation();
     return (
         <SafeAreaView style={styles.container}>
             <ScrollView>
                 <View style={styles.boxRegister}>
                     <Text style={styles.boxRegisterTitle}>Tạo tài khoản Nagakawa</Text>
-                    <View style={styles.boxRegisterNote}>
-                        <Text>Bạn đã có tài khoản? </Text>
-                        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
-                            <Text style={styles.green}>Đăng nhập</Text>
-                        </TouchableOpacity>
-                        <Text> tại đây</Text>
+                    <View style={styles.boxRegisterItem}>
+                        <Person width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Họ tên*" />
                     </View>
-                    <View style={styles.boxRegisterList}>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Số điện thoại*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
+                    <View style={styles.boxRegisterItem}>
+                        <Telephone width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Số điện thoại*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Envelope width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Email đăng ký*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Geoalt width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Địa chỉ*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Lock width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Mật khẩu*" />
+                    </View>
+                    <View style={styles.boxRegisterItem}>
+                        <Lock width="19" height="19" style={styles.boxRegisterItemIcon} />
+                        <TextInput style={styles.boxRegisterItemInput} placeholder="Nhập lại mật khẩu*" />
+                    </View>
+                    <View style={styles.checkKmRegis}>
+                        <View style={styles.checkKmRegisCheck}>
+                            <Checkbox status={checkedRegis ? 'checked' : 'unchecked'} onPress={() => setCheckedRegis(!checkedRegis)} />
                         </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Email đăng ký*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
+                        <Text style={styles.checkKmRegisText}>Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa</Text>
+                    </View>
+                    <TouchableOpacity style={styles.boxLoginSubmit}>
+                        <Text style={styles.boxLoginSubmitText}>Đăng ký</Text>
+                    </TouchableOpacity>
+                    <View style={styles.checkKmRegis}>
+                        <View style={styles.checkKmRegisCheck}>
+                            <Checkbox status={checkedRegisBaoMat ? 'checked' : 'unchecked'} onPress={() => setCheckedRegisBaoMat(!checkedRegisBaoMat)} />
                         </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Địa chỉ*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Mật khẩu*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Nhập lại mật khẩu*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Họ tên*</Text>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.boxRegisterItem}>
-                            <Text style={styles.boxRegisterItemText}>Mã xác nhận</Text>
-                            <View style={styles.boxRegisterCapcha}>
-                                <Image source={require('../assets/images/captcha.png')} />
-                                <TouchableOpacity>
-                                    <Text style={styles.boxRegisterCapchaOther}>[ Xem mã khác ]</Text>
-                                </TouchableOpacity>
-                            </View>
-                            <TextInput style={styles.boxRegisterItemInput} />
-                        </View>
-                        <View style={styles.checkKmRegis}>
-                            <View style={styles.checkKmRegisCheck}>
-                                <Checkbox status={checkedRegis ? 'checked' : 'unchecked'} onPress={() => setCheckedRegis(!checkedRegis)} />
-                            </View>
-                            <Text style={styles.checkKmRegisText}>Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa</Text>
-                        </View>
-                        <TouchableOpacity style={styles.boxLoginSubmit}>
-                            <Text style={styles.boxLoginSubmitText}>Đăng ký</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')} />
+                        <View style={styles.checkKmRegisText}>
+                            <Text>Tôi đồng ý với các</Text>
+                            <TouchableOpacity>
+                                <Text style={styles.colorGreen}>chính sách bảo mật Nagakawa</Text>
                             </TouchableOpacity>
                         </View>
                     </View>
+                    <View style={styles.boxLoginLineChia}>
+                    <View style={styles.boxLoginLine}></View>
+                    <Text style={styles.boxLoginLineChiaText}>Hoặc</Text>
+                    <View style={styles.boxLoginLine}></View>
+                </View>
+                <View style={styles.loginSocial}>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemFace]}>
+                        <FontAwesome style={styles.loginSocialItemIcon} name="facebook" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemGoogle]}>
+                        <FontAwesome style={styles.loginSocialItemIcon} name="google" />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemZalo]}>
+                        <Image style={styles.loginSocialItemImg} source={require('../assets/images/zalo-login.png')} />
+                    </TouchableOpacity>
+                </View>
                 </View>
             </ScrollView>
         </SafeAreaView>
@@ -100,52 +100,36 @@ const styles = StyleSheet.create({
     },
     boxRegister: {
         width: winWidth,
+        minHeight: winHeight - 130,
         padding: 10,
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: '#fff',
     },
     boxRegisterTitle: {
-        marginBottom: 15,
-        fontSize: 18,
-        fontWeight: 'bold',
-    },
-    boxRegisterNote: {
-        marginBottom: 10,
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        backgroundColor: 'rgba(0,0,0,0)'
-    },
-    green: {
-        color: '#008445',
-    },
-    boxRegisterList: {
-        width: '100%',
-        padding: 10,
+        marginBottom: 20,
+        textAlign: 'center',
+        fontWeight: '700'
     },
     boxRegisterItem: {
-        width: '100%',
-        marginBottom: 10,
-    },
-    boxRegisterItemText: {
-        fontWeight: 'bold',
-        marginBottom: 5,
-    },
-    boxRegisterItemInput: {
-        width: '100%',
-        height: 40,
-        borderColor: '#e1e1e1',
-        borderWidth: 1,
-        borderRadius: 5,
-    },
-    boxRegisterCapcha: {
         flexDirection: 'row',
         alignItems: 'center',
+        borderBottomWidth: 1,
+        borderBottomColor: '#ABABAB',
+        paddingBottom: 5,
+        marginBottom: 10,
+    },
+    boxRegisterItemIcon: {
+        marginRight: 10,
+        color: '#999'
+    },
+    boxRegisterItemInput: {
+        width: winWidth - 49,
+        height: 30,
     },
-    boxRegisterCapchaOther: {},
     checkKmRegis: {
         flexDirection: 'row',
         marginBottom: 10,
         marginTop: 10,
+        alignItems: 'center',
     },
     checkKmRegisCheck: {
         width: 36,
@@ -154,7 +138,9 @@ const styles = StyleSheet.create({
         borderColor: '#e1e1e1',
         marginRight: 10,
     },
-    checkKmRegisText: {},
+    checkKmRegisText: {
+        width: winWidth - 66,
+    },
     boxLoginSubmit: {
         width: '100%',
         height: 40,
@@ -170,40 +156,53 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         color: '#fff'
     },
-    boxLoginOther: {
+    colorGreen: {
+        color: '#008445',
+    },
+    boxLoginLineChia: {
         marginBottom: 20,
         flexDirection: 'row',
-        justifyContent: 'center',
-    },
-    boxLoginOtherText: {},
-    boxLoginSocial: {
-        flexDirection: 'row',
-        justifyContent: 'center',
         alignItems: 'center',
+        justifyContent: 'center'
     },
-    boxLoginSocialItem: {
-        width: 34,
-        height: 34,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 5,
+    boxLoginLine: {
+        width: 80,
+        height: 1,
+        backgroundColor: '#e1e1e1',
+    },
+    boxLoginLineChiaText: {
         marginHorizontal: 5,
-        backgroundColor: '#3b5998',
+        color: '#777',
+        fontWeight: '300',
     },
-    boxLoginSocialFace: {},
-    boxLoginSocialGoogle: {
-        backgroundColor: '#df4a32',
+    loginSocial: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    boxLoginSocialZalo: {
-        backgroundColor: '#0f8edd',
+    loginSocialItem: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#3B5998',
+        marginHorizontal: 8,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    boxLoginSocialIcon: {
-        fontSize: 16,
-        color: '#fff',
+    loginSocialItemIcon: {
+        fontSize: 18,
+        color: '#fff'
     },
-    boxLoginSocialImg: {
-        width: 16,
-        height: 16,
+    loginSocialItemImg: {
+        width: 22,
+        height: 24,
+    },
+    loginSocialItemFace: {},
+    loginSocialItemGoogle: {
+        backgroundColor: '#DF4A32',
+    },
+    loginSocialItemZalo: {
+        backgroundColor: '#0F8EDD'
     },
 });

screens/SettingAccount.tsx

@@ -0,0 +1,160 @@
+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';
+import { Switch } from 'react-native-paper';
+
+export default function SettingAccount() {
+    const navigation = useNavigation();
+    return (
+        <SafeAreaView style={styles.container}>
+            <View style={styles.boxSettingAccountAll}>
+                <HeaderAll />
+
+                <ContentSettingAccount />
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const HeaderAll = () => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.headerAll}>
+            <TouchableOpacity style={styles.goBack} onPress={() => navigation.navigate('AccountHome')}>
+                <FontAwesome style={styles.goBackIcon} name="angle-left" />
+            </TouchableOpacity>
+            <Text style={styles.headerAllTitle}>Cài đặt</Text>
+        </View>
+    )
+}
+
+const ContentSettingAccount = () => {
+    const [isSwitchOn, setIsSwitchOn] = useState(false);
+    return (
+        <View style={styles.boxSettingAccount}>
+            <View style={styles.boxSettingAccountList}>
+                <View style={styles.boxSettingAccountListToggleItem}>
+                    <Text style={styles.boxSettingAccountItemTextToggle}>Cho phép nhận  thông báo</Text>
+                    <Switch style={styles.boxSettingAccountItemToggle} value={isSwitchOn} onValueChange={() => setIsSwitchOn(!isSwitchOn)} />
+                </View>
+            </View>
+            <View style={styles.boxSettingAccountList}>
+                <View style={styles.boxSettingAccountItem}>
+                    <TouchableOpacity>
+                        <Text style={styles.boxSettingAccountItemText}>Chính sách</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxSettingAccountItem}>
+                    <TouchableOpacity>
+                        <Text style={styles.boxSettingAccountItemText}>Trung tâm hỗ trợ</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxSettingAccountItem}>
+                    <TouchableOpacity>
+                        <Text style={styles.boxSettingAccountItemText}>Phản hồi</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxSettingAccountItem}>
+                    <TouchableOpacity>
+                        <Text style={styles.boxSettingAccountItemText}>Quy chế hoạt động</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.boxSettingAccountItem}>
+                    <TouchableOpacity>
+                        <Text style={styles.boxSettingAccountItemText}>Giới thiệu Nagakawa</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={[styles.boxSettingAccountList, styles.boxSettingAccountListLogout]}>
+                <TouchableOpacity style={styles.boxSettingAccountLogout}>
+                    <Text style={styles.boxSettingAccountLogoutText}>Đăng xuất</Text>
+                </TouchableOpacity>
+            </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',
+    },
+    headerAll: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+    },
+    goBack: {
+        width: 50,
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    goBackIcon: {
+        fontSize: 24,
+    },
+    headerAllTitle: {
+        fontWeight: '700',
+        width: winWidth - 70,
+        textAlign: 'center'
+    },
+    boxSettingAccountAll: {
+        width: winWidth,
+        height: winHeight,
+        paddingTop: 30,
+    },
+    boxSettingAccount: {
+        width: winWidth,
+        backgroundColor: '#f2f2f2',
+        height: '100%'
+    },
+    boxSettingAccountList: {
+        marginBottom: 10,
+    },
+    boxSettingAccountListToggleItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        justifyContent: 'space-between',
+    },
+    boxSettingAccountItemTextToggle: {},
+    boxSettingAccountItemToggle: {},
+    boxSettingAccountItem: {
+        width: '100%',
+        borderBottomWidth: 1,
+        borderBottomColor: '#f2f2f2',
+        padding: 10,
+    },
+    boxSettingAccountItemText: {},
+    boxSettingAccountListLogout: {
+        padding: 10,
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
+    boxSettingAccountLogout: {
+        width: '100%',
+        height: 40,
+        borderColor: '#D8262F',
+        borderWidth: 1,
+        borderRadius: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#fff',
+    },
+    boxSettingAccountLogoutText: {
+        fontWeight: '700',
+        fontSize: 14,
+        textTransform: 'uppercase',
+        color: '#D8262F',
+    },
+});