Skip to content
Related Articles

Related Articles

Component State in React Native

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 Mar, 2022

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.  


import React, { Component } from 'react';
import {
} from 'react-native';
export default class GeeksForGeeks extends Component {
  state: {
    password: string,
    isPasswordHidden: boolean,
    toggleText: string,
  constructor(props: 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}>
          style={{ width: 400, height: 50, backgroundColor: '#212D3B', color: 'white' }}
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 : 


For full working application, Checkout the link : Github
Now, lets see an example to know more about the props :


import React, { Component } from 'react';
import {
} 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);

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 or mail your article to 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
Recommended Articles
Page :

Start Your Coding Journey Now!