Component State in React Native

Last Updated : 30 Apr, 2024

Introduction to React Native
How React Native works?

There are two types of data that control a component :

props : are immutable and are set by the parent and they are fixed throughout the lifetime of a component.
state : is mutable. This means that state can be updated in the future while props can't. we can initialize state in the constructor, and then call setState when we want to change it.

props v/s state

Use props to pass data and settings through the component tree.
Never modify this.props inside of a component; consider props immutable.
Use props to for event handlers to communicate with child components.
Use state for storing simple view state like whether or not drop-down options are visible.
Never modify this.state directly, use this.setstate instead.

store: A store holds the whole state tree of the application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's just an object with a few methods on it and I'll explain about it upcoming articles on React Native.
A more explained way to understand the difference between props, state and store on how and where to use these components.

Lets take an example to know more about the state:

For example, let's say we want to make text that shows/hide the password from the TextInput layout. The "whether the password is hidden or not" changes over time, so that should be kept in state.

JavaScript

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity
} from 'react-native';

export default class GeeksForGeeks extends Component {

  state: {
    password: string,
    isPasswordHidden: boolean,
    toggleText: string,
  }

  constructor(props: Props) {
        super(props);
        this.state = {
          password: '',
          isPasswordHidden: true,
          toggleText: 'Show',
        };
    }

    handleToggle = () => {
    const { isPasswordHidden } = this.state;

    if (isPasswordHidden) {
      this.setState({ isPasswordHidden: false });
      this.setState({ toggleText: 'Hide' });
    } else {
      this.setState({ isPasswordHidden: true });
      this.setState({ toggleText: 'Show' });
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          secureTextEntry={this.state.isPasswordHidden}
          style={{ width: 400, height: 50, backgroundColor: '#212D3B', color: 'white' }}
        />
        <TouchableOpacity
          onPress={this.handleToggle}
        >
          <Text>{this.state.toggleText}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('GeeksForGeeks', () => GeeksForGeeks);

Here, We have initialized state in the constructor, and then called setState when we want to update it. We're actually using two states. One for updating the boolean for password is hidden or not and one for the string text of Show/Hide password. After running the application, you will see something like this :

JavaScript

import React, { Component } from 'react';
import {
  AppRegistry,
  Image
} from 'react-native';

export default class GeeksForGeeks extends Component {

  render() {
    const image = {
      url: 'https://www.appcoda.com/wp-content/uploads/2015/04/react-native.png'
    };
    return (
      <Image source={image} style={{padding: 186, flex: 1, alignSelf: 
'center',  justifyContent: 'center', resizeMode: 'contain', }}/>
    );
  }
}

AppRegistry.registerComponent('GeeksForGeeks', () => GeeksForGeeks);

Now Here, we're actually fetching the image from the url and displaying it on the app. If you'll notice, now we are just using one link displaying the image. There is no update done by someone else using the app. This is basically called props.

Demo after running the application:

Component State in React Native

kartik

Improve

Article Tags :

GBlog

Component State in React Native

Similar Reads

Thank You!

What kind of Experience do you want to share?