verify screen - done

src/screens/AuthScreen/Login/style.js

@@ -6,7 +6,6 @@ export const styles = StyleSheet.create({
   container: {
     flex: 1,
     // backgroundColor: GlobalTheme.colors.white,
-    paddingHorizontal: 10,
   },
   logoContainer: {
     alignItems: 'center',

src/screens/AuthScreen/VerifyOTP/index.js

@@ -1,19 +1,29 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { View, Text, Image, Alert } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import IMAGES from '../../../constants/Images';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useDispatch } from 'react-redux';
-import CustomTextInput from '../../../components/CustomTextInput';
+import { OtpInput } from "react-native-otp-entry";
 import CustomButton from '../../../components/CustomButton';
 import Background from '../../../components/Background';
+import IMAGES from '../../../constants/Images';
+import { GlobalTheme } from '../../../theme';
 import { styles } from './style';
+import { toastError } from '../../../constants/Toast';
 
 const VerifyOTP = ({ navigation }) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
   const [otp, setOTP] = useState('');
 
+  const handle_validate = () => {
+    toastError('Alert', "Please enter 6 digit PIN");
+    if (otp.length < 6) {
+    } else {
+      navigation.navigate('');
+    }
+  }
+
   return (
     <Background barcolor="light-content">
       <KeyboardAwareScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center', flex: 1 }}>
@@ -24,10 +34,47 @@ const VerifyOTP = ({ navigation }) => {
           <Text style={styles.titleText}>Verify OTP</Text>
         </View>
         <View style={{ marginTop: 50 }}>
+          <OtpInput
+            numberOfDigits={6}
+            focusColor={GlobalTheme.colors.primary}
+            autoFocus={false}
+            hideStick={true}
+            placeholder=""
+            blurOnFilled={true}
+            disabled={false}
+            type="numeric"
+            secureTextEntry={false}
+            focusStickBlinkingDuration={500}
+            onFocus={() => console.log("Focused")}
+            onBlur={() => console.log("Blurred")}
+            onTextChange={(text) => setOTP(text)}
+            onFilled={(text) => {
+              setOTP(text);
+              console.log(`OTP is ${text}`);
+            }}
+            textInputProps={{
+              accessibilityLabel: "One-Time Password",
+            }}
+            textProps={{
+              accessibilityRole: "text",
+              accessibilityLabel: "OTP digit",
+              allowFontScaling: false,
+            }}
+            theme={{
+              containerStyle: styles.container,
+              pinCodeContainerStyle: styles.pinCodeContainer,
+              pinCodeTextStyle: styles.pinCodeText,
+              focusStickStyle: styles.focusStick,
+              focusedPinCodeContainerStyle: styles.activePinCodeContainer,
+              placeholderTextStyle: styles.placeholderText,
+              filledPinCodeContainerStyle: styles.filledPinCodeContainer,
+              disabledPinCodeContainerStyle: styles.disabledPinCodeContainer,
+            }}
+          />
 
         </View>
         <View style={{ marginTop: 100 }}>
-          <CustomButton onPress={() => navigation.navigate('VerifyOTP')} title={'Verify'} style={styles.btnbg} textstyle={styles.btntext} />
+          <CustomButton onPress={handle_validate} title={'Verify'} style={styles.btnbg} textstyle={styles.btntext} />
         </View>
       </KeyboardAwareScrollView>
     </Background>

src/screens/AuthScreen/VerifyOTP/style.js

@@ -5,7 +5,6 @@ import { GlobalTheme, Screen } from '../../../theme';
 export const styles = StyleSheet.create({
     container: {
         flex: 1,
-        paddingHorizontal: 10,
     },
     logoContainer: {
         alignItems: 'center',
@@ -45,21 +44,42 @@ export const styles = StyleSheet.create({
         fontSize: 25,
 
     },
-    verify_otp_inputStyle: {
-        textAlign: 'center',
-        backgroundColor: 'red',
-        width: 100,
-        borderRadius: 4,
-        paddingVertical: 10,
-        paddingHorizontal: 15,
-        height: 48,
-        color: 'red',
-        marginBottom: 10,
-        marginRight: 8,
-        fontSize: 22,
+    // OTP 
+    pinCodeContainer: {
+        width: 45,
+        height: 55,
+        borderWidth: 1,
+        borderColor: '#D8E3F1',
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#fff',
     },
-    otp_field: {
-        flexDirection: 'row',
+    activePinCodeContainer: {
+        borderColor: GlobalTheme.colors.primary,
+        borderWidth: 2,
+    },
+    filledPinCodeContainer: {
+        backgroundColor: '#D8E3F1',
+    },
+    disabledPinCodeContainer: {
+        backgroundColor: '#f0f0f0',
+        borderColor: '#ddd',
+    },
+    pinCodeText: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#333',
+    },
+    focusStick: {
+        height: 2,
+        width: 20,
+        backgroundColor: GlobalTheme.colors.primary,
+        marginTop: 4,
+    },
+    placeholderText: {
+        color: '#aaa',
+        fontSize: 18,
     },
 
 });