In our previous tutorial we have learn about using Single states in react native hooks. This tutorial is the 2nd part of States in React Native Hooks tutorial. In this tutorial we would learn about How to use Multiple States in React Native Hooks Functional Component. As we all know react native Hook comes with much easier coding options for a developer which makes it easy to understand, easy to read and easy to write. Many of us don’t know how states used in Hooks and how we can change State value in React native Hooks. So today we would learn about using multiple states in React Native Hooks. So let’s get started .
Contents in this project How to use Multiple States in React Native Hooks Functional Component:
1. Open your project’s main App.js file and import useState and useEffect from React.
|
1
|
import React, { useState, useEffect } from ‘react’;
|
2. Import View, StyleSheet, TouchableOpacity and Text component in your project.
|
1
|
import { View, StyleSheet, TouchableOpacity, Text } from ‘react-native’;
|
3. Create our main export default function FirstApp(). This is our main default function. In functional component we would call the function as default code rendering block.
|
1
2
3
4
|
export default function FirstApp() {
}
|
4. Creating a State named as varOne . To change the varOne State value we would make a function named as setOne. Now we would set the State value as Zero.
|
1
|
const [varOne, setOne] = useState(0);
|
5. Creating another State named as varTwo. We would also make a function named as setTwo to change the State value.
|
1
|
const [varTwo, setTwo] = useState(0);
|
6. Creating one more State named as varThree. We would make a make a function named as setThree to change the State value.
|
1
|
const [varThree, setThree] = useState(0);
|
7. Creating 3 constant functions named as changeOne, changeTwo and changeThree. Inside each function we would call the State functions to update the State value and print on Terminal screen after done update.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const changeOne=()=>{
setOne(varOne + 1) ;
console.log(‘State One Value = ‘ + varOne);
}
const changeTwo=()=>{
setTwo(varTwo + 1) ;
console.log(‘State Two Value = ‘ + varTwo);
}
const changeThree=()=>{
setThree(varThree + 1) ;
console.log(‘State Three Value = ‘ + varThree);
}
|
8. Creating Return block and here we would make a Root View component and then we would make 3 Touchable Opacity buttons. We would call above all 3 methods each on Button Click event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, TouchableOpacity, Text } from ‘react-native’;
export default function FirstApp() {
const [varOne, setOne] = useState(0);
const [varTwo, setTwo] = useState(0);
const [varThree, setThree] = useState(0);
const changeOne=()=>{
setOne(varOne + 1) ;
console.log(‘State One Value = ‘ + varOne);
}
const changeTwo=()=>{
setTwo(varTwo + 1) ;
console.log(‘State Two Value = ‘ + varTwo);
}
const changeThree=()=>{
setThree(varThree + 1) ;
console.log(‘State Three Value = ‘ + varThree);
}
return (
<View style={styleSheet.MainContainer}>
<TouchableOpacity onPress={changeOne} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> Change State One Value </Text>
</TouchableOpacity>
<TouchableOpacity onPress={changeTwo} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> Change State Two Value </Text>
</TouchableOpacity>
<TouchableOpacity onPress={changeThree} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> Change State Three Value </Text>
</TouchableOpacity>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
padding: 10,
},
button: {
width: ‘80%’,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#33691E’,
borderRadius:5,
marginBottom: 20,
height: 45,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 20
}
});
|
Screenshots:
Also Read :
React Native Send SMS on Button Click From App iOS Android Example Tutorial
Example of React Native Keep Awake To Prevent Screen Sleep
React Native Getting Started With React Navigation 3.x Tutorial to Add Activity
Use React Native Ionicons Icon in Android iOS App Example
IF-Else & Nested IF-Else conditional statement in React Native example
