// Import useState hook from React and necessary components from react-native
import { useState } from 'react';
// Import core components from react-native for building UI
import {
View, // Container component for layout
TouchableOpacity, // Button component that responds to touch
Text, // Component for displaying text
StyleSheet // Utility for creating styles
} from 'react-native';
// Define the main App component
const App = () => {
// Declare a state variable to store the random number
const [randomNumber, setRandomNumber] = useState(null);
// Function to generate a random number between 1 and 100
const generateRandomNumber = () => {
const min = 1; // Minimum value
const max = 100; // Maximum value
// Generate random number in the range [min, max]
const number = Math.floor(Math.random() * (max - min + 1)) + min;
setRandomNumber(number); // Update state with the new random number
};
// Render the UI
return (
<View style={styles.container}> {/* Main container with styling */}
<Text style={styles.heading}>
Geeksforgeeks || Generate Random Number In React Native
</Text>
<TouchableOpacity
style={styles.button}
onPress={generateRandomNumber}> {/* Button to generate random number */}
<Text style={styles.buttonText}>
Random Number
</Text>
</TouchableOpacity>
{
// Conditionally render the random number if it exists
randomNumber !== null &&
<Text style={styles.randomNumber}>
Number is: {randomNumber}
</Text>
}
</View>
);
};
// Define styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take full height
justifyContent: 'center', // Center vertically
alignItems: 'center', // Center horizontally
padding: 20 // Add padding
},
button: {
backgroundColor: 'green', // Button background color
paddingHorizontal: 20, // Horizontal padding
paddingVertical: 10, // Vertical padding
borderRadius: 5, // Rounded corners
marginBottom: 20, // Space below button
},
buttonText: {
color: 'white', // Text color
fontSize: 18, // Text size
fontWeight: 'bold', // Bold text
},
randomNumber: {
fontSize: 24, // Random number text size
fontWeight: 'bold', // Bold text
color: 'red', // Text color
},
heading: {
fontSize: 20, // Heading text size
marginBottom: 20, // Space below heading
color: "green", // Heading text color
fontWeight: 'bold', // Bold heading
}
});
// Export the App component as default
export default App;