Create a Number Guessing App using React-Native

The Number Guessing App is a simple mobile game where the user tries to guess a random number generated by the app. The app provides feedback to the user, indicating whether their guess is too high or too low, and keeps track of the number of attempts it takes to guess the correct number. In this article, we will learn how to create a Number-Guessing Game using React Native.

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

• Node.js and npm (Node Package Manager)
• React Native
• Expo CLI (for development)
• JavaScript/ES6
• An Android or iOS emulator or a physical device for testing

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: Start Coding

- :

• Generate a random number between a specified range (e.g., 1 to 20).
• Allow the user to input their guess.
• Provide feedback on whether the guess is too high, too low, or correct.
• Display a congratulatory message when the user guesses the correct number, along with the total attempts made.

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, head, input, etc.

- :

This title explains what the app does. We use the text "Guess a Number between 1 to 20" to show that the app is to play Guess the Number Game.

-

This TextInput is used to get a number from the user. We will show what the user types using a state variable called "term." When you type or change the text in the TextInput component, we will use the handleChange function with the onChangeText prop to update the value.

- :

This button is used to call the checkGuess function when the user taps on it. It is made with the TouchableOpacity component, which makes the Text component interactive for the user.

- :

Before we talk about the checkGuess function, let's look at the generateRandomNumber function. This function creates a random number between 1 and 20 using Math.floor and Math.random. It saves this number in the secretNum state variable. We use useState to set this up, and it generates and updates the number only once, when the app starts.

- :

This function checks the number that a user inputs, called term, and compares it with a secret number called secretNum. It stores the result in a variable called newResult based on a few conditions:

1. If the user does not enter any number (the input is an empty string), newResult will be set to "Enter Valid Input."
2. If the number entered is not between 1 and 20, `newResult` will be set to "Enter a valid number between 1 and 20."
3. If the number is between 1 and 20, the function compares it to `secretNum`:
   1. If the term is lower than secretNum , newResult is set to "Lower."
   2. If the term is higher than secretNum , newResult is set to "Higher."
   3. If the term is the same as secretNum , it assigns a message to newResult that says "Yippee, correct! It took you ${stepCount + 1} ${stepCount === 1 ? "step" : "steps"}." (For example: "Yippee, correct! It took you 4 steps.")

Finally, the function updates the state with the value of newResult using setResult on the result state variable, so the user can see the result directly.

- :

Show the result by putting the result state variable inside a Text Component. This variable should be updated by the checkGuess 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

Your Number Guessing App is now ready for users to enjoy! You can expand on this basic example by adding more features and enhancing the user interface.