done ui login

android/app/build.gradle

@@ -134,6 +134,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        vectorDrawables.useSupportLibrary = true
     }
     splits {
         abi {

android/app/src/debug/AndroidManifest.xml

-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
-</manifest>

android/app/src/debug/java/com/invest/ReactNativeFlipper.java

-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
- * directory of this source tree.
- */
-package com.invest;
-
-import android.content.Context;
-import com.facebook.flipper.android.AndroidFlipperClient;
-import com.facebook.flipper.android.utils.FlipperUtils;
-import com.facebook.flipper.core.FlipperClient;
-import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
-import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
-import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
-import com.facebook.flipper.plugins.inspector.DescriptorMapping;
-import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
-import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
-import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
-import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
-import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.network.NetworkingModule;
-import okhttp3.OkHttpClient;
-
-public class ReactNativeFlipper {
-  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    if (FlipperUtils.shouldEnableFlipper(context)) {
-      final FlipperClient client = AndroidFlipperClient.getInstance(context);
-
-      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
-      client.addPlugin(new ReactFlipperPlugin());
-      client.addPlugin(new DatabasesFlipperPlugin(context));
-      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
-      client.addPlugin(CrashReporterPlugin.getInstance());
-
-      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
-      NetworkingModule.setCustomClientBuilder(
-          new NetworkingModule.CustomClientBuilder() {
-            @Override
-            public void apply(OkHttpClient.Builder builder) {
-              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
-            }
-          });
-      client.addPlugin(networkFlipperPlugin);
-      client.start();
-
-      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
-      // Hence we run if after all native modules have been initialized
-      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-      if (reactContext == null) {
-        reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
-              @Override
-              public void onReactContextInitialized(ReactContext reactContext) {
-                reactInstanceManager.removeReactInstanceEventListener(this);
-                reactContext.runOnNativeModulesQueueThread(
-                    new Runnable() {
-                      @Override
-                      public void run() {
-                        client.addPlugin(new FrescoFlipperPlugin());
-                      }
-                    });
-              }
-            });
-      } else {
-        client.addPlugin(new FrescoFlipperPlugin());
-      }
-    }
-  }
-}

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
   package="com.invest">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA"/>
+
 
     <application
       android:name=".MainApplication"
@@ -9,6 +11,7 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+        android:usesCleartextTraffic="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

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

@@ -4,8 +4,6 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
-import com.imagepicker.ImagePickerPackage;
-import com.imagepicker.ImagePickerPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

android/build.gradle

@@ -3,7 +3,7 @@
 buildscript {
     ext {
         buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
+        minSdkVersion = 21
         compileSdkVersion = 28
         targetSdkVersion = 28
     }
@@ -12,7 +12,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.2")
+        classpath("com.android.tools.build:gradle:4.0.1")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -30,6 +30,8 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
+        // ADD THIS
+        maven { url 'https://maven.google.com' }
 
         google()
         jcenter()

android/gradle/wrapper/gradle-wrapper.properties

+#Mon Mar 01 17:26:16 ICT 2021
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip

android/settings.gradle

 rootProject.name = 'Invest'
-include ':react-native-image-picker'
-project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
-include ':react-native-image-picker'
-project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/Invest.xcodeproj/project.pbxproj

@@ -292,7 +292,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */,
 				6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
-				286371081E0C0431FA85D270 /* [CP] Copy Pods Resources */,
+				4324640B70CAE4CFDFE62104 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -476,7 +476,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
- 
 		2986F52A2CA5D45A960EE3D4 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -513,6 +512,7 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
+	 
 		50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

ios/Podfile

@@ -79,7 +79,7 @@ target 'Invest' do
 
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
 
-  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
+ 
 
   target 'InvestTests' do
     inherit! :complete

ios/Podfile.lock

@@ -233,8 +233,6 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
   - React-jsinspector (0.62.2)
-  - react-native-image-picker (3.2.1):
-    - React-Core
   - react-native-safe-area-context (3.1.9):
     - React-Core
   - React-RCTActionSheet (0.62.2):
@@ -359,7 +357,6 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
-  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -428,8 +425,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
-  react-native-image-picker:
-    :path: "../node_modules/react-native-image-picker"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
@@ -496,7 +491,6 @@ SPEC CHECKSUMS:
   React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
-  react-native-image-picker: 64d12e81f3d9dad0af107fe6536b295d51932ec0
   react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
   React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
@@ -519,6 +513,6 @@ SPEC CHECKSUMS:
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: b424f8fa2cc5573b0757c409fab556af49e18736
+PODFILE CHECKSUM: 3decc4421a01aa5339d806c9e8d5a81477a9690f
 
 COCOAPODS: 1.10.1

package.json

@@ -24,11 +24,9 @@
     "react-native-datepicker": "^1.7.2",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-image-crop-picker": "^0.36.0",
-    "react-native-image-picker": "^3.2.1",
     "react-native-indicators": "^0.17.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-modal": "^11.7.0",
-    "react-native-modal-datetime-picker": "^8.7.1",
     "react-native-modal-dropdown": "^1.0.0",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",

src/Screens/AccountVerification/Tab/BankInfor.js

 import React from 'react';
 import {View, Text} from 'react-native';
-import TextField from '../../../components/TextField';
-import TextMulti from '../../../components/TextMulti';
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
 import PickerImg from '../../../components/Picker/PickerImg';
 import PickerDate from '../../../components/Picker/PickerDate';
 

src/Screens/AccountVerification/Tab/GeneralInfor.js

 import React, {useState} from 'react';
 import {View, Text} from 'react-native';
-import TextField from '../../../components/TextField';
-import TextMulti from '../../../components/TextMulti';
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
 import PickerDate from '../../../components/Picker/PickerDate';
 import PickerImg from '../../../components/Picker/PickerImg';
 const GeneralInfor = (props) => {

src/Screens/Action/Deposit/DepositView.js

 import React from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
-import TextField from '../../../components/TextField';
-import TextMulti from '../../../components/TextMulti';
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
 import Button from '../../../components/Button';
 import {HEIGHTXD} from '../../../Config/Functions';
 

src/Screens/Action/Transfer/TransferView.js

 import React from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
-import TextField from '../../../components/TextField';
-import TextMulti from '../../../components/TextMulti';
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
 import Button from '../../../components/Button';
 import {HEIGHTXD} from '../../../Config/Functions';
 const TransferView = (props) => {

src/Screens/Action/Withdraw/WithdrawView.js

 import React from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
-import TextField from '../../../components/TextField';
-import TextMulti from '../../../components/TextMulti';
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
 import Button from '../../../components/Button';
 import {HEIGHTXD} from '../../../Config/Functions';
 const WithdrawView = (props) => {

src/Screens/Authen/Authen.js

+import React from 'react';
+import {View, Text} 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';
+
+const Tab = createMaterialTopTabNavigator();
+
+const Authen = (props) => {
+  return (
+    <View style={{flex: 1}}>
+      <HeaderAuthen />
+      <View style={{flex: 1, backgroundColor: 'white'}}>
+        <Tab.Navigator
+          initialRouteName="Login"
+          tabBarOptions={{
+            activeTintColor: '#0045C8',
+            labelStyle: {fontSize: getFontXD(42), fontWeight: '700'},
+            style: {
+              justifyContent: 'center',
+              marginHorizontal: 40,
+              elevation: 0,
+            },
+          }}>
+          <Tab.Screen
+            name="LOGIN"
+            component={Login}
+            options={{tabBarLabel: 'Đăng nhập'}}
+          />
+          <Tab.Screen
+            name="REGISTOR"
+            component={Registor}
+            options={{tabBarLabel: 'Đăng ký'}}
+          />
+        </Tab.Navigator>
+      </View>
+    </View>
+  );
+};
+
+export default Authen;

src/Screens/Authen/ForgotPassword.js

+import React, {Component} from 'react';
+import {View, Text} from 'react-native';
+
+const ForgotPassWord = (props) => {
+  return (
+    <View>
+      <Text>Forgot password view</Text>
+    </View>
+  );
+};
+
+export default ForgotPassWord;

src/Screens/Authen/Login.js

+import React from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity} 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;
+
+  const navigate = useNavigation();
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 20,
+        paddingTop: 20,
+        backgroundColor: 'white',
+      }}>
+      <InputIcon
+        icon={R.images.iconUser3}
+        title={'Tên đăng nhập'}
+        placeholder={'Nhập tên đăng nhập'}
+      />
+      <InputIcon
+        icon={R.images.iconLock}
+        title={'Mật khẩu'}
+        placeholder={'Nhập mật khẩu'}
+      />
+      <TouchableOpacity
+        onPress={() => navigate.navigate(FORGOTPASSWORD)}
+        style={styles.forgotView}>
+        <Text style={styles.txtTitle}>Quên mật khẩu ?</Text>
+      </TouchableOpacity>
+
+      <View
+        style={{
+          marginVertical: 20,
+          alignItems: 'center',
+        }}>
+        <TouchableOpacity
+          onPress={() =>
+            navigate.reset({
+              index: 1,
+              routes: [{name: TABNAVIGATOR}],
+            })
+          }
+          style={styles.wrapLogin}>
+          <Text style={styles.txtLogin}>Đăng nhập</Text>
+          <Image source={R.images.iconRight1} style={styles.imgIcon} />
+        </TouchableOpacity>
+
+        <View style={styles.row}>
+          <Text style={styles.txtTitle}>Bạn chưa có tài khoản?</Text>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate('REGISTOR');
+            }}>
+            <Text style={styles.txtRegistor}>Đăng ký</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  forgotView: {
+    marginVertical: 20,
+    alignItems: 'flex-end',
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: '#929292',
+  },
+  txtLogin: {
+    fontSize: getFontXD(48),
+    color: 'white',
+    fontWeight: '700',
+  },
+  wrapLogin: {
+    width: WIDTHXD(512),
+    height: HEIGHTXD(150),
+    backgroundColor: '#1C6AF6',
+    borderRadius: 30,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imgIcon: {
+    width: WIDTHXD(72),
+    height: HEIGHTXD(72),
+    marginLeft: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    marginTop: 30,
+  },
+  txtRegistor: {
+    fontSize: getFontXD(42),
+    color: '#1473E6',
+  },
+});
+
+export default Login;

src/Screens/Authen/Registor.js

+import React from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import InputIcon from '../../components/Input/InputIcon';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import R from '../../assets/R';
+
+const Registor = (props) => {
+  const {navigation} = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 20,
+        paddingTop: 20,
+        backgroundColor: 'white',
+      }}>
+      <InputIcon
+        icon={R.images.iconEmail}
+        title={'Email đăng ký'}
+        placeholder={'Nhập email'}
+      />
+      <InputIcon
+        icon={R.images.iconPhone3}
+        title={'Số điện thoại đăng ký'}
+        placeholder={'Nhập số điện thoại'}
+      />
+      <InputIcon
+        icon={R.images.iconLock}
+        title={'Mật khẩu'}
+        placeholder={'Nhập mật khẩu'}
+      />
+      <InputIcon
+        icon={R.images.iconLock}
+        title={'Nhập lại mật khẩu'}
+        placeholder={'Nhập mật khẩu'}
+      />
+
+      <View
+        style={{
+          marginVertical: 20,
+
+          alignItems: 'center',
+        }}>
+        <View style={styles.wrapLogin}>
+          <Text style={styles.txtLogin}>Đăng ký</Text>
+          <Image source={R.images.iconRight1} style={styles.imgIcon} />
+        </View>
+
+        <View style={styles.row}>
+          <Text style={styles.txtTitle}>Bạn đã có tài khoản?</Text>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate('LOGIN');
+            }}>
+            <Text style={styles.txtRegistor}>Đăng nhập</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  forgotView: {
+    marginVertical: 20,
+    alignItems: 'flex-end',
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: '#929292',
+  },
+  txtLogin: {
+    fontSize: getFontXD(48),
+    color: 'white',
+    fontWeight: '700',
+  },
+  wrapLogin: {
+    width: WIDTHXD(512),
+    height: HEIGHTXD(150),
+    backgroundColor: '#1C6AF6',
+    borderRadius: 30,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imgIcon: {
+    width: WIDTHXD(72),
+    height: HEIGHTXD(72),
+    marginLeft: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    marginTop: 30,
+  },
+  txtRegistor: {
+    fontSize: getFontXD(42),
+    color: '#1473E6',
+  },
+});
+
+export default Registor;

src/assets/images.js

@@ -35,6 +35,13 @@ const images = {
   iconCalendar: require('./images/iconBack.png'),
   iconImg: require('./images/iconImg.png'),
   iconCamera: require('./images/iconCamera.png'),
+  bgAuthen: require('./images/bgAuthen.png'),
+
+  iconLock: require('./images/iconLock.png'),
+  iconPhone3: require('./images/iconPhone3.png'),
+  iconEmail: require('./images/iconEmail1.png'),
+  iconUser3: require('./images/iconUser3.png'),
+  iconRight1: require('./images/iconRight1.png'),
 };
 
 export default images;

src/components/Header/HeaderAuthen.js

+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StatusBar,
+  StyleSheet,
+  SafeAreaView,
+  ImageBackground,
+  TouchableOpacity,
+  Platform,
+  Button,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import R from '../../assets/R';
+import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
+import LinearGradient from 'react-native-linear-gradient';
+import {connect} from 'react-redux';
+import {HEIGHTXD} from '../../Config/Functions';
+import {useNavigation} from '@react-navigation/native';
+const HeaderAuthen = (props) => {
+  const {title, isWhite} = props;
+  const navigate = useNavigation();
+  return (
+    <ImageBackground style={styles.img} source={R.images.bgAuthen}>
+      <StatusBar backgroundColor="transparent" translucent={true} />
+      <View style={styles.headerContainer}>
+        <View />
+      </View>
+    </ImageBackground>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(HeaderAuthen);
+
+const styles = StyleSheet.create({
+  img: {
+    height: Platform.OS == 'ios' ? HEIGHTXD(750) : HEIGHTXD(920),
+    width: '100%',
+
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+  headerContainer: {
+    height: 55,
+
+    width: '100%',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+    justifyContent: 'space-between',
+  },
+  imgIcon: {
+    width: 30,
+    height: 30,
+  },
+  txtTitle: {
+    fontSize: getFontXD(52),
+    color: R.colors.white,
+    fontWeight: 'bold',
+  },
+  container: {
+    backgroundColor: 'white',
+    height: '100%',
+    width: 300,
+    borderRadius: 20,
+  },
+});

src/components/Input/InputComponent.js

+import React from 'react';
+import {View, Text, TextInput} from 'react-native';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../../Config/Functions';
+import R from '../../../assets/R';
+
+const InputComponent = (props) => {
+  const {title, numberLine} = props;
+
+  return (
+    <View style={{marginVertical: 5}}>
+      <Text
+        style={{
+          fontSize: getFontXD(42),
+          color: R.colors.color777,
+          marginBottom: 5,
+        }}>
+        {title ? title : ''}
+      </Text>
+      <TextInput
+        style={{
+          height: HEIGHTXD(89),
+          borderRadius: 7,
+          borderWidth: 0.7,
+          borderColor: R.colors.borderGray,
+          fontSize: getFontXD(42),
+          padding: 5,
+        }}
+      />
+    </View>
+  );
+};
+
+export default InputComponent;

src/components/Input/InputIcon.js

+import React, {Component} from 'react';
+import {View, Text, TextInput, StyleSheet, Image} from 'react-native';
+import R from '../../assets/R';
+import {WIDTHXD, HEIGHTXD, getFontXD} from '../../Config/Functions';
+
+const InputIcon = (props) => {
+  const {title, placeholder, icon} = props;
+  const {wrapLeft, wrapRight, container, iconImg, txtInput} = styles;
+  return (
+    <View style={container}>
+      <Image source={icon} style={iconImg} />
+      <View style={wrapRight}>
+        <Text>{title}</Text>
+        <TextInput style={txtInput} placeholder={placeholder} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 20,
+    height: HEIGHTXD(149),
+  },
+
+  wrapRight: {
+    flex: 1,
+  },
+  iconImg: {
+    width: WIDTHXD(140),
+    height: HEIGHTXD(140),
+    resizeMode: 'contain',
+    marginRight: 15,
+  },
+  txtInput: {
+    height: HEIGHTXD(159),
+    flex: 1,
+    paddingVertical: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: '#DBEBFF',
+    fontSize: getFontXD(42),
+    marginTop: 5,
+    paddingHorizontal: 0,
+  },
+});
+
+export default React.memo(InputIcon);

src/components/TextField.js → src/components/Input/TextField.js

 import React from 'react';
 import {View, Text, TextInput} from 'react-native';
-import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
-import R from '../assets/R';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
+import R from '../../assets/R';
 
 const TextField = (props) => {
   const {title} = props;

src/components/TextMulti.js → src/components/Input/TextMulti.js

 import React from 'react';
 import {View, Text, TextInput} from 'react-native';
-import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
-import R from '../assets/R';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
+import R from '../../assets/R';
 
 const TextField = (props) => {
   const {title} = props;

src/components/InputComponent.js

-import React from 'react';
-import {View,Text,TextInput} from 'react-native';
-import  {HEIGHTXD,WIDTHXD,getFontXD} from '../config/Functions'
-import  R from '../assets/R'
-
-
-const InputComponent=(props)=>{
-  const {title,numberLine}=props
-
-  return(
-    <View  style={{marginVertical:5}}>
-      <Text  style={{
-        fontSize:getFontXD(42),
-        color:R.colors.color777,
-        marginBottom:5
-      }}>{title?title:""}</Text>
-      <TextInput
-        style={{
-          height:HEIGHTXD(89),
-          borderRadius:7,
-          borderWidth:0.7,
-          borderColor:R.colors.borderGray,
-          fontSize:getFontXD(42),
-          padding:5
-        }}
-
-      />
-    </View>
-
-  )
-}
-
-export  default  InputComponent;

src/components/Picker/PickerImg.js

@@ -104,7 +104,7 @@ const PickerImg = (props) => {
 const styles = StyleSheet.create({
   container: {
     width: WIDTHXD(350),
-    height: HEIGHTXD(240),
+    height: HEIGHTXD(280),
     backgroundColor: R.colors.white,
     borderRadius: 10,
     borderWidth: 2,
@@ -124,7 +124,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   containerSelect: {
-    height: HEIGHTXD(420),
+    height: HEIGHTXD(520),
     backgroundColor: 'white',
     paddingTop: 10,
     borderTopLeftRadius: 20,

src/routers/ScreenNames.js

@@ -11,6 +11,8 @@ export const DETAIL_HISTORY_MONEY = 'DETAIL_HISTORY_MONEY';
 export const DETAIL_CUSTOMER = 'DETAIL_CUSTOMER';
 export const DETAIL_WITHDRAW = 'DETAIL_WITHDRAW';
 
+export const AUTHEN = 'AUTHEN';
+export const FORGOTPASSWORD = 'FORGOTPASSWORD';
 export const ADD_CUSTOMER = 'ADD_CUSTOMER';
 export const WITHDRAW = 'WITHDRAW';
 

src/routers/StackNavigation.js

@@ -22,6 +22,8 @@ import Withdraw from '../Screens/Action/Withdraw/Withdraw';
 import Transfer from '../Screens/Action/Transfer/Transfer';
 import Deposit from '../Screens/Action/Deposit/Deposit';
 import History from '../Screens/Action/History/History';
+import Authen from '../Screens/Authen/Authen';
+import ForgotPassWord from '../Screens/Authen/ForgotPassword';
 
 import * as ScreenName from './ScreenNames';
 
@@ -29,9 +31,7 @@ const Stack = createStackNavigator();
 
 function MyStack(props) {
   return (
-    <Stack.Navigator
-      headerMode={'none'}
-      initialRouteName={ScreenName.TABNAVIGATOR}>
+    <Stack.Navigator headerMode={'none'} initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen
@@ -39,6 +39,7 @@ function MyStack(props) {
         component={AccountVerificaiton}
       />
       <Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} />
+      <Stack.Screen name={ScreenName.AUTHEN} component={Authen} />
       <Stack.Screen name={ScreenName.METHODPAY} component={MethodPay} />
       <Stack.Screen
         name={ScreenName.SERVICECUSTOMER}
@@ -55,6 +56,10 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.DEPOSIT} component={Deposit} />
       <Stack.Screen name={ScreenName.TRANSFER} component={Transfer} />
       <Stack.Screen name={ScreenName.HISTORY} component={History} />
+      <Stack.Screen
+        name={ScreenName.FORGOTPASSWORD}
+        component={ForgotPassWord}
+      />
     </Stack.Navigator>
   );
 }

yarn.lock

@@ -6043,11 +6043,6 @@ react-native-image-crop-picker@^0.36.0:
   resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.36.0.tgz#adf5a5677c3ae0e0bdaa18c73d880db2190e3023"
   integrity sha512-1S8+0EZJmUMWMcdo2tTadqIIsJo7aPxPed0P7Cop3DhBqEeYrAWfgdrJq9VoTXI+cIrOOcTAxn4NZPz+DQEn7g==
 
-react-native-image-picker@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-3.2.1.tgz#97119ffef0ac2de2862f61ac38c2f5af99e9de18"
-  integrity sha512-nOBZzYGmE5qZ8JBCvhWHQA+umYnQ8Jd3HGmgxBnmi0/82mU2nwCCnrzHsb29Q+DD7YasYr64rm8uWBBow8L5Fw==
-
 react-native-indicators@^0.17.0:
   version "0.17.0"
   resolved "https://registry.yarnpkg.com/react-native-indicators/-/react-native-indicators-0.17.0.tgz#92f95efaf5fb53be576dfe4e1980a25655a93f55"
@@ -6065,13 +6060,6 @@ react-native-linear-gradient@^2.5.6:
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
   integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==
 
-react-native-modal-datetime-picker@^8.7.1:
-  version "8.9.3"
-  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-8.9.3.tgz#4ab01386c525bf8df9e8e71a93cdd61aa0916212"
-  integrity sha512-bLqwvSRYZb3LD5AUWhGd2iJxeUoOMkTg81Z8TbNQP4SFsHpoqEi6LoUJ+DJvaxwTvpN8/LgqJ5bNRGJl4VwATQ==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-native-modal-dropdown@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-native-modal-dropdown/-/react-native-modal-dropdown-1.0.0.tgz#3985950c025c6d83c8c15968ab33e4e49e5bf634"