verify screen - done

src/components/Background.js

@@ -1,13 +1,14 @@
 // src/components/Background.js
 
 import React from 'react';
-import { StyleSheet, SafeAreaView, StatusBar } from 'react-native';
+import { StyleSheet, SafeAreaView, StatusBar, useColorScheme } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 const Background = ({ children, barcolor = 'light-content'}) => {
+  const isDarkMode = useColorScheme() === 'dark';
   return (
     <SafeAreaView style={styles.container}>
-      <StatusBar barStyle={barcolor} backgroundColor="transparent" translucent />
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <LinearGradient colors={['#E3EBF8', '#ffffff']} start={{ x: 0.5, y: 0 }} end={{ x: 0.5, y: 1 }} style={styles.gradient}>
         {children}
       </LinearGradient>
@@ -18,9 +19,11 @@ const Background = ({ children, barcolor = 'light-content'}) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    
   },
   gradient: {
     flex: 1,
+    paddingHorizontal: 20,
   },
 });
 

src/components/CustomButton.js

@@ -1,12 +1,12 @@
-import { View, Text, Pressable } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
-const CustomButton = ({title,style,textstyle,onPress}) => {
+const CustomButton = ({ title, style, textstyle, onPress }) => {
     return (
-        <Pressable onPress={onPress}>
-            <View style={{ marginHorizontal: 10, paddingVertical: 12, ...style }}>
+        <TouchableOpacity onPress={onPress}>
+            <View style={{ marginHorizontal: 0, paddingVertical: 10, ...style }}>
                 <Text style={{ textAlign: 'center', ...textstyle }}>{title}</Text>
             </View>
-        </Pressable>
+        </TouchableOpacity>
     );
 };
 

src/components/CustomTextInput.js

@@ -1,6 +1,6 @@
 import { View, Text, TextInput, StyleSheet, } from 'react-native';
 import React, { useState } from 'react';
-import { GlobalTheme } from '../theme';
+import { GlobalTheme, Screen } from '../theme';
 
 const CustomTextInput = ({
   label,
@@ -39,7 +39,7 @@ const CustomTextInput = ({
           fontSize: GlobalTheme.typography.fontSize.medium,
           fontWeight: GlobalTheme.typography.fontWeight.medium,
           marginTop: 10,
-          marginHorizontal: 10,
+          marginHorizontal: 0,
           ...textstyle,
         }}>
         {label}
@@ -47,7 +47,7 @@ const CustomTextInput = ({
       <View
         style={{
           borderRadius: GlobalTheme.borderRadius.lgg,
-          borderWidth: 6,
+          // borderWidth: 6,
           borderColor: isFocused ? '#DFECFF' : 'transparent',
           marginTop: 8,
           ...viewstyle,
@@ -77,7 +77,6 @@ const styles = StyleSheet.create({
     height: 50,
     borderWidth: 1,
     padding: 10,
-    borderRadius: 4,
     color: GlobalTheme.colors.black,
   },
   inputContainer: {

src/constants/Toast.js

@@ -0,0 +1,36 @@
+// Toast.js
+import Toast from 'react-native-toast-message';
+const showToast = (type, text1, text2) => {
+  Toast.show({
+    type: type,
+    text1: text1,
+    text2: text2,
+    position: 'top',
+    visibilityTime: 3000,
+    autoHide: true,
+    topOffset: 30,
+    bottomOffset: 40,
+    text1Style: {
+        fontSize: 15, // Custom font size for the main text
+        fontWeight: 'bold',
+      },
+      text2Style: {
+        fontSize: 14, // Custom font size for the secondary text
+        color:'gray'
+      },
+  });
+};
+
+const ToastComponent = () => {
+  return <Toast innerRef={(ref) => Toast.setRef(ref)} />;
+};
+
+const toastSuccess = (text1, text2) => {
+  showToast('success', text1, text2);
+};
+
+const toastError = (text1, text2) => {
+  showToast('error', text1, text2);
+};
+
+export { ToastComponent, toastSuccess, toastError };

src/navigation/Routes.js

@@ -5,6 +5,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Splash from '../screens/AuthScreen/Splash';
 import Login from '../screens/AuthScreen/Login';
 import VerifyOTP from '../screens/AuthScreen/VerifyOTP';
+import { ToastComponent } from '../constants/Toast';
 
 const Stack = createNativeStackNavigator();
 
@@ -18,6 +19,7 @@ const Routes = () => {
         <Stack.Screen name="Login" component={Login} />
         <Stack.Screen name="VerifyOTP" component={VerifyOTP} />
       </Stack.Navigator>
+       <ToastComponent />
     </NavigationContainer>
   );
 };

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,
     },
 
 });