WHAT IS STATE & PROPS IN REACT NATIVE

Share the post

Hello All, In the last topic, We had discussed createStackNavigator in react native. Today we will see the most important concept in react native called state & props. In this topic, We will discuss What is state & props in react native with the help of an example? React native works on state & props which handle the component. The component which contains the state is changeable. This means the value can be changed. On other hand, The component which contains props is not changeable. They remain constant.

What is state in react native?

  • state handling / controlling the component in react native
  • values are changeable

Example of state in react native

  • Create a new page in react. Copy & paste the App.js into the root directory & rename it to HomePage.js
  • import the Component from ‘react’ as shown below
import React, { Component } from 'react';
  • Extend the class with Component
export default class HomePage extends Component {
 render() {
        return (
            <View style={styles.container}>
               
            </View>
        );
    }
}
  • Initialize it with some value inside constructor & update the value in setState as explained in the following example
  • We will take one example of a state which changes the text inside the button. In this example we will set the text for the button to ‘Ok’ & then after pressed the button we will call updateTextBtn() function to assign the new text to button ‘Button Pressed’.
import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';


export default class HomePage extends Component {
    state = {
        okState: 'Ok'
    }

    updateTextBtn = () => this.setState({
        okState: 'Button Pressed'
    });

    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.updateTextBtn} title={this.state.okState} />
            </View>
        );
    }

}

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

Output

What is props in react native?

  • props are nothing but Properties In React Native
  • props also handling/controlling the component in react native
  • value is not changeable.

Example of props in react native

  • Create a new page in react. Copy & paste the App.js into the root directory & rename it to HomePage.js
  • import the Component from ‘react’ as shown below
import React, { Component } from 'react';
  • Extend the class with Component
export default class HomePage extends Component {
 render() {
        return (
            <View style={styles.container}>
               
            </View>
        );
    }
}
  • We will create a login page that expects a username & password. We pass these values with the help of props defined in another class. See the below example to get more clearity.
import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

class Class1 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <TextInput style={styles.default} value={this.props.username} />
                <TextInput style={styles.default} value={this.props.password} />

            </View>
        );
    }
}


export default class HomePage extends Component {

    render() {
        return (
            <View style={styles.container}>
                <Class1 username="THIS IS USERNAME" />
                <Class1 password="THIS IS PASSWORD" />
            </View>

        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },

    txtclass: {
        fontsize: '1.2em'
    }
});


Output

Props Example
Output

With the help of above explanation & examples, We had learned about state & props in react native.

1 thought on “WHAT IS STATE & PROPS IN REACT NATIVE”

Leave a Comment