edit ui

src/Screens/AccountVerification/AccountVerification.js

-import React from 'react';
+import React, {useState} from 'react';
 
 import AccountVerificationView from './AccountVerificationView';
 

src/Screens/AccountVerification/AccountVerificationView.js

-import React from 'react';
+import React, {useState} from 'react';
 import {
   View,
   Text,

src/Screens/AccountVerification/Tab/BankInfor.js

@@ -2,12 +2,14 @@ import React from 'react';
 import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
 import TextField from '../../../components/Input/TextField';
 import TextMulti from '../../../components/Input/TextMulti';
-import PickerImgUni from '../../../components/Picker/PickerImgUni';
+
 import PickerDate from '../../../components/Picker/PickerDate';
 import R from '../../../assets/R';
 import Button from '../../../components/Button';
 
 const BankInfor = (props) => {
+  console.log(props.route.params);
+
   return (
     <View
       style={{
@@ -18,16 +20,7 @@ const BankInfor = (props) => {
       <TextField title={'Loại thẻ'} onChangeText={(val) => console.log(val)} />
       <TextField title={'Số thẻ'} onChangeText={(val) => console.log(val)} />
       <PickerDate title={'Ngày cấp'} />
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          flexWrap: 'wrap',
-        }}>
-        <PickerImgUni title={'Ảnh mặt trước CMND'} />
-        <PickerImgUni title={'Ảnh mặt sau CMND'} />
-        <PickerImgUni title={'Ảnh chữ ký'} />
-      </View>
+
       <View style={styles.btnSend}>
         <Button title={'Xác minh'} />
       </View>

src/Screens/AccountVerification/Tab/GeneralInfor.js

 import React, {useState} from 'react';
-import {View, Text, Image, TouchableOpacity, StyleSheet} from 'react-native';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from 'react-native';
 import R from '../../../assets/R';
 
 import TextField from '../../../components/Input/TextField';
@@ -7,28 +14,55 @@ import TextMulti from '../../../components/Input/TextMulti';
 import PickerDate from '../../../components/Picker/PickerDate';
 import PickerImg from '../../../components/Picker/PickerImg';
 
+import {checkFormatArray} from '../../../Config/Functions';
+
 const GeneralInfor = (props) => {
+  const [email, setEmail] = useState('');
+  const [sponsorID, setSponsorID] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [adress, setAdress] = useState('');
   const [birth, setBirth] = useState(new Date());
 
+  const onNextPress = () => {
+    const titles = ['email', 'tên', 'họ', 'số điện thoại', 'địa chỉ'];
+    const index = checkFormatArray([email, lastName, firstName, phone, adress]);
+    console.log(props);
+    if (index === true) {
+      props.navigation.navigate('Profile', {
+        email,
+        lastName,
+        firstName,
+        phone,
+        adress,
+        sponsorID,
+        birth,
+      });
+    } else {
+      Alert.alert('Vui lòng điền ' + titles[index]);
+    }
+  };
+
   return (
     <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
-      <TextField title={'User name'} onChangeText={(val) => console.log(val)} />
+      <TextField title={'Email'} onChangeText={(val) => setEmail(val)} />
       <TextField
         title={'Sponsor ID'}
-        onChangeText={(val) => console.log(val)}
+        onChangeText={(val) => setSponsorID(val)}
       />
       <View style={{flexDirection: 'row'}}>
         <View style={{flex: 1}}>
-          <TextField title={'Tên'} onChangeText={(val) => console.log(val)} />
+          <TextField title={'Tên'} onChangeText={(val) => setLastName(val)} />
         </View>
         <View style={{width: 20}} />
         <View style={{flex: 1}}>
-          <TextField title={'Họ'} onChangeText={(val) => console.log(val)} />
+          <TextField title={'Họ'} onChangeText={(val) => setFirstName(val)} />
         </View>
       </View>
       <TextField
         title={'Số điện thoại'}
-        onChangeText={(val) => console.log(val)}
+        onChangeText={(val) => setPhone(val)}
       />
       <PickerDate
         value={birth}
@@ -36,12 +70,8 @@ const GeneralInfor = (props) => {
         title={'Ngày sinh'}
       />
 
-      <TextMulti title={'Địa chỉ'} onChangeText={(val) => console.log(val)} />
-      <TouchableOpacity
-        onPress={() => {
-          props.navigation.navigate('Profile');
-        }}
-        style={styles.btnNext}>
+      <TextMulti title={'Địa chỉ'} onChangeText={(val) => setAdress(val)} />
+      <TouchableOpacity onPress={onNextPress} style={styles.btnNext}>
         <Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
       </TouchableOpacity>
       <View style={{height: 100}} />

src/Screens/AccountVerification/Tab/Profile.js

-import React from 'react';
-import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
-import PickerImg from '../../../components/Picker/PickerImg';
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Alert,
+} from 'react-native';
+import PickerImgUni from '../../../components/Picker/PickerImgUni';
 import R from '../../../assets/R';
+
+import {checkFormatArray} from '../../../Config/Functions';
+
 const Profile = (props) => {
+  const [urlFont, setUrlFont] = useState('');
+  const [urlBack, setUrlBack] = useState('');
+  const [urlSign, setUrlSign] = useState('');
+
+  const onNextPress = () => {
+    const titles = ['CNND mặt trước', 'CMND mặt sau', 'chữ ký'];
+    const index = checkFormatArray([urlFont, urlBack, urlSign]);
+
+    if (index === true) {
+      props.navigation.navigate('BankInfor', {
+        urlFont,
+        urlBack,
+        urlSign,
+        ...props.route.params,
+      });
+    } else {
+      Alert.alert('Vui lòng thêm ảnh ' + titles[index]);
+    }
+  };
+
   return (
-    <View>
-      <Text>Profile screen</Text>
-      <TouchableOpacity
-        onPress={() => {
-          props.navigation.navigate('BankInfor');
-        }}
-        style={styles.btnNext}>
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 10,
+        paddingTop: 10,
+      }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }}>
+        <PickerImgUni
+          onSelectImg={(path) => setUrlFont(path)}
+          title={'Ảnh mặt trước CMND'}
+        />
+        <PickerImgUni
+          onSelectImg={(path) => setUrlBack(path)}
+          title={'Ảnh mặt sau CMND'}
+        />
+        <PickerImgUni
+          onSelectImg={(path) => setUrlSign(path)}
+          title={'Ảnh chữ ký'}
+        />
+      </View>
+      <TouchableOpacity onPress={onNextPress} style={styles.btnNext}>
         <Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
       </TouchableOpacity>
     </View>

src/assets/images.js

@@ -55,6 +55,7 @@ const images = {
 
   tradding: require('./images/tradding.png'),
   noti: require('./images/noti1.png'),
+  iconCopy: require('./images/iconCopy.png'),
 };
 
 export default images;

src/components/Header/HeaderHome.js

@@ -34,16 +34,26 @@ const HeaderHome = (props) => {
       </ImageBackground>
       <View style={{justifyContent: 'center', alignItems: 'center'}}>
         <View style={styles.containerTop}>
-          <View
-            style={{
-              flex: 1,
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}>
+          <View style={styles.containerInfor}>
             <Image source={R.images.avartar} style={styles.imgAvatar} />
+            <View style={styles.wrapRight}>
+              <Text style={styles.txtName}>Vu Khac Minh</Text>
+              <View style={styles.row1}>
+                <Text style={styles.txtlink}>sponsorIDlink</Text>
+                <TouchableOpacity onPress={() => console.log('Hello')}>
+                  <Image
+                    source={R.images.iconCopy}
+                    style={styles.imgIconCopy}
+                  />
+                </TouchableOpacity>
+              </View>
+
+              <View style={styles.row}>
                 <Text style={styles.txtMoney}> {toPriceVnd(1000000)}</Text>
                 <Text style={styles.txtTitle}> VNĐ</Text>
               </View>
+            </View>
+          </View>
           <View style={styles.containerMenu}>
             <TouchableOpacity
               onPress={() => navigate.navigate(CHOOSEMETHOD)}
@@ -96,10 +106,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   containerTop: {
-    padding: 15,
     height: HEIGHTXD(856),
     width: '90%',
-    backgroundColor: R.colors.white,
+    backgroundColor: 'white',
     borderRadius: 10,
     shadowColor: '#000',
     shadowOffset: {
@@ -115,7 +124,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     flexDirection: 'row',
-    marginTop: 10,
+    padding: 10,
   },
   wraper: {
     justifyContent: 'center',
@@ -127,17 +136,31 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     resizeMode: 'contain',
   },
+  imgIconCopy: {
+    width: WIDTHXD(134),
+    height: HEIGHTXD(134),
+
+    resizeMode: 'contain',
+  },
   txt: {
     fontSize: getFontXD(36),
     color: R.colors.txtMain,
   },
+  txtName: {
+    fontSize: getFontXD(52),
+    color: '#00359C',
+  },
+  txtlink: {
+    fontSize: getFontXD(42),
+    color: '#A2A2A2',
+  },
   imgAvatar: {
-    width: WIDTHXD(200),
-    height: WIDTHXD(200),
-    borderRadius: WIDTHXD(110),
+    width: WIDTHXD(240),
+    height: WIDTHXD(240),
+    borderRadius: WIDTHXD(120),
   },
   txtMoney: {
-    fontSize: getFontXD(52),
+    fontSize: getFontXD(72),
     color: '#FFB721',
     marginVertical: 5,
     fontWeight: 'bold',
@@ -146,5 +169,30 @@ const styles = StyleSheet.create({
     fontSize: getFontXD(42),
     color: '#A2A2A2',
     fontWeight: 'bold',
+    marginTop: 5,
+    marginLeft: 5,
+  },
+  wrapRight: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  containerInfor: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EDEDF1',
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 5,
+  },
+  row1: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
 });

src/components/Picker/PickerImgUni.js

@@ -23,7 +23,7 @@ const options = {
 };
 
 const PickerImgUni = (props) => {
-  const {title, height, width} = props;
+  const {title, height, width, onSelectImg} = props;
 
   const [isModalVisible, setModalVisible] = useState(false);
   const [urlImg, setUrlImg] = useState('');
@@ -36,6 +36,7 @@ const PickerImgUni = (props) => {
     }).then((image) => {
       setModalVisible(false);
       setUrlImg(image.path);
+      onSelectImg(image.path);
     });
   };
 
@@ -47,6 +48,7 @@ const PickerImgUni = (props) => {
     }).then((image) => {
       setModalVisible(false);
       setUrlImg(image.path);
+      onSelectImg(image.path);
     });
   };