buntyc/Dabur_StoreDNA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

verify screen - done

Browse Source
This commit is contained in:
Anita
2025-06-26 11:15:14 +05:30
parent 9eb0c3eb2b
commit fb0c62e0dc
10 changed files with 148 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -3
View File
@@ -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-textinput": "^1.1.7",
"react-native-otp-entry": "^1.8.5",
"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
+5 -2
View File
@@ -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
+4 -4
View File
@@ -1,12 +1,12 @@
import { View, Text, Pressable } from 'react-native';
import { View, Text, TouchableOpacity } from 'react-native';
const CustomButton = ({ title, style, textstyle, onPress }) => {
return (
<Pressable onPress={onPress}>
<View style={{ marginHorizontal: 10, paddingVertical: 12, ...style }}>
<TouchableOpacity onPress={onPress}>
<View style={{ marginHorizontal: 0, paddingVertical: 10, ...style }}>
<Text style={{ textAlign: 'center', ...textstyle }}>{title}</Text>
</View>
</Pressable>
</TouchableOpacity>
);
};
src/components/CustomTextInput.js
+3 -4
View File
@@ -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
+36
View File
@@ -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
+2
View File
@@ -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
-1
View File
@@ -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
+51 -4
View File
@@ -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
+35 -15
View File
@@ -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: {
textAlign: 'center',
backgroundColor: 'red',
width: 100,
borderRadius: 4,
paddingVertical: 10,
paddingHorizontal: 15,
height: 48,
color: 'red',
marginBottom: 10,
marginRight: 8,
fontSize: 22,
// OTP
pinCodeContainer: {
width: 45,
height: 55,
borderWidth: 1,
borderColor: '#D8E3F1',
borderRadius: 8,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
otp_field: {
flexDirection: 'row',
activePinCodeContainer: {
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
+9 -14
View File
@@ -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:
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"
integrity sha512-XIMwDRoAKaQTCBnnPaSu94a1y/gfARsVYV6ybu8r4OcdUiMLirrcGgo2iZEnzaodrFIU5GoF4cUcLtsFcWcsew==
react-native-otp-entry@^1.8.5:
version "1.8.5"
resolved "https://registry.yarnpkg.com/react-native-otp-entry/-/react-native-otp-entry-1.8.5.tgz#e5893040e1b0540c6febb89b1b29a1729277c1df"
integrity sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA==
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"