Storing value locally is very important for react native without using Local Database because database has its lot’s of configuration and it would make the work lengthy if we have to save few values. React Native has its own solution for this by giving us a proper fully ready component named as AsyncStorage, AsyncStorage is used to store value locally in both Android and iOS react native applications by providing us a Key factor. Developers can retrieve saved value from anywhere or any activity in complete application using the Unique Key. So in this tutorial we would going to Get Save Value Locally using AsyncStorage in App Cache Memory in iOS Android React Native App Example Tutorial.
Note: The stored value is permanent and can be accessible after closing the app or restarting the mobile until its been deleted.
Procedure covered in this App:
- Retrieve value from TextInput and saved in App using AsyncStorage.
- Showing saved value in Text component.
Contents in this project Get Save Value Locally using AsyncStorage in App Memory in Android iOS React Native App Example Tutorial:
1. Import StyleSheet, View, AsyncStorage, TextInput, Alert, Text and TouchableOpacity component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, AsyncStorage, TextInput, Button, Alert, Text, TouchableOpacity } from ‘react-native’;
|
2. Create constructor() in your project and make 2 State named as textInputData and getValue.
textInputData : This state is used to store TextInput entered value.
getValue : This state is used to store AsyncStorage stored value inside it to display on screen.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
constructor()
{
super();
this.state={
textInputData : ”,
getValue : ”
}
}
|
3. Create a function named as setValueLocally() in your class. Inside this function we would store the State value with a Unique key created by myself Key_27, Now it means this key would contain the State value inside and we can access this value from any where in the app using this key, You can set your key name its upon you.
|
1
2
3
4
5
6
7
|
setValueLocally=()=>{
AsyncStorage.setItem(‘Key_27’, this.state.textInputData);
Alert.alert(“Value Stored Successfully.”)
}
|
4. Create a function named as getValueLocally(), Inside this function we would retrieve the Stored value using our Key_27 key and again store the value in getValue State. We would use this state to show the value on screen using Text component.
|
1
2
3
4
5
|
getValueLocally=()=>{
AsyncStorage.getItem(‘Key_27’).then((value) => this.setState({ getValue : value }))
}
|
5. Creating 1 TextInput, 2 Buttons using TouchableOpacity and 1 Text component inside render’s return block.
TextInput : Used to retrieve value from application user.
TouchableOpacity : Creating 2 Buttons to call the above both functions.
Text : Used to display the Stored value.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Some Text here”
onChangeText={ data => this.setState({textInputData : data}) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyle}
/>
<TouchableOpacity onPress={this.setValueLocally} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> SAVE VALUE LOCALLY </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.getValueLocally} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> GET VALUE LOCALLY SAVED </Text>
</TouchableOpacity>
<Text style={styles.text}> { this.state.getValue } </Text>
</View>
);
}
|
6. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
margin: 10
},
TextInputStyle:{
textAlign: ‘center’,
height: 40,
width: ‘100%’,
borderWidth: 1,
borderColor: ‘#028b53’,
borderRadius: 10
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius:7,
marginTop: 10
},
buttonText:{
color:‘#fff’,
textAlign:‘center’,
},
text:{
fontSize: 20,
textAlign: ‘center’
}
});
|
7. Complete source code for App.js File :
|
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import React, { Component } from ‘react’;
import { StyleSheet, View, AsyncStorage, TextInput, Button, Alert, Text, TouchableOpacity } from ‘react-native’;
export default class Project extends Component {
constructor()
{
super();
this.state={
textInputData : ”,
getValue : ”
}
}
setValueLocally=()=>{
AsyncStorage.setItem(‘Key_27’, this.state.textInputData);
Alert.alert(“Value Stored Successfully.”)
}
getValueLocally=()=>{
AsyncStorage.getItem(‘Key_27’).then((value) => this.setState({ getValue : value }))
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Some Text here”
onChangeText={ data => this.setState({textInputData : data}) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyle}
/>
<TouchableOpacity onPress={this.setValueLocally} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> SAVE VALUE LOCALLY </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.getValueLocally} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> GET VALUE LOCALLY SAVED </Text>
</TouchableOpacity>
<Text style={styles.text}> { this.state.getValue } </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
margin: 10
},
TextInputStyle:{
textAlign: ‘center’,
height: 40,
width: ‘100%’,
borderWidth: 1,
borderColor: ‘#028b53’,
borderRadius: 10
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius:7,
marginTop: 10
},
buttonText:{
color:‘#fff’,
textAlign:‘center’,
},
text:{
fontSize: 20,
textAlign: ‘center’
}
});
|
Screenshots:
Also Read :
React Native Custom JSON ListView With Images and Text Example
Create Transparent Background View in React Native Android iOS
React Native Getting Started With NativeBase Cross Platform UI Components
How to change Image border color in React Native Tutorial
Create Simple Splash Screen in React Native Android iOS App Tutorial
