Create and Call State in Functional Component in React Native Hooks

States is a dynamic type of value which can be change on program runtime and dose update the UI Components in react native. States are purely mutable and their value can be changed later. The main purpose of State is to store values which can be updated dynamically and their effect show on screen. In old Class component structure we would use this.state to declare state and used this.setState({}) to update the state value. In new functional component we would use use useState() to declare the State and among with it we can define the State name and The function from which the State value will be updated. So in this tutorial we would learn about Create and Call State in Functional Component in React Native Hooks Android iOS Example Tutorial.

Contents in this project Create and Call State in Functional Component in React Native Hooks Android iOS Example Tutorial:

1. Import React, useState and useEffect package in your react native project’s main App.js file.

2. Import View, StyleSheet, Button and Text component.

3. Creating our main export default function FirstApp(). This is our main Root functional component.

4. Creating a Constant variable array with two values count and setCount and declare them using useState(0).  See the below screenshot to understand properly how this works.

5. Creating return() block and here we would make 1 Text component and 1 Button component. We would call the setCount() function on button click event and increase the count value to Plus 1 on every click. We would also set the Text value as count to show the counting on screen.

6. Creating Style.

7. Complete Source Code for App.js file:

Screenshots: