React Native State – Learn How to Manage State

React Native State

This post will help you to Learn How to Manage State in React Native. Components are the UI that helps to design your imagination but the real data in the app is managed by State and Props. Here is an example of React Native State.

Props and State in React Native

Props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use State. A state should be initialized in the constructor, and whenever you want to change the value of any state variable you should use setStateThe state is very easy and tricky at the same time. As it depends on you how to use it. Let’s take an example.

We have two texts and the value of the text is just some numbers. The numbers are increasing and decreasing every second. To perform this action in other languages

  • We have to manage the variables which will store the value that should be printed, every second
  • We have to increase or decrease the value and then we have to set the variable on the text.

But in the case of React, we bind the state of variables with each text and in every second we just set the state which will result in the re-render of the view.

Code

Here is the example to Manage State in React Native

App.js

//sample Example to understand React Native State//
import React from 'react';
//To import the react.

import { Text, View } from 'react-native';
//To import all the required elements we are going to use.
 
export default class App extends React.Component {

  constructor(props) {
    super(props);
    // State sould be defined in constructor of class. 
    this.state = {valx:0, valy:100000000};
    // you can define N number of key value paires like JSON.
    setInterval(() => {
      this.setState({valx : this.state.valx+1});
      this.setState({valy : this.state.valy-1});
    }, 1000);
    // Simple interval fundtion which will run in every second.
    // It will increase valx and decrese valy
  }

  render() {
    return (
      <View>

        <Text>{"Hello I am valx. I am increasing "+this.state.valx}</Text>
        {/*// Here we have bind the state of valx with the above text.
        // So whenever the setState called to change value of the valx
        // Text Component will be re-render every time.
        // valx will change in 1 Sec in our example.*/}

        <Text>{"Hello I am valy. I am decreasing "+this.state.valy}</Text>
        {/*// Here we have bind the state of valy with the above text.
        // So whenever the setState called to change value of the valy
        // Text Component will be re-render every time.
        // valy will change in 1 Sec in our example.*/}

      </View>
    );
  }
}

Output Screenshot

Output in Online Emulator

Another example can be an Activity Indicator (Loader) which will be needed while doing some networking tasks to block the screen. You can manage the visibility of form and Activity Indicator with the help state. As the visibility should be bind with the isLoading variable and whenever you perform a network task It should be changed to true which will hide the form and will show the Activity Indicator and vice-versa.

That was the React Native State. If you have any doubts or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂


Related Posts

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.