In this article, we are going to build a jokes generator app using react native. React Native enables you to master the designing an elegant and dynamic user interface while effortlessly retrieving jokes from external APIs.
Let’s take a look at how our completed project will look
Prerequisites / Technologies Used
Approach
The “Random Jokes Generator” app seamlessly retrieves jokes from an external API (https://icanhazdadjoke.com/), continuous supply of humor. Its user-friendly interface boasts a well-structured layout that consists of a title, a joke container, and an easily accessible “Get a Joke” button, enabling smooth interaction. The app enhances the visual experience by presenting jokes in an elegant white container with rounded corners and shadows. With just a simple click on the button, users can enjoy fresh jokes and stay engaged.
Steps to Create React Native Application
Step 1: Create a React Native Application
Create a new React Native project for JokesGeneratorApp
npx react-native init JokesGeneratorApp
Step 2: Change the directory to the project folder:
cd JokesGeneratorApp
Project Structure
dependencies //package.json
{
"dependencies": {
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^13.0.0"
}
}
Example: In this example, we’ll use above explained approach
Javascript
// App.js file import React, { useState } from "react"; import { View, Text, StyleSheet, TouchableOpacity, StatusBar, } from "react-native"; const App = () => { const [joke, setJoke] = useState(""); const getJoke = async () => { try { const response = await fetch( { headers: { Accept: "application/json", }, } ); const data = await response.json(); setJoke(data.joke); } catch (error) { console.error(error); } }; return ( <View style={styles.container}> <StatusBar backgroundColor="#252627" barStyle="light-content"/> <Text style={styles.title}> Random Jokes Generator </Text> <View style={styles.jokeContainer}> <Text style={styles.jokeText}>{joke}</Text> </View> <TouchableOpacity style={styles.button} onPress={getJoke}> <Text style={styles.buttonText}> Get a Joke </Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#eee", alignItems: "center", justifyContent: "center", padding: 16, }, title: { fontSize: 28, fontWeight: "bold", color: "#333739", marginBottom: 24, textAlign: "center", }, jokeContainer: { backgroundColor: "white", borderRadius: 15, padding: 20, marginBottom: 24, width: "100%", alignItems: "center", shadowColor: "black", shadowOffset: { width: 1, height: 2 }, shadowRadius: 15, shadowOpacity: 1, elevation: 4, }, jokeText: { fontSize: 22, fontWeight: "300", lineHeight: 30, color: "#333739", textAlign: "center", }, button: { padding: 16, backgroundColor: "green", borderRadius: 10, shadowColor: "black", shadowOffset: { width: 1, height: 2 }, shadowRadius: 15, shadowOpacity: 1, elevation: 4, }, buttonText: { fontSize: 20, color: "white", fontWeight: "bold", }, }); export default App; |
Steps to Run
To run react native application use the following command:
npx expo start
- To run on Android:
npx react-native run-android
- To run on iOS:
npx react-native run-ios
Output:
