package add - otp input

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
+        </View>
+        <View style={{ marginTop: 100 }}>
+          <CustomButton onPress={() => navigation.navigate('VerifyOTP')} title={'Verify'} style={styles.btnbg} textstyle={styles.btntext} />
+        </View>
+      </KeyboardAwareScrollView>
+    </Background>
+  );
+};
+
+export default VerifyOTP;

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,