// Import useState hook from React for state management
import { useState } from "react";
// Import necessary components from react-native
import {
View, // Container component for layout
Text, // Component for displaying text
StyleSheet, // Utility for creating styles
TouchableOpacity, // Button-like component for touch handling
} from "react-native";
// Main App component
const App = () => {
// State variable to hold the current joke
const [joke, setJoke] = useState("");
// Function to fetch a random joke from the API
const getJoke = async () => {
try {
// Make a GET request to the joke API with JSON response
const response = await fetch(
"https://icanhazdadjoke.com/",
{
headers: {
Accept: "application/json", // Request JSON format
},
}
);
// Parse the JSON response
const data = await response.json();
// Update the joke state with the fetched joke
setJoke(data.joke);
} catch (error) {
// Log any errors to the console
console.error(error);
}
};
// Render the UI
return (
<View style={styles.container}>
{/* Title text */}
<Text style={styles.title}>
Random Jokes Generator
</Text>
{/* Container for the joke text */}
<View style={styles.jokeContainer}>
<Text style={styles.jokeText}>{joke}</Text>
</View>
{/* Button to fetch a new joke */}
<TouchableOpacity
style={styles.button}
onPress={getJoke}
>
<Text style={styles.buttonText}>
Get a Joke
</Text>
</TouchableOpacity>
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take up the full screen
backgroundColor: "#eee", // Light gray background
alignItems: "center", // Center items horizontally
justifyContent: "center", // Center items vertically
padding: 16, // Padding around the container
},
title: {
fontSize: 28, // Large font size
fontWeight: "bold", // Bold text
color: "#333739", // Dark text color
marginBottom: 24, // Space below the title
textAlign: "center", // Center the text
},
jokeContainer: {
backgroundColor: "white", // White background for the joke
borderRadius: 15, // Rounded corners
padding: 20, // Padding inside the container
marginBottom: 24, // Space below the joke
width: "100%", // Full width
alignItems: "center", // Center content horizontally
shadowColor: "black", // Shadow color
shadowOffset: { width: 1, height: 2 }, // Shadow offset
shadowRadius: 15, // Shadow blur radius
shadowOpacity: 1, // Shadow opacity
elevation: 4, // Android shadow
},
jokeText: {
fontSize: 22, // Font size for the joke
fontWeight: "300", // Light font weight
lineHeight: 30, // Line height for readability
color: "#333739", // Text color
textAlign: "center", // Center the text
},
button: {
padding: 16, // Padding inside the button
backgroundColor: "green", // Green background
borderRadius: 10, // Rounded corners
shadowColor: "black", // Shadow color
shadowOffset: { width: 1, height: 2 }, // Shadow offset
shadowRadius: 15, // Shadow blur radius
shadowOpacity: 1, // Shadow opacity
elevation: 4, // Android shadow
},
buttonText: {
fontSize: 20, // Font size for button text
color: "white", // White text color
fontWeight: "bold", // Bold text
},
});
// Export the App component as the default export
export default App;