From 9873a3844d18734c2886911dcf47cd06a4c375e8 Mon Sep 17 00:00:00 2001 From: Anita Date: Wed, 25 Jun 2025 17:33:46 +0530 Subject: [PATCH] verfify screen start --- src/navigation/Routes.js | 2 + src/screens/AuthScreen/Login/index.js | 16 ++---- src/screens/AuthScreen/Login/style.js | 32 ++++------- src/screens/AuthScreen/VerifyOTP/index.js | 51 ++++++++++++++++++ src/screens/AuthScreen/VerifyOTP/style.js | 66 +++++++++++++++++++++++ 5 files changed, 133 insertions(+), 34 deletions(-) create mode 100644 src/screens/AuthScreen/VerifyOTP/index.js create mode 100644 src/screens/AuthScreen/VerifyOTP/style.js diff --git a/src/navigation/Routes.js b/src/navigation/Routes.js index b53c3c9..5713b6d 100644 --- a/src/navigation/Routes.js +++ b/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"> + ); diff --git a/src/screens/AuthScreen/Login/index.js b/src/screens/AuthScreen/Login/index.js index 2200e64..4cb629b 100644 --- a/src/screens/AuthScreen/Login/index.js +++ b/src/screens/AuthScreen/Login/index.js @@ -7,39 +7,29 @@ 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 ( - + - Log In - - - - + navigation.navigate('VerifyOTP')} title={'Login'} style={styles.btnbg} textstyle={styles.btntext} /> - ); diff --git a/src/screens/AuthScreen/Login/style.js b/src/screens/AuthScreen/Login/style.js index ab25917..f6aba8f 100644 --- a/src/screens/AuthScreen/Login/style.js +++ b/src/screens/AuthScreen/Login/style.js @@ -1,27 +1,21 @@ -import {StyleSheet} from 'react-native'; +import { StyleSheet } from 'react-native'; -import { GlobalTheme , Screen } from '../../../theme'; +import { GlobalTheme, Screen } from '../../../theme'; export const styles = StyleSheet.create({ container: { flex: 1, // backgroundColor: GlobalTheme.colors.white, paddingHorizontal: 10, - // justifyContent:'center' }, logoContainer: { alignItems: 'center', }, appLogo: { - height :200 , - width :200, + height: 200, + 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: { - fontSize: 15, - color: '#1F2128', - marginBottom: 14, - fontWeight: '600', - alignSelf: 'center', - width: '80%', - textAlign: 'center', - }, - subtitleHighlight: { - color: '#2381E9', + btnbg: { + backgroundColor: GlobalTheme.colors.secondary, borderRadius: GlobalTheme.borderRadius.md }, + btntext: { + color: GlobalTheme.colors.white, + fontSize: GlobalTheme.typography.fontSize.medium + } + }); diff --git a/src/screens/AuthScreen/VerifyOTP/index.js b/src/screens/AuthScreen/VerifyOTP/index.js new file mode 100644 index 0000000..cacd2a7 --- /dev/null +++ b/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 ( +// +// +// +// +// +// +// Verify OTP +// +// + +// +// +// +// +// +// +// ); +// }; + +// export default VerifyOTP; + +import { View, Text } from 'react-native' +import React from 'react' + +const VerifyOTP = () => { + return ( + + VerifyOTP + + ) +} + +export default VerifyOTP \ No newline at end of file diff --git a/src/screens/AuthScreen/VerifyOTP/style.js b/src/screens/AuthScreen/VerifyOTP/style.js new file mode 100644 index 0000000..dccc3b1 --- /dev/null +++ b/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', + }, + +});