Component State in React Native - GeeksforGeeks

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.  
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 : 
 
For full working application, Checkout the link : GithubNow, lets see an example to know more about the props :
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: 
This article is contributed by Saket Kumar. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@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. 
sagar0719kumar
GBlog
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
DSA Sheet by Love Babbar
Working with PDF files in Python
10 Best IDE For Web Developers in 2022
Top 10 System Design Interview Questions and Answers
Genetic Algorithms
A Freshers Guide To Programming
Supervised and Unsupervised learning
Top 5 Python Libraries For Big Data
XML parsing in Python