Create Jokes Generator App using React-Native

In this article, we are going to build a joke 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.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Playground

Note: This Section is to interact with the app which you are going to build.

Prerequisites / Technologies Used

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

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press " a" as mentioned in the image below.
  • For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app .
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Add dependencies

Add the below dependencies in package.json.

package.json:

{
 "dependencies": {
 "react-native-paper": "^5.14.0",
 }
}

Now, run the following command in the terminal to install the above dependencies.

npm install

Step 4: Start Coding

- :

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.

Let's dive into the code in detail.

- :

Import required libraries at the top of the file.

- :

Create a StyleSheet to style components like container, title, jokeContainer, etc.

- :

This title explains what the app does. We use the text "Random Jokes Generator" to show that the app is to generate a random joke.

- :

This joke container is made using a Text component inside a View component, with some styling. It shows the joke each time the "joke" state variable changes.

- :

This button is used to call the getJoke function, which generates a random joke. It is made using a Text component that shows the words "Get a Joke" inside a TouchableOpacity component.

- :

This is used to make a get request from provided URL inside the code and set the joke to joke state variable by calling setJoke useState function.

Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.

Complete Source Code

App.js:

Output: