How to Generate Random Numbers in React Native ?

Generating random numbers is a fundamental aspect of React Native development. It enables various functionalities like generating game elements, creating unique identifiers, and implementing randomized UI components. In this article, we are going to see how we can generate a random number by using React Native.

To generate random numbers in React Native, use `Math.random()` for a decimal value between 0 and 1. Combine it with `Math.floor()` to obtain whole numbers within a specified range.

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

Demo Video

Prerequisites

• Introduction to React Native
• React Native Components
• React Native State
• Expo CLI
• Node.js and npm (Node Package Manager)

Approa​ch

• Specify the range (min and max).
• Generate a random decimal number (0-1) with Math.random().
• Scale the number by multiplying it by the range difference.
• Shift the number by adding the minimum value.
• Round down to the nearest integer with Math.floor().
• Store or use a random number.

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, 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

Example: In this example, the state initializes with a null randomNumber. Pressing the "Random Number" button triggers generateRandomNumber, generating a random number within a range. Updating the state triggers re-rendering. Basic styling is applied with StyleSheet.

- : Import required libraries at the top of the file.

- : Create a StyleSheet to style components like container, button, buttonText, etc.

-: This text provides clarity about the capabilities of the button below.

- : Here is the code to create a button that shows "Random Number" on the screen. This button is made using a Text component, and it is wrapped in a TouchableOpacity component, which allows users to click it like a button. When the user taps the button, it calls the function called generateRandomNumber to get a random number.

- : This function is used to generate a random number by using the Math.random() function and updating the state variable randomNumber by calling setRandomNumber useState with new random number.

After updating the value of the randomNumber variable with new random number, we are displaying that using below code.

Now, wrap the "Text above button", the "Random Number button", and the "Random Number text" inside a View component, and then return it from the App component. Also, ensure that the App component is exported.

Complete Source Code

App.js:

Output