Written By:
yashpal
5 minute read
ReactNativeReactNative StateMobile Application

What is The State in React Native

Posted in Programming     MARCH 25, 2021

In react native, there are two types of things that control components; props and state. The props are only set ones while creating a component but for the data that is needed to change based on the user experience, we have to use the state for that.

State in React Native?

The state is a property of a component that can be changed when an event occurs. Like we have a button to change the theme or background of an app into the dark and light mode that is nothing but a state. Whenever we press the button, it changes the state to its reverse like if currently, the app has light mode then it changes to dark mode. all these things happened using state.

The state is a mutable thing that can be changed anytime when we required it and we use the constructor to initialize the state and whenever we need to update it we use the built-in function setState to make changes. Remember, whenever we change a state react-native automatically reloads all the components. So we don't need to reload the components by ourselves.
Let's understand the state using a working example.


In this example program, we are building an app that has a login button and whenever we click on that button, it automatically changes the background of the app. And for this, we are going to use the random() function to generate a new RGB value every time when we click on the button.

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default class App extends React.Component{ 
 constructor(){
   super();
   this.state = {
     randomColor: null
   };
 }
getRandomColor = () => {
  return(
    "rgb(" +
    Math.floor((Math.random() * 256)) +
    "," +
    Math.floor((Math.random() * 256)) +
    "," +
    Math.floor((Math.random() * 256)) +
    ")"
  )
}
 myButtonPressed = () => {
   this.setState({randomColor: this.getRandomColor()})
 }
  render(){
    return(
      <View style={[styles.container, {backgroundColor: this.state.randomColor}]}>
        <TouchableOpacity onPress={this.myButtonPressed}>
        <Text style={styles.text}>Login</Text>
        </TouchableOpacity>
      </View>

    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    backgroundColor: "#BB2CD9",
    paddingHorizontal: 40,
    paddingVertical: 10,
    color: "#FFFFFF",
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "#FFFFFF"
  }
});

Output

state in react native state in react native


Code Explanation

Here, first, we import the StyleSheet, Text, View, TouchableOpacity that we are going to use in this program. TouchableOpacity is a built-in component that is used to set a onPress() method on another component that is not clickable. Just like in the above code, we set the onPress() method on a Text component using the TouchableOpacity component.

Next, we define and export a class App as a default component, and by using the constructor we defined a variable randomColor using state and set its value to null. The constructor is a method that runs automatically by default whenever we call the class App.

Next, we define a method called getRandomColor() that returns a random value of an RGB color using the built-in module Math.

Next, we define a method called myButtonPressed() and inside it, we use the setState() method to set the random value of randomColor variable using the getRandomColor() function.

Next, in the render() method, we return a view in which we define a Text component and on that, we set a onPress() method that will call the myButtonPressed() function whenever we press on the Login text. and using the myButtonPressed() we update the state or value of the randomColor variable. and whenever we set the new state react-native automatically reload the component with respect to the current state. and using the style property we set the new value of the background color of the View.

So, remember we only need to use the state when we want to change any component. and it is necessary that we need to use the setState() method to change the state of a component.

Also Read: What is React Native?


   IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS