React Native Generate Random Color on Button Click

This tutorial explains how to dynamically generate random color on button onPress in react native android and iOS application. In this example we are going to generate rgb color by calling rgb function.

Dynamically Generate Random Color on Button Click in React Native :

Lets see the complete source code App.js component that helps to dynamically generate random color on button onPress in react native android and iOS 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 File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

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

Step 4: Lets create constructor block inside your App component.Now make a State named as ColorHolder in constructor() and define the default color in HEX color code. You can also define color code in RGB format. This state is used to set the default View background color.

constructor() {

    super();
    this.state = { ColorHolder: '#00BCD4' }
  }

Step 5: Create a function named as ChangeColorFunction(). Now we would use the Math.floor and Math.random() function for generate random color and store the generated color into a Var . Now we would set that Var into ColorHolder State.

ChangeColorFunction = () => {

    var ColorCode = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    this.setState({
      ColorHolder: ColorCode
    })
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component. 

render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >
        <Button title="Change View Background Color" onPress={this.ChangeColorFunction} />
      </View>
    );
  }

Step 7 : Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },

  });

Complete Source Code for App.js 

Lets see the complete source code that helps to dynamically generate random color on button onPress in react native android and iOS application.

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


export default class App extends Component {

  constructor() {

    super();
    this.state = { ColorHolder: '#00BCD4' }
  }

  ChangeColorFunction = () => {

    var ColorCode = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    this.setState({
      ColorHolder: ColorCode
    })
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >
        <Button title="Change View Background Color" onPress={this.ChangeColorFunction} />
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },

  });

Screenshot :

This is all about React Native Generate Random Color on Button Click. 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.