screen payment

App.js

@@ -6,6 +6,7 @@ import rootReducer from './src/Reducers/index';
 import RootView from './src/RootView';
 import createSagaMiddleware from 'redux-saga';
 import rootSaga from './src/Saga/rootSaga';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 const sagaMiddleware = createSagaMiddleware();
 
@@ -13,9 +14,11 @@ let store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
 sagaMiddleware.run(rootSaga);
 const App = () => {
   return (
+    <SafeAreaProvider>
       <Provider store={store}>
         <RootView />
       </Provider>
+    </SafeAreaProvider>
   );
 };
 

android/app/src/main/AndroidManifest.xml

@@ -11,8 +11,9 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+      android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true"
-      android:theme="@style/AppTheme">
+      >
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

src/Screens/AccountVerification/AccountVerificationView.js

 import React from 'react';
-import {View, Text} from 'react-native';
+import {
+  View,
+  Text,
+  KeyboardAvoidingView,
+  ScrollView,
+  Platform,
+} from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
 import BankInfor from './Tab/BankInfor';
 import GeneralInfor from './Tab/GeneralInfor';
@@ -10,6 +16,11 @@ const Tab = createMaterialTopTabNavigator();
 
 const AccountVerificationView = (props) => {
   return (
+    <KeyboardAvoidingView
+      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1}}
+      keyboardVerticalOffset={-50}>
+      <ScrollView showsVerticalScrollIndicator={false}>
         <View style={{flex: 1}}>
           <HeaderBack isWhite={true} title={'Xác minh tài khoản'} />
           <Tab.Navigator
@@ -38,6 +49,8 @@ const AccountVerificationView = (props) => {
             />
           </Tab.Navigator>
         </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
   );
 };
 

src/Screens/AccountVerification/Tab/GeneralInfor.js

@@ -28,6 +28,7 @@ const GeneralInfor = (props) => {
       />
 
       <TextMulti title={'Địa chỉ'} />
+      <View style={{height: 100}} />
     </View>
   );
 };

src/Screens/Authen/Authen.js

 import React from 'react';
-import {View, Text} from 'react-native';
+import {
+  View,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
 import HeaderAuthen from '../../components/Header/HeaderAuthen';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import {getFontXD} from '../../Config/Functions';
 import Login from './Login';
 import Registor from './Registor';
+import {ScrollView} from 'react-native-gesture-handler';
 
 const Tab = createMaterialTopTabNavigator();
-
 const Authen = (props) => {
   return (
+    <KeyboardAvoidingView
+      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1, backgroundColor: 'white'}}
+      keyboardVerticalOffset={-50}>
+      <ScrollView showsVerticalScrollIndicator={false}>
         <View style={{flex: 1}}>
           <HeaderAuthen />
           <View style={{flex: 1, backgroundColor: 'white'}}>
@@ -37,6 +49,8 @@ const Authen = (props) => {
             </Tab.Navigator>
           </View>
         </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
   );
 };
 

src/Screens/Authen/Login.js

 import React from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
 import InputIcon from '../../components/Input/InputIcon';
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import {useNavigation} from '@react-navigation/native';
 import {TABNAVIGATOR, FORGOTPASSWORD} from '../../routers/ScreenNames';
+
 const Login = (props) => {
   const {navigation} = props;
 
@@ -61,6 +70,7 @@ const Login = (props) => {
           </TouchableOpacity>
         </View>
       </View>
+      <View style={{height: 100}} />
     </View>
   );
 };

src/Screens/MethodPay/Item.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {getFontXD, HEIGHTXD, WIDTHXD, toPriceVnd} from '../../Config/Functions';
+import R from '../../assets/R';
+import Block from '../../components/Block';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <TouchableOpacity onPress={() => console.log('HEllo')}>
+      <View style={styles.container}>
+        <Block flex={1} row center padding={[10, 10]}>
+          <Image source={item.image} style={styles.imgIcon} />
+          <Block padding={[0, 10]}>
+            <Text style={styles.txtBig}>{item.title}</Text>
+            <Block space={'between'} margin={[10, 0, 0, 0]} row flex={1}>
+              <Block>
+                <Text style={styles.txtLeft}>Tien nap toi thieu</Text>
+                <Text style={styles.txtLeft}>Hoa hong</Text>
+                <Text style={styles.txtLeft}>Thoi gian</Text>
+              </Block>
+              <Block>
+                <Text style={styles.txtRight}>{item.minPay} USD</Text>
+                <Text style={styles.txtRight}>{item.rose} USD</Text>
+                <Text style={styles.txtRight}>{item.time}</Text>
+              </Block>
+            </Block>
+          </Block>
+        </Block>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Item);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    height: HEIGHTXD(320),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(220),
+    height: HEIGHTXD(220),
+    resizeMode: 'contain',
+  },
+  txtLeft: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    marginBottom: 5,
+  },
+  txtBig: {
+    fontSize: getFontXD(42),
+    color: '#00359C',
+  },
+  txtRight: {
+    fontSize: getFontXD(36),
+    fontWeight: 'bold',
+    marginBottom: 5,
+  },
+});

src/Screens/MethodPay/MethodPayView.js

 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, StyleSheet, FlatList} from 'react-native';
+import R from '../../assets/R';
+import HeaderBack from '../../components/Header/HeaderBack';
+import Item from './Item';
+
+const data = [
+  {
+    image: R.images.iconNganLuong,
+    title: 'Ngân lượng',
+    rose: 0,
+    time: 'Tức thời',
+    minPay: 5,
+    id: '1',
+  },
+  {
+    image: R.images.iconVisa,
+    title: 'Visa bank',
+    rose: 0,
+    time: 'Tức thời',
+    minPay: 1,
+    id: '2',
+  },
+  {
+    image: R.images.iconInternet,
+    title: 'Internet banking',
+    rose: 0,
+    time: 'Tức thời',
+    minPay: 5,
+    id: '3',
+  },
+  {
+    image: R.images.iconBitcoin,
+    title: 'Bitcoin',
+    rose: 0,
+    time: 'Tức thời',
+    minPay: 2,
+    id: '4',
+  },
+  {
+    image: R.images.iconSticpay,
+    title: 'Sticpay',
+    rose: 0,
+    time: 'Tức thời',
+    minPay: 1,
+    id: '5',
+  },
+  {
+    image: R.images.iconTether,
+    title: 'Tether',
+    rose: 0,
+    time: 'Tức thời',
+    minPay: 10,
+    id: '6',
+  },
+];
 
 const MethodPayView = (props) => {
   return (
-    <View>
-      <Text>MethodPayView screen</Text>
+    <View style={{flex: 1}}>
+      <HeaderBack title={'Cài đặt phương thức thanh toán'} />
+      <View style={{flex: 1}}>
+        <FlatList
+          keyExtractor={(item) => item.id}
+          showsVerticalScrollIndicator={false}
+          data={data}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      </View>
     </View>
   );
 };
 
+const styles = StyleSheet.create({});
+
 export default MethodPayView;

src/assets/images.js

@@ -42,6 +42,13 @@ const images = {
   iconEmail: require('./images/iconEmail1.png'),
   iconUser3: require('./images/iconUser3.png'),
   iconRight1: require('./images/iconRight1.png'),
+
+  iconNganLuong: require('./images/iconNganLuong.png'),
+  iconVisa: require('./images/iconVisa.png'),
+  iconInternet: require('./images/iconInternet.png'),
+  iconBitcoin: require('./images/iconBitcoin.png'),
+  iconSticpay: require('./images/iconSticpay.png'),
+  iconTether: require('./images/iconTether.png'),
 };
 
 export default images;

src/components/Header/HeaderAuthen.js

@@ -41,9 +41,8 @@ export default connect(mapStateToProps, {})(HeaderAuthen);
 
 const styles = StyleSheet.create({
   img: {
-    height: Platform.OS == 'ios' ? HEIGHTXD(750) : HEIGHTXD(920),
+    height: 260,
     width: '100%',
-
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'white',

src/components/Input/InputComponent.js

@@ -30,4 +30,4 @@ const InputComponent = (props) => {
   );
 };
 
-export default InputComponent;
+export default React.memo(InputComponent);

src/routers/StackNavigation.js

@@ -31,7 +31,12 @@ const Stack = createStackNavigator();
 
 function MyStack(props) {
   return (
-    <Stack.Navigator headerMode={'none'} initialRouteName={ScreenName.AUTHEN}>
+    <Stack.Navigator
+      screenOptions={{
+        headerStatusBarHeight: 0,
+      }}
+      headerMode={'none'}
+      initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen