// Import useState hook from React
import { useState } from 'react';
// Import required components from react-native
// Import core components from react-native for building UI
import {
View, // Container component for layout
Text, // Component for displaying text
TextInput, // Input field for user text entry
TouchableOpacity, // Button-like component for touch interactions
StyleSheet // Utility for creating component styles
} from 'react-native';
// Define the main App component
const App = () => {
// State to store the generated OTP
const [otp, setOtp] = useState('');
// State to store user input for OTP
const [userInput, setUserInput] = useState('');
// State to store OTP validation result (true/false/null)
const [isValid, setIsValid] = useState(null);
// State to control visibility of the OTP box
const [showOtpBox, setShowOtpBox] = useState(false);
// Function to generate a random 6-character OTP
const generateOtp = () => {
let generatedOtp = ''; // Initialize empty OTP string
const characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; // Allowed characters
// Loop to generate 6 random characters
for (let i = 0; i < 6; i++) {
generatedOtp += characters
.charAt(Math
.floor(Math.random() * characters.length)); // Pick a random character
}
setOtp(generatedOtp); // Update OTP state
setIsValid(null); // Reset validation state
setShowOtpBox(true); // Show the OTP box
};
// Function to validate the entered OTP
const validateOtp = () => {
if (userInput === otp) { // Check if user input matches OTP
setIsValid(true); // Set validation state to true
} else {
setIsValid(false); // Set validation state to false
}
};
// Render the UI
return (
<View style={styles.container}> {/* Main container */}
<View style={styles.box}> {/* Inner box for content */}
<Text style={styles.title}>
OTP Generator | Validator {/* Title text */}
</Text>
<TouchableOpacity style={styles.button}
onPress={generateOtp}> {/* Button to generate OTP */}
<Text style={styles.buttonText}>
Generate OTP
</Text>
</TouchableOpacity>
{showOtpBox && ( // Conditionally render OTP box
<View style={styles.otpBox}>
<Text style=
{
[styles.otp, { color: 'black' }]
}>
{otp} {/* Display generated OTP */}
</Text>
</View>
)}
<TextInput
style={styles.input}
placeholder="Enter OTP" // Placeholder text
value={userInput} // Value bound to userInput state
onChangeText={setUserInput} // Update userInput on change
/>
<TouchableOpacity style={styles.button}
onPress={validateOtp}> {/* Button to validate OTP */}
<Text style={styles.buttonText}>
Validate OTP
</Text>
</TouchableOpacity>
{/* Display messages based on the validity status */}
{isValid === true &&
<Text style={styles.validText}>
Valid OTP {/* Message for valid OTP */}
</Text>}
{isValid === false &&
<Text style={styles.invalidText}>
Invalid OTP {/* Message for invalid OTP */}
</Text>}
</View>
</View>
);
};
// Define styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take full height
justifyContent: 'center', // Center vertically
alignItems: 'center', // Center horizontally
},
box: {
width: '80%', // 80% of screen width
backgroundColor: '#FFF', // White background
borderRadius: 10, // Rounded corners
padding: 20, // Padding inside box
shadowColor: '#000', // Shadow color
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25, // Shadow opacity
shadowRadius: 3.84, // Shadow blur radius
elevation: 5, // Android shadow
},
title: {
fontSize: 24, // Large font size
marginBottom: 20, // Space below title
},
button: {
backgroundColor: '#007AFF', // Blue background
paddingHorizontal: 30, // Horizontal padding
paddingVertical: 15, // Vertical padding
borderRadius: 5, // Rounded corners
marginTop: 20, // Space above button
},
buttonText: {
color: '#FFF', // White text
fontSize: 18, // Medium font size
},
input: {
borderWidth: 1, // Border width
borderColor: '#007AFF', // Border color
borderRadius: 5, // Rounded corners
paddingHorizontal: 10, // Horizontal padding
paddingVertical: 5, // Vertical padding
marginTop: 20, // Space above input
width: '100%', // Full width
},
otpBox: {
marginTop: 20, // Space above OTP box
backgroundColor: 'white', // White background
borderRadius: 5, // Rounded corners
padding: 10, // Padding inside box
borderWidth: 2, // Border width
borderColor: 'grey', // Border color
},
otp: {
fontSize: 24, // Large font for OTP
},
validText: {
fontSize: 20, // Font size for valid message
color: 'green', // Green color
marginTop: 20, // Space above message
},
invalidText: {
fontSize: 20, // Font size for invalid message
color: 'red', // Red color
marginTop: 20, // Space above message
},
});
// Export the App component as default
export default App;