React Native State Example Tutorial

Hi Guys,

This example is focused on how to use state in functional component in react native. it's a simple example of a state example in react native. This tutorial will give you a simple example of how state works in react native. This post will give you a simple example of how to use state in react native. Alright, let’s dive into the steps.

The state is like a component’s personal data storage. The state is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!

You can add a state to a component by calling React’s useState Hook. A Hook is a kind of function that lets you “hook into” React features. For example, useState is a Hook that lets you add state to function components.

Step 1: Download Project

In the first step run the following command to create a project.

expo init PropsDemo

Step 2: App.js

In this step, You will open the App.js file and put the code.

import React, { useState } from 'react';
import { StyleSheet, Text, View, StatusBar, Button } from 'react-native';

const App = () => {
    const [value, setValue] = useState('Divyesh');

    const addChange = () => {
        setValue('Bhavesh');
    }

    const reset = () => {
        setValue('Divyesh');
    }

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Welcome {value} !</Text>
            <View style={styles.buttonView}>
                <View style={styles.button}>
                    <Button 
                        title='change'
                        onPress={() => addChange()}
                    />
                </View>
                <View >
                    <Button 
                        title='Reset'
                        onPress={() => reset()}
                    />
                </View>
            </View>
            <StatusBar backgroundColor={'blue'}/>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    text: {
        fontSize:28,
        fontWeight:'bold',
    },
    buttonView: {
        marginTop:15,
        flexDirection:'row',
    },
    button: {
        marginRight:10,
    },
});

export default App;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...