React Native Component State Example Tutorial

In this react native tutorial for android and iOS application development, we are going to look at react native state.

If you are new to react native, you can follow my tutorials on other core aspects of react native. The good thing is that we have real life example project you can learn from or use in your own project

In my previous tutorial on react native props, we learned that props are immutable that is once a value is assigned to a props it is not possible to update or modify this value at run-time.

But what if we want a value change when an external or internal event occurs or a condition toggle from true to false? So how do we achieve this condition? Welcome to the world of react native state.


What is react native state

State is used in react native components when we know that a data will change. React native state is mutable. A react native component can be stateless or stateful. It is always advisable to use stateful component where it is absolute necessary.

React native state is define as a component property. It has a key – value pair. The key is used to access the value of a state and setState() method is use to set a new value of a key. Below is an example of how to initialize a state.

this.state = {
      firstInput: "",
      secondInput: "",
      isValidated: false

When the setState() method is called, the react native component is re-rendered to update changes in UI.


When to use react native state

As I mention before, there are two ways to pass data to react native component – pros and state. First you need to check if it is a data that will not change in that case you can use a props.

You can use react native component state when you want to update the component UI due to a change in state of a component. One example of this is using an input text box or a switch to change the content of a UI text.

Since react native make use of timer events, it is also one of the use case for component state. We can set a time interval and use the setState() method to update the value of a state and in turn can pass data to a child component through props or directly update a UI.


How do we use state in react native component

We have been talking too much about react native state and in you mind you are asking when will we go into the code example. The time is now.

We are going to look at some examples of how to use state in our component. We are going to create an app that will let a user to add his firstname and lastname in two different InpuText and when the submit button is clicked, the app will display the fullname a user has entered. We will check for empty field to make sure that a user has entered information in both fields.

In future tutorials, we will learn more about input validation and sanitization.

If you have not created a react native application before, I will suggest you have a look at my setting up react native tutorial in Windows.

To have an idea of what we are going to create in the tutorial, I have add a screen-shot below.

react native state


To crate a new React Native Project

1. Go to the directory where you want your project to live.

2. Open the command line interface

3. cd to change to your working directory

4. Run the following command

react-native init projectname


Run your react native app

Once the project is created, cd to the project folder and run any of these commands depending on the platform

react-native run-android or react-native run-ios


Component Boilerplate

The following component boilerplate code is created and we will use it as the starting point of our application.

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          My first react native app. Amazing feature
        <Text style={styles.instructions}>
          To get started, edit App.js
        <Text style={styles.instructions}>

We are going to add two TextInput and a Button components. We will also initialize the component state property in the class constructor. The code is simple and straight forward as shown below.

import React, { Component } from 'react';
import {
} from 'react-native';

export default class App extends Component<{}> {


    this.state = {
      firstInput: "",
      secondInput: "",
      isValidated: false

    console.log('Button has been pressed');
    if(this.state.firstInput !== "" && this.state.secondInput !== ""){
      this.setState({isValidated: true});
      this.setState({isValidated: false});

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.viewWrapper}> 
          <Text style={{color: 'white'}}>Enter Firstname</Text>
          <TextInput style={styles.inputbox} onChangeText={(inputValue) => this.setState({firstInput: inputValue})}  />

        <View style={styles.viewWrapper}> 
          <Text style={{color: 'white'}}>Enter Lastname</Text>
          <TextInput style={styles.inputbox} onChangeText={(inputValue) => this.setState({secondInput: inputValue}) } />

          <Button onPress={() => {this. _displayResult()}} title="Login"  />

         <View style={{margin:30}}>
           <Text style={styles.mTextColor}> {this.state.isValidated ? this.state.firstInput + " " +  this.state.secondInput : "" } </Text>

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

    marginBottom: 30,

    color: '#ffffff'

  inputbox: {
    width: 300,
    height: 35,
    color: '#cccccc'
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,

I do hope we have learn something in this tutorial, if everything works for you, you will get app similar to what is on the screen-shot above.

If you encounter an error, you can check a list of issues and errors you can get while developing for react native application.

If you have a question about this tutorial or suggestion on how to improve this tutorial, kindly use the comment box below to drop a message.

Add a Comment