create otp screen

ios/Invest.xcodeproj/project.pbxproj

@@ -296,7 +296,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */,
 				6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
-				B6300C27D48C95A66927365E /* [CP] Copy Pods Resources */,
+				02495638A08D660D532BEDE8 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -461,7 +461,7 @@
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
-		};
+		}; 
 		18F4A22C3F5C6E0E974FEED1 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -640,7 +640,7 @@
 			shellPath = /bin/sh;
 			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;
-		}; 
+		};
 		BBED12D78DA0ACB351A70EE8 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

package.json

@@ -22,6 +22,7 @@
     "react": "16.11.0",
     "react-hook-form": "^6.15.4",
     "react-native": "0.62.2",
+    "react-native-confirmation-code-field": "^6.5.1",
     "react-native-datepicker": "^1.7.2",
     "react-native-firebase": "^5.6.0",
     "react-native-gesture-handler": "^1.9.0",

src/Screens/Authen/ConfirmOTP.js

+import React, {Component, useEffect, useState} from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import R from '../../assets/R';
+
+const CELL_COUNT = 4;
+
+const ConfirmOTP = (propsa) => {
+  const [value, setValue] = useState('');
+  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack title={'Quên mật khẩu'} />
+
+      <View style={styles.container}>
+        <View style={{height: 20}} />
+
+        <View style={styles.wrap}>
+          <Text style={styles.txtTitle}>Mã xác thực:</Text>
+          <View style={styles.containerCode}>
+            <CodeField
+              ref={ref}
+              {...props}
+              value={value}
+              onChangeText={setValue}
+              cellCount={CELL_COUNT}
+              rootStyle={styles.codeFieldRoot}
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              renderCell={({index, symbol, isFocused}) => (
+                <View
+                  onLayout={getCellOnLayoutHandler(index)}
+                  key={index}
+                  style={[styles.cellRoot, isFocused && styles.focusCell]}>
+                  <Text style={styles.cellText}>
+                    {symbol || (isFocused ? <Cursor /> : null)}
+                  </Text>
+                </View>
+              )}
+            />
+          </View>
+        </View>
+      </View>
+      <View style={styles.footer}>
+        <TouchableOpacity
+          onPress={() => console.log('Hello')}
+          style={styles.btn}>
+          <Text style={styles.txtBtn}>Tiếp tục</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => console.log('Hello')}>
+          <Text style={styles.txtSend}>Gửi lại</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    paddingVertical: 20,
+  },
+  footer: {
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrap: {
+    flex: 1,
+    paddingTop: 30,
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: 50,
+  },
+  containerCode: {
+    height: 50,
+
+    width: '100%',
+    marginTop: 30,
+  },
+  codeFieldRoot: {
+    marginTop: 20,
+  },
+  cell: {
+    width: 50,
+    height: 50,
+    lineHeight: 50,
+    fontSize: 24,
+    borderBottomColor: 'black',
+    borderBottomWidth: 1,
+    backgroundColor: 'red',
+    textAlign: 'center',
+  },
+  focusCell: {
+    borderColor: '#000',
+  },
+  cellRoot: {
+    width: 60,
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomColor: '#ccc',
+    borderBottomWidth: 1,
+  },
+  cellText: {
+    color: '#000',
+    fontSize: 36,
+    textAlign: 'center',
+  },
+  focusCell: {
+    borderBottomColor: '#007AFF',
+    borderBottomWidth: 2,
+  },
+  txtTitle: {
+    fontSize: getFontXD(52),
+    color: '#979797',
+  },
+  btn: {
+    width: WIDTHXD(521),
+    height: HEIGHTXD(120),
+    borderRadius: 15,
+    backgroundColor: '#1C6AF6',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txtBtn: {
+    color: R.colors.white,
+    fontSize: getFontXD(52),
+    textTransform: 'uppercase',
+  },
+  txtSend: {
+    marginTop: 30,
+    fontSize: getFontXD(42),
+    color: '#1C6AF6',
+  },
+});
+
+export default ConfirmOTP;

src/Screens/Authen/Login.js

@@ -77,6 +77,7 @@ const Login = (props) => {
         title={'Tên đăng nhập'}
         placeholder={'Nhập tên đăng nhập'}
         onChangeText={(val) => setEmail(val)}
+        value={email}
       />
       <InputIcon
         icon={R.images.iconLock}
@@ -84,6 +85,7 @@ const Login = (props) => {
         placeholder={'Nhập mật khẩu'}
         isPassWord={true}
         onChangeText={(val) => setPass(val)}
+        value={pass}
       />
       <TouchableOpacity
         onPress={() => navigate.navigate(FORGOTPASSWORD)}

src/routers/ScreenNames.js

@@ -33,3 +33,5 @@ export const MYGROUP = 'MYGROUP';
 export const DEPOSIT = 'DEPOSIT';
 export const TRANSFER = 'TRANSFER';
 export const HISTORY = 'HISTORY';
+
+export const CONFIRMOTP = 'CONFIRMOTP';

src/routers/StackNavigation.js

@@ -24,7 +24,7 @@ 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 ConfirmOTP from '../Screens/Authen/ConfirmOTP';
 import * as ScreenName from './ScreenNames';
 
 const Stack = createStackNavigator();
@@ -36,13 +36,15 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.AUTHEN}>
+      initialRouteName={ScreenName.CONFIRMOTP}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen
         name={ScreenName.AccountVerification}
         component={AccountVerificaiton}
       />
+      <Stack.Screen name={ScreenName.CONFIRMOTP} component={ConfirmOTP} />
+
       <Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} />
       <Stack.Screen name={ScreenName.AUTHEN} component={Authen} />
       <Stack.Screen name={ScreenName.METHODPAY} component={MethodPay} />

yarn.lock

@@ -6030,6 +6030,11 @@ react-native-animatable@1.3.3:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-confirmation-code-field@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-6.5.1.tgz#0097c9748c2abbe28d8b34ee343ef60cf93434c2"
+  integrity sha512-CjNx0G6CnwNKasQBVQCNdHsZU+RCPMQENgns65inR7AoOS6wcTdA3cuiPtx7mZJ+Z44c+mj3568xrEZVpd9EUg==
+
 react-native-datepicker@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz#58d0822591a0ac9b32aba082650222a0ee29669d"