verfify screen start

src/navigation/Routes.js

@@ -4,6 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 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';
 
 const Stack = createNativeStackNavigator();
 
@@ -15,6 +16,7 @@ const Routes = () => {
         initialRouteName="Splash">
         <Stack.Screen name="Splash" component={Splash} />
         <Stack.Screen name="Login" component={Login} />
+        <Stack.Screen name="VerifyOTP" component={VerifyOTP} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/screens/AuthScreen/Login/index.js

@@ -7,13 +7,11 @@ 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 { GlobalTheme } from '../../../theme';
 import Background from '../../../components/Background';
 
 const Login = ({ navigation }) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
-
   const [username, setUsername] = useState('');
 
   return (
@@ -22,24 +20,16 @@ const Login = ({ navigation }) => {
         <View style={styles.logoContainer}>
           <Image style={styles.appLogo} source={IMAGES.AppLogo} />
         </View>
-
         <View style={styles.titleContainer}>
           <Text style={styles.titleText}>Log In</Text>
         </View>
-
         <View style={{ marginTop: 50 }}>
-          <CustomTextInput
+          <CustomTextInput label="Username" value={username} onChangeText={setUsername}
-            viewstyle={{ marginHorizontal: 0 }}
-            label="Username"
-            value={username}
-            onChangeText={setUsername}
           />
         </View>
-
         <View style={{ marginTop: 100 }}>
-          <CustomButton title={'Login'} style={{ backgroundColor: GlobalTheme.colors.secondary, borderRadius: GlobalTheme.borderRadius.md }} textstyle={{ color: GlobalTheme.colors.white, fontSize: GlobalTheme.typography.fontSize.medium }} />
+          <CustomButton onPress={() => navigation.navigate('VerifyOTP')} title={'Login'} style={styles.btnbg} textstyle={styles.btntext} />
         </View>
-
       </KeyboardAwareScrollView>
     </Background>
   );

src/screens/AuthScreen/Login/style.js

@@ -7,7 +7,6 @@ export const styles = StyleSheet.create({
     flex: 1,
     // backgroundColor: GlobalTheme.colors.white,
     paddingHorizontal: 10,
-    // justifyContent:'center'
   },
   logoContainer: {
     alignItems: 'center',
@@ -17,11 +16,6 @@ export const styles = StyleSheet.create({
     width: 200,
     resizeMode: 'contain',
   },
-  appMaskLogo: {
-    resizeMode: 'stretch',
-    width: Screen.screenHeight * 0.9,
-    height: Screen.screenHeight * 0.33,
-  },
   titleContainer: {
     alignSelf: 'center',
     // marginTop: 15,
@@ -31,16 +25,12 @@ export const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: GlobalTheme.colors.black,
   },
-  subtitleText: {
+  btnbg: {
-    fontSize: 15,
+    backgroundColor: GlobalTheme.colors.secondary, borderRadius: GlobalTheme.borderRadius.md
-    color: '#1F2128',
-    marginBottom: 14,
-    fontWeight: '600',
-    alignSelf: 'center',
-    width: '80%',
-    textAlign: 'center',
-  },
-  subtitleHighlight: {
-    color: '#2381E9',
   },
+  btntext: {
+    color: GlobalTheme.colors.white,
+    fontSize: GlobalTheme.typography.fontSize.medium
+  }
+
 });

src/screens/AuthScreen/VerifyOTP/index.js

@@ -0,0 +1,51 @@
+// 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 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 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>
+  )
+}
+
+export default VerifyOTP

src/screens/AuthScreen/VerifyOTP/style.js

@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+
+import { GlobalTheme, Screen } from '../../../theme';
+
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        // backgroundColor: GlobalTheme.colors.white,
+        paddingHorizontal: 10,
+    },
+    logoContainer: {
+        alignItems: 'center',
+    },
+    appLogo: {
+        height: 200,
+        width: 200,
+        resizeMode: 'contain',
+    },
+    titleContainer: {
+        alignSelf: 'center',
+        // marginTop: 15,
+    },
+    titleText: {
+        fontSize: 25,
+        fontWeight: 'bold',
+        color: GlobalTheme.colors.black,
+    },
+    btnbg: {
+        backgroundColor: GlobalTheme.colors.secondary, borderRadius: GlobalTheme.borderRadius.md
+    },
+    btntext: {
+        color: GlobalTheme.colors.white,
+        fontSize: GlobalTheme.typography.fontSize.medium
+    },
+    otp_inputStyle: {
+        textAlign: 'center',
+        backgroundColor: 'red',
+        width: ((Screen.screenWidth('80%') / 4) - 30),
+        borderRadius: 4,
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        height: 50,
+        color: 'red',
+        marginBottom: 10,
+        marginRight: 10,
+        fontSize: 25,
+
+    },
+    verify_otp_inputStyle: {
+        textAlign: 'center',
+        backgroundColor: PageTheme.$secondary_color_light,
+        width: ((Screen.screenWidth('80%') / 4) - 30),
+        borderRadius: 4,
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        height: 48,
+        color: 'red',
+        marginBottom: 10,
+        marginRight: 8,
+        fontSize: 22,
+    },
+    otp_field: {
+        flexDirection: 'row',
+    },
+
+});