verify screen - done

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native-clipboard/clipboard": "^1.16.2",
     "@react-native/new-app-screen": "0.80.0",
     "@react-navigation/elements": "^2.5.2",
     "@react-navigation/native": "^7.1.14",
@@ -24,12 +23,12 @@
     "react-native-element-dropdown": "^2.12.4",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-otp-inputs": "^7.4.0",
+    "react-native-otp-entry": "^1.8.5",
-    "react-native-otp-textinput": "^1.1.7",
     "react-native-safe-area-context": "^5.5.0",
     "react-native-screens": "^4.11.1",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "^15.12.0",
+    "react-native-toast-message": "^2.3.1",
     "react-native-vector-icons": "^10.2.0",
     "react-redux": "^9.2.0"
   },

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}>
+        <TouchableOpacity onPress={onPress}>
-            <View style={{ marginHorizontal: 10, paddingVertical: 12, ...style }}>
+            <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: {
+    // OTP 
-        textAlign: 'center',
+    pinCodeContainer: {
-        backgroundColor: 'red',
+        width: 45,
-        width: 100,
+        height: 55,
-        borderRadius: 4,
+        borderWidth: 1,
-        paddingVertical: 10,
+        borderColor: '#D8E3F1',
-        paddingHorizontal: 15,
+        borderRadius: 8,
-        height: 48,
+        justifyContent: 'center',
-        color: 'red',
+        alignItems: 'center',
-        marginBottom: 10,
+        backgroundColor: '#fff',
-        marginRight: 8,
-        fontSize: 22,
     },
-    otp_field: {
+    activePinCodeContainer: {
-        flexDirection: 'row',
+        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,
     },
 
 });

yarn.lock

@@ -1380,11 +1380,6 @@
   dependencies:
     merge-options "^3.0.4"
 
-"@react-native-clipboard/clipboard@^1.16.2":
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.16.2.tgz#d8517eea937d336b8fe1ca44e955e691d27f5ba4"
-  integrity sha512-VqUYwVxo7DyHMz7v2LxLMaAOSu3pKFvzpqR4jQezdH0VyaudILTTcUf7dR4TroARU/lLkTU8nZA11UniTvGVXg==
-
 "@react-native-community/cli-clean@19.0.0":
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-19.0.0.tgz#1a1f3fcd77b1c6a72d27132a09590b9511d15c05"
@@ -5735,15 +5730,10 @@ react-native-linear-gradient@^2.8.3:
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz#9a116649f86d74747304ee13db325e20b21e564f"
   integrity sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==
 
-react-native-otp-inputs@^7.4.0:
+react-native-otp-entry@^1.8.5:
-  version "7.4.0"
+  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/react-native-otp-inputs/-/react-native-otp-inputs-7.4.0.tgz#ea1badabdf231faee5bcb5231034911bbba49aed"
+  resolved "https://registry.yarnpkg.com/react-native-otp-entry/-/react-native-otp-entry-1.8.5.tgz#e5893040e1b0540c6febb89b1b29a1729277c1df"
-  integrity sha512-+phHrlcQQ63VuOrHaOZze7LP9WmzUGxGMlQx2A/jhPhYkCi/5hXDjxNcWyPXCy/RFRoLX+70HNpGqTgo0mDg7Q==
+  integrity sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA==
-
-react-native-otp-textinput@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/react-native-otp-textinput/-/react-native-otp-textinput-1.1.7.tgz#c7c3611c35701996777d117a1990c58ca94796da"
-  integrity sha512-XIMwDRoAKaQTCBnnPaSu94a1y/gfARsVYV6ybu8r4OcdUiMLirrcGgo2iZEnzaodrFIU5GoF4cUcLtsFcWcsew==
 
 react-native-safe-area-context@^5.5.0:
   version "5.5.0"
@@ -5773,6 +5763,11 @@ react-native-svg@^15.12.0:
     css-tree "^1.1.3"
     warn-once "0.1.1"
 
+react-native-toast-message@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-2.3.1.tgz#11b339b509f34f1e378267dd0432529af3c12d12"
+  integrity sha512-86OpiJhggXZMUL/8KMmgRRRzGgu4lfUXVV0YkHc0F8PitVkTnhQ6P5UzIypCYQ4CbQUu9O1dCY+rlQG4c5j0sA==
+
 react-native-vector-icons@^10.2.0:
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz#f438f2ca16f7d6be658fd6ec8f0d2b7e2132b91c"