Dynamically Generate Random Color on Button Click in React Native

This tutorial is very simple but interesting for beginners who wish to¬†Dynamically Generate Random Color on button onPress in react native android and iOS application example tutorial in RGB color format by calling a function. So let’s get started ūüôā .

Contents in this project Dynamically Generate Random Color on Button Click :

1. Import StyleSheet, View and Button component in your project.

2. Create constructor() in your project. 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.

3. 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.

4. Create a View and Button inside render’s return block. Now we would call both Style Class and set¬†backgroundColor using¬†ColorHolder State. After that we would call¬†ChangeColorFunction() on Button onPress event.

5. Create CSS Style Class.

6. Complete source code for App.js File :

Screenshot in Android device:

Dynamically Generate Random ColorScreenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *