Update Screen Profile

android/app/src/main/java/com/invest/MainApplication.java

@@ -4,6 +4,15 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
 import io.invertase.firebase.RNFirebasePackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;

android/settings.gradle

 rootProject.name = 'Invest'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../../../../../../opt/homebrew/lib/node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../../../../../../opt/homebrew/lib/node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-firebase'
 project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
 include ':react-native-vector-icons'

ios/Invest/AppDelegate.m

@@ -16,7 +16,7 @@
 #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
 #import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
 #import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
-#import <CallAppSDK/CallAppInterface.h>
+//#import <CallAppSDK/CallAppInterface.h>
 
 static void InitializeFlipper(UIApplication *application) {
   FlipperClient *client = [FlipperClient sharedClient];
@@ -53,7 +53,7 @@ static void InitializeFlipper(UIApplication *application) {
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
   
-  [CallAppInterface setHomeViewController:rootViewController];
+//  [CallAppInterface setHomeViewController:rootViewController];
   return YES;
 }
 

ios/Podfile

@@ -85,6 +85,14 @@ target 'Invest' do
  
 
 
+
+
+
+
+
+
+
+
   target 'InvestTests' do
     inherit! :complete
     # Pods for testing

ios/Podfile.lock

@@ -653,6 +653,6 @@ SPEC CHECKSUMS:
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 1b7b16492d91a4bb75d7a167904640eb35cf5e3c
+PODFILE CHECKSUM: 97e516ae5ee9da4f8c41735d6e9401f7e3b3844b
 
 COCOAPODS: 1.10.1

package.json

@@ -24,6 +24,7 @@
     "react-native": "0.62.2",
     "react-native-confirmation-code-field": "^6.5.1",
     "react-native-datepicker": "^1.7.2",
+    "react-native-elements": "^3.3.1",
     "react-native-firebase": "^5.6.0",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-image-crop-picker": "^0.36.0",
@@ -35,7 +36,7 @@
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.17.1",
     "react-native-tab-view": "^2.15.2",
-    "react-native-vector-icons": "^8.0.0",
+    "react-native-vector-icons": "^8.1.0",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3"

src/Screens/Profile/Profile.js

+import React from 'react';
+
+import ProfileView from './ProfileView';
+
+const Profile = (props) => {
+  return <ProfileView />;
+};
+
+export default Profile;
+  
\ No newline at end of file

src/Screens/Profile/ProfileView.js

+import React from 'react';
+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';
+import Profile from './Tab/Profile';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+import {getFontXD} from '../../Config/Functions';
+const Tab = createMaterialTopTabNavigator();
+
+const ProfileView = (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
+            initialRouteName="GeneralInfor"
+            tabBarOptions={{
+              inactiveTintColor: '#929292',
+              activeTintColor: '#1473E6',
+              labelStyle: {fontSize: getFontXD(36)},
+              style: {backgroundColor: 'white', marginHorizontal: 30},
+            }}>
+            <Tab.Screen
+              name="GeneralInfor"
+              component={GeneralInfor}
+              options={{tabBarLabel: 'Thông tin chung'}}
+            />
+            <Tab.Screen
+              name="Profile"
+              component={Profile}
+              options={{tabBarLabel: 'Tài khoản CQG'}}
+            />
+          </Tab.Navigator>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default ProfileView;

src/Screens/Profile/Tab/BankInfor.js

+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 PickerImg from '../../../components/Picker/PickerImg';
+import PickerDate from '../../../components/Picker/PickerDate';
+import R from '../../../assets/R';
+import Button from '../../../components/Button';
+
+const BankInfor = (props) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 10,
+        paddingTop: 10,
+      }}>
+      <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',
+        }}>
+        <PickerImg title={'Ảnh mặt trước CMND'} />
+        <PickerImg title={'Ảnh mặt sau CMND'} />
+        <PickerImg title={'Ảnh chữ ký'} />
+      </View>
+      <View style={styles.btnSend}>
+        <Button title={'Xác minh'} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  btnSend: {
+    width: '100%',
+    marginTop: 50,
+  },
+});
+
+export default BankInfor;

src/Screens/Profile/Tab/GeneralInfor.js

+import React, {useState} from 'react';
+import {View, Text, TextInput, TouchableOpacity, StyleSheet, Touchable, TouchableOpacityBase} from 'react-native';
+import R from '../../../assets/R';
+
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
+import PickerItem from '../../../components/Picker/PickerItem';
+import PickerDate from '../../../components/Picker/PickerDate';
+import PickerImg from '../../../components/Picker/PickerImg';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+Ionicons.loadFont()
+
+const GeneralInfor = (props) => {
+  const [Select, setSelect] = useState("ABC");
+
+  return (
+    <View style={styles.container}>
+      <TextField title={'Họ và tên'} onChangeText={(val) => console.log(val)} />
+      <TextField
+        title={'Điện thoại'}
+        onChangeText={(val) => console.log(val)}
+      />
+
+      <TextField
+        title={'Email'}
+        onChangeText={(val) => console.log(val)}
+      />
+
+      <TextInput
+        style={styles.customTxt}
+        onChangeText={(val) => console.log(val)} 
+        placeholder="0000" 
+      />
+
+      <View style={styles.status}>
+        <TouchableOpacity style={{flexDirection: 'row'}}>
+          <Icon name="add-circle" />
+          <Text style={{color: "#0B2031", paddingLeft: 5}}>Trạng thái</Text>
+        </TouchableOpacity>
+      
+      <Text style={{color: "#4FCD8D"}}>Đã xác minh</Text>
+      </View>
+
+      <TextField 
+        title={'Số tài khoản ngân hàng'} 
+        onChangeText={(val) => console.log(val)} 
+        placeHolder="Nhập số tài khoản ngân hàng" 
+      />
+
+      <PickerItem
+        value={Select}
+        onValueChange={(val) => setSelect(val)}
+        title={'Tên ngân hàng'}
+        data={{}}
+      />
+
+      <View style={styles.footer}>
+        <TouchableOpacity
+          onPress={() => console.log('Hello')}
+          style={styles.btn}>
+          <Text style={styles.txtBtn}>Cập nhật</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1, 
+    paddingHorizontal: 10, 
+    paddingVertical: 20, 
+    marginHorizontal: 20
+  },
+  customTxt: {
+      height: HEIGHTXD(110),
+      color: 'black',
+      borderRadius: 7,
+      borderWidth: 0.7,
+      borderColor: '#DBDBDB',
+      fontSize: getFontXD(42),
+      paddingVertical: 5,
+      paddingHorizontal: 10,
+      backgroundColor: 'white',
+      shadowColor: '#AFA9A9',
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 1.84,
+      elevation: 1,
+      marginTop: 50,
+      marginBottom: 20
+  },
+  status: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    margin: 5
+  },
+  footer: {
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btn: {
+    width: WIDTHXD(521),
+    height: HEIGHTXD(120),
+    borderRadius: 15,
+    backgroundColor: '#1C6AF6',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 100
+  },
+  txtBtn: {
+    color: R.colors.white,
+    fontSize: getFontXD(52),
+    textTransform: 'uppercase',
+  },
+});
+
+export default GeneralInfor;

src/Screens/Profile/Tab/Profile.js

+import React from 'react';
+import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
+import PickerImg from '../../../components/Picker/PickerImg';
+import R from '../../../assets/R';
+const Profile = (props) => {
+  return (
+    <View>
+      <Text>Profile screen</Text>
+      <TouchableOpacity
+        onPress={() => {
+          props.navigation.navigate('BankInfor');
+        }}
+        style={styles.btnNext}>
+        <Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  btnNext: {
+    borderRadius: 30,
+    backgroundColor: '#1473E6',
+    width: 50,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 20,
+    alignSelf: 'flex-end',
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 1.84,
+  },
+});
+
+export default Profile;

src/components/Header/Drawer.js

@@ -11,6 +11,7 @@ import {
   SETTING,
 } from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
+Ionicons.loadFont()
 
 const menus = [
   {

src/components/Header/Header.js

@@ -16,6 +16,7 @@ import Block from '../Block';
 import {useNavigation} from '@react-navigation/native';
 import ModalOption from './ModalOption';
 import SnackBar from '../SnackBar';
+Ionicons.loadFont()
 
 const HeaderHome = (props) => {
   const {title} = props;

src/components/Header/HeaderSB.js

@@ -21,6 +21,7 @@ import {HEIGHTXD} from '../../Config/Functions';
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import {useNavigation} from '@react-navigation/native';
+Ionicons.loadFont()
 
 const HeaderSearch = (props) => {
   const {title, isWhite} = props;

src/components/Header/HeaderSearch.js

@@ -21,6 +21,8 @@ import {HEIGHTXD} from '../../Config/Functions';
 import Modal from 'react-native-modal';
 import Drawer from './Drawer';
 import Icon from 'react-native-vector-icons/Ionicons';
+Ionicons.loadFont()
+
 const HeaderSearch = (props) => {
   const {title, isWhite} = props;
 

src/components/Header/HeaderTitle.js

@@ -13,6 +13,8 @@ import LinearGradient from 'react-native-linear-gradient';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {useNavigation} from '@react-navigation/native';
 import  SnackBar from '../SnackBar'
+Ionicons.loadFont()
+
 const HeaderHome = (props) => {
   const {title, back} = props;
 

src/components/Input/TextField.js

@@ -4,7 +4,7 @@ import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
 import R from '../../assets/R';
 
 const TextField = (props) => {
-  const {title, onChangeText, maxLength} = props;
+  const {title, onChangeText, maxLength, placeHolder} = props;
 
   return (
     <View style={{marginVertical: 5}}>
@@ -12,13 +12,14 @@ const TextField = (props) => {
         style={{
           fontSize: getFontXD(42),
           color: R.colors.color777,
-          marginBottom: 5,
+          marginVertical: 5,
         }}>
         {title ? title : ''}
       </Text>
       <TextInput
         maxLength={maxLength}
         placeholderTextColor={R.colors.placeHolder}
+        placeholder={placeHolder}
         onChangeText={(val) => onChangeText(val)}
         style={{
           height: HEIGHTXD(109),

src/components/Picker/PickerItem.js

@@ -97,6 +97,7 @@ export default class PickerItem extends Component {
       onValueChange,
       containerStyle,
       height,
+      title,
       value,
       defaultValue,
       data,
@@ -109,6 +110,14 @@ export default class PickerItem extends Component {
     } = this.props;
     return (
       <View style={styles.cell}>
+        <Text
+          style={{
+            fontSize: getFontXD(42),
+            color: R.colors.color777,
+            marginBottom: 5,
+          }}>
+          {title}
+        </Text>
         <TouchableOpacity
           disabled={disabled}
           ref={(button) => {

src/routers/ScreenNames.js

@@ -37,3 +37,5 @@ export const HISTORY = 'HISTORY';
 export const CONFIRMOTP = 'CONFIRMOTP';
 export const CONFIRMEMAIL = 'CONFIRMEMAIL';
 export const NEWPASSWORD = 'NEWPASSWORD';
+
+export const PROFILE = 'PROFILE';

src/routers/StackNavigation.js

@@ -29,6 +29,7 @@ import ConfirmEmail from '../Screens/Authen/ConfirmEmail';
 import NewPassword from '../Screens/Authen/NewPassword';
 
 import * as ScreenName from './ScreenNames';
+import Profile from '../Screens/Profile/Profile';
 
 const Stack = createStackNavigator();
 
@@ -39,7 +40,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.NEWPASSWORD}>
+      initialRouteName={ScreenName.PROFILE}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen
@@ -50,6 +51,8 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.CONFIRMOTP} component={ConfirmOTP} />
       <Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassword} />
 
+      <Stack.Screen name={ScreenName.PROFILE} component={Profile} />
+
       <Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} />
       <Stack.Screen name={ScreenName.AUTHEN} component={Authen} />
       <Stack.Screen name={ScreenName.METHODPAY} component={MethodPay} />

src/routers/TabNavigation.js

@@ -12,6 +12,7 @@ import Account from '../Screens/Account/Account';
 import Exchange from '../Screens/Exchange/Exchange';
 
 const Tab = createBottomTabNavigator();
+Ionicons.loadFont()
 
 const PayScreenComponent = () => {
   return null;