Component State in React Native

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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);

chevron_right


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 :

For full working application, Checkout the link : Github

Now, lets see an example to know more about the props :

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
import {
  AppRegistry,
  Image
} from 'react-native';
  
export default class GeeksForGeeks extends Component {
  
  render() {
    const image = {
    };
    return (
      <Image source={image} style={{padding: 186, flex: 1, alignSelf: 
'center',  justifyContent: 'center', resizeMode: 'contain', }}/>
    );
  }
}
  
AppRegistry.registerComponent('GeeksForGeeks', () => GeeksForGeeks);

chevron_right


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:

This article is contributed by Saket Kumar. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



My Personal Notes arrow_drop_up


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.