React Native Code for Generating Random Colors in Components

Here is an example of React Native code that generates random colors and applies them to different components.

The application is called "bgChange04" and is selected in the image below.

When you run the application, you will see a button and three geometric figures, a cauadrado, a triangle and a circle, which will change color when you press the Press Me button.

Imports: The code starts by importing the necessary React and React Native modules, such as useState, StatusBar, StyleSheet, Text, TouchableOpacity and View. These modules are required to create and style components in React Native.

App Function: The App function is the main component of the application. It uses arrow function syntax and returns a React JSX element. This component is the entry point of the app and is rendered on the screen.

State: The App component uses the useState hook to manage the state of the application. Several state variables are defined, such as randomBackground, randomBgSquare, randomBorderBottomColor and randomBgCircle, along with their respective setRandom... methods. methods to update the state. These state variables are used to store the generated random colors.

generateColor function: This function is used to generate random colors. It uses a hexRange string containing the hexadecimal characters and a for loop to generate a random 6-digit hexadecimal color. It then updates the corresponding state variables with the generated colors.

Rendering: The render method of the App component returns the JSX to be rendered on the screen. It uses React Native tags such as StatusBar, View and TouchableOpacity to create the UI structure. It also uses styles defined in the styles object to apply styles to the components.

Styles: The styles object contains styles defined using the StyleSheet.create method. These styles are applied to the different UI components, such as the main container, action button, figure elements, and more.

In summary, this code shows how to create an app in React Native that generates random colors and applies them to different UI components. It uses the useState hook to manage the state of the app and provides a function to generate random colors.

Video of the application in operation

The code is as follows

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useState } from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

function App(): React.JSX.Element {
  const [randomBackground, setRandomBackground] = useState("#000000");
  const [randomBgSquare, setRandomBgSquare] = useState("#EEC213");
  const [randomBorderBottomColor, setRandomBorderBottomColor] = useState("#3498DB");
  const [randomBgCircle, setRandomBgCircle] = useState("#2ecc72");

  const generateColor = () => {
    const hexRange = "0123456789ABCDEF";
    const getRandomColor = () => {
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += hexRange[Math.floor(Math.random() * 16)];
      }
      return color;
    };

    setRandomBackground(getRandomColor());
    setRandomBgSquare(getRandomColor());
    setRandomBorderBottomColor(getRandomColor());
    setRandomBgCircle(getRandomColor());
  };

  return (
    <>
      <StatusBar backgroundColor={randomBackground} />
      <View style={[styles.container, { backgroundColor: randomBackground }]}>
        <TouchableOpacity onPress={generateColor}>
          <View style={styles.actionBtn}>
            <Text style={styles.actionBtnTxt}>Press me</Text>
          </View>
        </TouchableOpacity>
        <View style={styles.figContainer}>
          <View style={[styles.square, { backgroundColor: randomBgSquare }]}></View>
          <View style={[styles.triangle, { borderBottomColor: randomBorderBottomColor }]}></View>
          <View style={[styles.circle, { backgroundColor: randomBgCircle }]}></View>
        </View>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  actionBtn: {
    borderRadius: 12,
    backgroundColor: "#6A1B4D",
    paddingVertical: 10,
    paddingHorizontal: 40
  },
  actionBtnTxt: {
    fontSize: 24,
    color: '#FFFFFF',
    textTransform: 'uppercase'
  },
  figContainer: {
    flexDirection: 'row',
    marginTop: 25,
    alignItems: 'stretch',
    justifyContent: 'space-around',
  },
  square: {
    width: 100,
    height: 100,
    marginLeft: 10,
    marginRight: 10
  },
  triangle: {
    width: 0,
    height: 0,
    borderLeftWidth: 40,
    borderLeftColor: 'transparent',
    borderRightWidth: 40,
    borderRightColor: 'transparent',
    borderBottomWidth: 80,
    borderBottomColor: 'lightblue',
    backgroundColor: 'transparent',
    marginLeft: 10,
    marginRight: 10
  },
  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginLeft: 10,
    marginRight: 10
  }
});

export default App;