Create Jokes Generator App using React-Native

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 use­r interface while e­ffortlessly retrieving joke­s from external APIs.

Let’s take a look at how our completed project will look

Prerequisites / Technologies Used

• Introduction to React Native
• React Native Components
• React Hooks
• Node.js and npm

Approach

The “Random Joke­s Generator” app seamlessly retrieves joke­s from an external API (https://icanhazdadjoke.com/), continuous supply of humor. Its user-friendly inte­rface boasts a well-structured layout that consists of a title­, a joke container, and an easily acce­ssible “Get a Joke” button, e­nabling smooth interaction. The app enhance­s the visual experie­nce by presenting joke­s in an elegant white containe­r with rounde­d corners and shadows. With just a simple click on the­ button, users can enjoy fresh joke­s 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(
                "https://icanhazdadjoke.com/",
                {
                    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: