React Native Generate Random Number Between 1 to 100 in Android or iOS

In this tutorial we are going to generate random number between 1 to 100 in react native application. To generate random in react native application we are going to use JavaScript inbuilt function Math.floor() and Math.random() function is used in this tutorial. The Math.floor() function is used to round the given number to its downward integer value. The Math.random() function is used to Generate Random Number to any range in Point Float value. So we would use both Math.floor() and Math.random() function together to generate random number between given range.

In this example we are displaying random number in android screen, when user clicks on generate random number button. we are using below javascript function to generate random number :

Math.floor(Math.random() * 100) + 1 

Generate Random Number In React Native :

Lets see the below complete source code that helps to display and generate random number in react native application.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open App.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components that required for react native application development.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Button, Text } from "react-native";

Step-4: First Create the App class inside the app.js file, Then Create constructor in your App class and call the super method inside constructor. Now using this.state we are defining the numberHolder as state. This state object  is used to store the random generated number, when user clicks on "random generate" number button.

 constructor() {
    super();
    this.state = {
      // This is a default value...
      numberHolder: 1

    }
  }

Step-5:  inside the App class create function named as generateRandomNumber. This function helps to generate random number and update the random generated value in state object.

generateRandomNumber = () => {
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    this.setState({ numberHolder: randomNumber })
  }

Step-6: Implement render method and place below layout design inside the render block. 

• When user clicks on generate random number button,then it will display the random number in Text component layout.

render() {
    return (
      <View style={styles.container}>

        <Text style={styles.headerText}>{this.state.numberHolder}</Text>

        <Button title="Generate Random Number" onPress={this.generateRandomNumber} />

      </View>

    );
  }

Step-7 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },  
});

Complete Source Code for App.js 

Lets see the complete source code that helps to generate and display the random generated number in screen when clicks on "generate random number" button.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Button, Text } from "react-native";

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      // This is a default value...
      numberHolder: 1

    }
  }

  generateRandomNumber = () => {
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    this.setState({ numberHolder: randomNumber })
  }


  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.headerText}>{this.state.numberHolder}</Text>

        <Button title="Generate Random Number" onPress={this.generateRandomNumber} />

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },  
});

Screenshots :

This is all about React Native Generate Random Number Between 1 to 100 in Android or iOS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.