From 9eb0c3eb2be341be1ec263a95e82fb06c593b0e6 Mon Sep 17 00:00:00 2001
From: Anita <anita.kardam@cpmindia.com>
Date: Wed, 25 Jun 2025 17:40:16 +0530
Subject: [PATCH] package add - otp input

---
 package.json                              |  2 +
 src/screens/AuthScreen/VerifyOTP/index.js | 80 ++++++++++-------------
 src/screens/AuthScreen/VerifyOTP/style.js |  7 +-
 yarn.lock                                 | 10 +++
 4 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/package.json b/package.json
index 398d6e7..00c42fe 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "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",
@@ -23,6 +24,7 @@
     "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-textinput": "^1.1.7",
     "react-native-safe-area-context": "^5.5.0",
     "react-native-screens": "^4.11.1",
diff --git a/src/screens/AuthScreen/VerifyOTP/index.js b/src/screens/AuthScreen/VerifyOTP/index.js
index cacd2a7..4c0904d 100644
--- a/src/screens/AuthScreen/VerifyOTP/index.js
+++ b/src/screens/AuthScreen/VerifyOTP/index.js
@@ -1,51 +1,37 @@
-// import React, { useState } from 'react';
-// import { View, Text, Image, Alert } from 'react-native';
-// import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-// import AsyncStorage from '@react-native-async-storage/async-storage';
-// import { useDispatch } from 'react-redux';
+import React, { 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 CustomButton from '../../../components/CustomButton';
+import Background from '../../../components/Background';
+import { styles } from './style';
 
-// import CustomButton from '../../../components/CustomButton';
-// import IMAGES from '../../../constants/Images';
-// import { styles } from './style';
-// import Background from '../../../components/Background';
+const VerifyOTP = ({ navigation }) => {
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+  const [otp, setOTP] = useState('');
 
-// const VerifyOTP = ({ navigation }) => {
-//     const [loading, setLoading] = useState(false);
-//     const dispatch = useDispatch();
-//     const otpRef = useRef();
-//     const [otp, setOtp] = useState('');
-
-//     return (
-//         <Background barcolor="light-content">
-//             <KeyboardAwareScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center', flex: 1 }}>
-//                 <View style={styles.logoContainer}>
-//                     <Image style={styles.appLogo} source={IMAGES.AppLogo} />
-//                 </View>
-//                 <View style={styles.titleContainer}>
-//                     <Text style={styles.titleText}>Verify OTP</Text>
-//                 </View>
-//                 <View style={{ marginTop: 50 }}>
-
-//                 </View>
-//                 <View style={{ marginTop: 100 }}>
-//                     <CustomButton title={'Login'} style={styles.btnbg} textstyle={styles.btntext} />
-//                 </View>
-//             </KeyboardAwareScrollView>
-//         </Background>
-//     );
-// };
-
-// export default VerifyOTP;
-
-import { View, Text } from 'react-native'
-import React from 'react'
-
-const VerifyOTP = () => {
   return (
-    <View>
-      <Text>VerifyOTP</Text>
-    </View>
-  )
-}
+    <Background barcolor="light-content">
+      <KeyboardAwareScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center', flex: 1 }}>
+        <View style={styles.logoContainer}>
+          <Image style={styles.appLogo} source={IMAGES.AppLogo} />
+        </View>
+        <View style={styles.titleContainer}>
+          <Text style={styles.titleText}>Verify OTP</Text>
+        </View>
+        <View style={{ marginTop: 50 }}>
 
-export default VerifyOTP
\ No newline at end of file
+        </View>
+        <View style={{ marginTop: 100 }}>
+          <CustomButton onPress={() => navigation.navigate('VerifyOTP')} title={'Verify'} style={styles.btnbg} textstyle={styles.btntext} />
+        </View>
+      </KeyboardAwareScrollView>
+    </Background>
+  );
+};
+
+export default VerifyOTP;
diff --git a/src/screens/AuthScreen/VerifyOTP/style.js b/src/screens/AuthScreen/VerifyOTP/style.js
index dccc3b1..8f0a82f 100644
--- a/src/screens/AuthScreen/VerifyOTP/style.js
+++ b/src/screens/AuthScreen/VerifyOTP/style.js
@@ -5,7 +5,6 @@ import { GlobalTheme, Screen } from '../../../theme';
 export const styles = StyleSheet.create({
     container: {
         flex: 1,
-        // backgroundColor: GlobalTheme.colors.white,
         paddingHorizontal: 10,
     },
     logoContainer: {
@@ -35,7 +34,7 @@ export const styles = StyleSheet.create({
     otp_inputStyle: {
         textAlign: 'center',
         backgroundColor: 'red',
-        width: ((Screen.screenWidth('80%') / 4) - 30),
+        width: 100,
         borderRadius: 4,
         paddingVertical: 10,
         paddingHorizontal: 15,
@@ -48,8 +47,8 @@ export const styles = StyleSheet.create({
     },
     verify_otp_inputStyle: {
         textAlign: 'center',
-        backgroundColor: PageTheme.$secondary_color_light,
-        width: ((Screen.screenWidth('80%') / 4) - 30),
+        backgroundColor: 'red',
+        width: 100,
         borderRadius: 4,
         paddingVertical: 10,
         paddingHorizontal: 15,
diff --git a/yarn.lock b/yarn.lock
index f65251d..c911064 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1380,6 +1380,11 @@
   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"
@@ -5730,6 +5735,11 @@ 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:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-otp-inputs/-/react-native-otp-inputs-7.4.0.tgz#ea1badabdf231faee5bcb5231034911bbba49aed"
+  integrity sha512-+phHrlcQQ63VuOrHaOZze7LP9WmzUGxGMlQx2A/jhPhYkCi/5hXDjxNcWyPXCy/RFRoLX+70HNpGqTgo0mDg7Q==
+
 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"