react native-tutorial

React Native State

For data that will change in React Native, state must be used. It can be regarded as a variable. We can save data there and edit it whenever we want.

Every time you define a state, you have to give it an initial value. After that, you can alter it whenever you want by using the setState function offered by React Native. The component being utilised will be re-rendered each time setState is invoked and the state changes.

You must import useState from “react” in order to use state.

Syntax:

const [stateName,setStateName] = useState(<initial_value>);

Creating Application

Step 1: Open your Terminal and run the below command. It will install Expo CLI globally in your system.

npm install -g expo-cli

Step 2: Now, create a new React Native Project by running the below command.

expo init "Your_Project_Name"

Step 3: You’ll be asked to choose a template. Select blank template.

blank template

Step 4: Now go to the project folder and run below command to start the server.

cd "Your_Project_Name"
npm start

Example: Open the App.js file and add the following code there.

When you launch your app, the primary file, app.js, renders first. A state named message will be created. As the default value for this state, we’ll offer an empty string. One TextInput will be available for users to enter any text message. Using the setMessage function, we will store this text string in the message state. Additionally, a message notice will appear when the user clicks the submit button on the keyboard.

App.js

import { StyleSheet, SafeAreaView, Text, TextInput } from "react-native";
import { useState } from "react";
  
export default function App() {
    const [message, setMessage] = useState("");
  
      return (
        <SafeAreaView style={styles.container}>
              <TextInput
                placeholder="Enter message here"
                value={message}
                onChangeText={(text) => setMessage(text)}
                style={styles.input}
                onSubmitEditing={() => alert(message)}
              />
        </SafeAreaView>
      );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      },
      input: {
        fontSize: 20,
        color: "#228B22",
        fontWeight: "bold"
    },
});


Output:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.