update code

src/Config/Functions.js

@@ -14,6 +14,7 @@ import AppText from '../components/AppText';
 import AsyncStorage from '@react-native-community/async-storage';
 import {DETAILNEW, TABNAVIGATOR, AUTHEN} from '../routers/ScreenNames';
 import R from '../assets/R';
+import {isTablet} from 'react-native-device-info';
 
 export const logout = (navigation) => {
   AsyncStorage.clear();
@@ -186,7 +187,11 @@ export const WIDTH = (w) => width * (w / 360);
 export const HEIGHT = (h) => height * (h / 640);
 export const getLineHeight = (f) => f;
 export const getFont = (f) => f - 1;
-export const WIDTHXDICON = (w) => width * (w / 1125);
+
+export const WIDTHXDICON = (w) =>
+  isTablet() ? (width * (w / 1125)) / 1.5 : width * (w / 1125);
+export const HEIGHTXDICON = (h) =>
+  isTablet() ? (height * (h / 2436)) / 1.5 : height * (h / 2436);
 
 export const validatePhone = (str) => {
   let re = /^[0-9+]{9,11}$/;

src/Screens/Home/SwiperComponent.js

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
     borderRadius: 5,
 
     height: HEIGHTXD(400),
-    marginTop: 25,
+    marginTop: HEIGHTXD(70),
     borderBottomColor: R.colors.borderGray,
     borderTopColor: R.colors.borderGray,
     shadowColor: '#000',

src/Screens/NewFeed/Media/TopMedia.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import R from '../../../assets/R';
 import LinearGradient from 'react-native-linear-gradient';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
 import Block from '../../../components/Block';
 import Icon from 'react-native-vector-icons/AntDesign';
 import {useNavigation} from '@react-navigation/native';
@@ -83,7 +83,7 @@ const MediaView = (props) => {
 
 const styles = StyleSheet.create({
   containerTop: {
-    height: 300,
+    height: HEIGHTXD(850),
     width: '100%',
   },
   contentTop: {
@@ -97,10 +97,10 @@ const styles = StyleSheet.create({
     textDecorationLine: 'underline',
   },
   containerBtn: {
-    paddingHorizontal: 15,
-    paddingVertical: 5,
+    width: WIDTHXD(380),
     backgroundColor: '#1C6AF6',
-    borderRadius: 5,
+    height: HEIGHTXD(120),
+    borderRadius: HEIGHTXD(30),
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',

src/Screens/NewFeed/Tab1/item.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
 import Block from '../../../components/Block';
 import Icon from 'react-native-vector-icons/AntDesign';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
 import R from '../../../assets/R';
 import {useNavigation} from '@react-navigation/native';
 import {DETAILNEW} from '../../../routers/ScreenNames';
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     color: '#A2A2A2',
   },
   img: {
-    height: 180,
+    height: HEIGHTXD(500),
     borderRadius: 10,
     marginTop: 5,
   },

src/components/Header/HeaderHome.js

@@ -12,7 +12,7 @@ import {
   Alert,
 } from 'react-native';
 import R from '../../assets/R';
-import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
+import {getFontXD, getWidth, HEIGHT, WIDTHXD} from '../../Config/Functions';
 import LinearGradient from 'react-native-linear-gradient';
 import {connect} from 'react-redux';
 import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
@@ -281,7 +281,7 @@ const HeaderHome = (props) => {
                 renderActions(onClickDetail)
               ) : (
                 <View style={{justifyContent: 'center', alignItems: 'center'}}>
-                  <View style={{width: 30, height: 20}}>
+                  <View style={{width: HEIGHTXD(80), height: HEIGHTXD(60)}}>
                     <TouchableOpacity
                       onPress={onClickDetail}
                       style={styles.containerBtn}>
@@ -318,13 +318,14 @@ const styles = StyleSheet.create({
   },
   containerBtn: {
     position: 'absolute',
-    width: 30,
-    height: 30,
+    width: HEIGHTXD(80),
+    height: HEIGHTXD(80),
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: R.colors.white,
-    borderRadius: 20,
-    top: 5,
+    borderRadius: HEIGHTXD(80),
+    top: HEIGHTXD(20),
+
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -343,7 +344,7 @@ const styles = StyleSheet.create({
   },
   containerTop: {
     backgroundColor: 'white',
-    width: '90%',
+    width: getWidth() - 40,
     borderRadius: 10,
     shadowColor: '#000',
     shadowOffset: {

src/routers/PlussModal.js

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Entypo';
 import R from '../assets/R';
-import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
+import {HEIGHTXD, WIDTHXD, getFontXD, WIDTHXDICON} from '../Config/Functions';
 import Modal from 'react-native-modal';
 
 import {useNavigation} from '@react-navigation/native';
@@ -37,7 +37,7 @@ const PlussModal = (props) => {
     <View style={styles.container}>
       <View style={styles.wraper}>
         <TouchableOpacity onPress={toggleModal} style={styles.btn}>
-          <Icon name={'plus'} size={27} color={R.colors.white} />
+          <Icon name={'plus'} size={HEIGHTXD(60)} color={R.colors.white} />
         </TouchableOpacity>
       </View>
 
@@ -95,8 +95,8 @@ export default PlussModal;
 const styles = StyleSheet.create({
   btn: {
     backgroundColor: R.colors.main,
-    width: WIDTHXD(144),
-    height: WIDTHXD(144),
+    width: WIDTHXDICON(135),
+    height: WIDTHXDICON(135),
     justifyContent: 'center',
     alignItems: 'center',
     shadowColor: '#000',
@@ -107,21 +107,21 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 3,
-    borderRadius: 30,
+    borderRadius: WIDTHXDICON(144),
   },
   container: {
     flex: 1,
   },
   wraper: {
     backgroundColor: R.colors.white,
-    width: WIDTHXD(160),
-    height: WIDTHXD(160),
+    width: WIDTHXDICON(144),
+    height: WIDTHXDICON(144),
     justifyContent: 'center',
     alignItems: 'center',
     position: 'absolute',
-    top: -20,
+    top: -HEIGHTXD(45),
     left: 15,
-    borderRadius: WIDTHXD(90),
+    borderRadius: WIDTHXDICON(90),
   },
   footer: {
     backgroundColor: 'white',

src/routers/TabNavigation.js

@@ -23,6 +23,7 @@ import {changeLanguage} from '../actions/language';
 import KEY from '../assets/AsynStorage';
 import AsyncStorage from '@react-native-community/async-storage';
 import {DETAILNEW} from '../routers/ScreenNames';
+import {getHeight, getWidth} from '../Config/Functions';
 
 const Tab = createBottomTabNavigator();
 
@@ -31,6 +32,7 @@ const PayScreenComponent = () => {
 };
 
 const TabNavigator = (props) => {
+  console.log(getHeight(), getWidth());
   const navigate = useNavigation();
   useEffect(() => {
     setInitLanguage();