React Native State And Props

React Native is a JavaScript framework to build mobile applications which are supported by both Android as well as the iOS platform. React Native apps are coded just once and are available for both the platforms, which helps to save the development time.

To know more about React Native setup for Android, visit my other article from the below link.

How To Set Up React Native Development Environment For Android Apps

In this article, we are going to learn what state and props are and how to use these. There are two types of data in React Native which control component -

State
Props

State

State is internal to a component in React Native that is used to keep track of the information.

State is mutable
Used within the component (limited to current component)
Initialize within constructor
Used “this.setState” to update object.
Can get initialize from parent component but cannot be changed from a parent component
Can set initialize the value for child component and cannot be changed in the child component
Can set default values inside component and can be changed inside component.
Examples: - User interaction within component like filling forms, checkboxes, buttons click

Syntax

state = {myState: 'value'}

Props

Props is the short form for properties and can be referred to something that can be changed dynamically in a component. Here, the component receives props from the parent component.

Props are Immutable
Used to passed data from parent to child.
Used to pass data as well as callback functions as props.
Can get initialize from parent component and can be changed from a parent component
Can set initialize the value for child component and can be changed in the child component
Can set default values inside component and can be changed inside component
Examples :- Used child component in the parent component.

Syntax

props.myState

Example

Before starting the coding part, we are removing the extra line of code from the App.js file and making it simple so that we easily target React Native state and props.

Note

In this example, I am using Windows 10 and targeting Android application, not iOS application. So, if you are using this code for iOS, the output for iOS might be different in look.

Change App.js file code like below and refresh the screen.

import React, { Component } from "react";
import { View, Text } from "react-native";
class App extends Component {
render() {
return (
<View>
<Text style={{ fontSize: 40, color: "blue" }}>Hi React Native</Text>
</View>
);
}
}
export default App;

O/P

the output should be like below.

Note

Press “control + m” button on the keyboard and select the "Reload" option to refresh the screen or to check output after changes in the code.

Example for State

In the below example, I have added myName variable and assigned value as 'Hi React Native Android' and printed that value using React Native state using syntax {this.state.myName}

import React, { Component } from "react";
import { View, Text} from "react-native";
class App extends Component {
constructor() {
super()
this.state = {
myName: 'Hi React Native Android'
}
}
render() {
return (
<View>
<Text style={{ fontSize: 40, color: "blue" }}>{this.state.myName}</Text>
</View>
);
}
}
export default App;

O/P

The output should be like below.

To change state value

I have added a “Button” from React Native to change the value of state. By using the user-defined handleChange function, I have updated/changed state variable value.

Button

This is a basic component in React Native that should render nicely on any platform.
onPress - handler to be called when user tap the button
title - Text to display inside the button
color - for Android its background color and in iOS color of the text.

import React, { Component } from "react";
import { View, Text, Button } from "react-native";
class App extends Component {
constructor() {
super()
this.state = {
myName: 'Hi React Native Android'
}
}
handleChange = () => {
this.setState({ myName: 'Welcome To React Native Android Application' })
}
render() {
return (
<View>
<Text style={{ fontSize: 40, color: "blue" }}>{this.state.myName}</Text>
<View style={[{ width: "70%", margin: 50, backgroundColor: "red" }]}>
<Button
onPress={this.handleChange}
title="Set State"
color="#FF3D00"
/>
</View>
</View>
);
}
}
export default App;

O/P

The output should be like below before the button is clicked.

O/P

The output should be like below after button-click.

Example for Props

In the below example, I have created a new JavaScript file with the name child.js and added a component as ChildComponent.

Main component code - (App.js)

Import ChildComponent from child.js and pass myPropValue as props and handleChange function as props into it where handleChange function helps to change value of state in parent component which get call from child component.

import React, { Component } from "react";
import { View, Text } from "react-native";
import ChildComponent from "./child";
class App extends Component {
constructor() {
super()
this.state = {
myName: 'Hi React Native Android'
}
}
handleChange = () => {
this.setState({ myName: 'Value updated by React Native Props' })
}
render() {
return (
<View>
<ChildComponent myPropValue={this.state.myName} handleChange={this.handleChange} />
</View>
);
}
}
export default App;

child.js code

This component will receive props from the parent component. Look below for learning how to use it.

onPress

Using this.props, we call the handleChange event from the child component to change the value of state in the parent component.

import { View, Text } from "react-native";
class ChildComponent extends Component {
render() {
return (
<View>
<Text style={{ fontSize: 40, color: "blue" }}
onPress={this.props.handleChange}
> {this.props.myPropValue}</Text>
</View>
);
}
}
export default ChildComponent;

O/P

The output should be like below before clicking on the text.

O/P

The output should be changed like below after clicking on the text.

Conclusion

In this article, I have explained what state and props are and how to use them in React Native while developing Android apps. Hopefully, it will help you.