Hello friends, As you all know we are trying our best to make tutorials in easy language so even the beginners can understand it properly. Today we would learn about a new react native NPM package known as React Native Restart. The React Native Restart package is used to reload reset or restart the react native application without closing it. The main use of React Native Restart is it will allow us the reload the App bundle on app test run time easily using a single button. But now the main use of React Native Restart which can we do in our apps is that for example If we have a large form base application where we have too many text inputs and if user wants to just empty or reset them without closing the application. Then here comes the React Native Restart. It will restart the application screen without remounting our closing it.
Contents in this project Example of React Native Restart NPM Package Reload Reset App :-
1. First of all we have to install the React Native Restart NPM package in your react native project. So open your project’s main Root directory and execute below command.
|
1
|
npm install —save react–native–restart
|
Screenshots :-
2. Now open your app’s main App.js file and import useState, useEffect, View, StyleSheet, Text, TextInput, and TouchableOpacity component.
|
1
2
3
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, Text, TextInput, TouchableOpacity } from ‘react-native’;
|
3. Import RNRestart from ‘react-native-restart’ package.
|
1
|
import RNRestart from ‘react-native-restart’;
|
4. Creating our main functional component named as App.
|
1
2
3
4
5
|
export default function App() {
}
|
5. Creating a State named as data with State update method setData.
|
1
|
const [data, setData] = useState(”);
|
6. Creating useEffect() with Empty Array which works as componentdidmount(). Here we would call some default value for date data using its method setData.
|
1
2
3
|
useEffect(() => {
setData(‘Default Value’);
}, []);
|
7. Creating a function named as reSet(). We would call this function on Touchable Opacity button click event. in this function we would call RNRestart.Restart() method to reset or restart the screen without mounting it again.
|
1
2
3
|
const reSet = () => {
RNRestart.Restart();
}
|
8. Creating return() block, Now we would make 1 Text Input and 1 Touchable Opacity button inside it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
return (
<View style={styleSheet.MainContainer}>
<Text style={{fontSize: 28, fontWeight: ‘bold’, textAlign: ‘center’}}>
React Native Restart Example
</Text>
<TextInput
placeholder=“Enter Any Value”
// value={data}
underlineColorAndroid=“transparent”
onChangeText={(d) => setData(d)}
style={styleSheet.textInputStyle}
/>
<TouchableOpacity onPress={reSet} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> Reset Screen </Text>
</TouchableOpacity>
</View>
);
|
9. 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
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInputStyle: {
textAlign: ‘center’,
height: 40,
width: ‘90%’,
borderWidth: 1,
borderColor: ‘#4CAF50’,
borderRadius: 7,
marginTop: 12,
marginBottom: 20
},
button: {
width: ‘100%’,
paddingTop: 5,
paddingBottom: 5,
backgroundColor: ‘#00BCD4’,
borderRadius: 7,
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
}
});
|
10. 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
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, Text, TextInput, TouchableOpacity } from ‘react-native’;
import RNRestart from ‘react-native-restart’;
export default function App() {
const [data, setData] = useState(”);
useEffect(() => {
setData(‘Default Value’);
}, []);
const reSet = () => {
RNRestart.Restart();
}
return (
<View style={styleSheet.MainContainer}>
<Text style={{fontSize: 28, fontWeight: ‘bold’, textAlign: ‘center’}}>
React Native Restart Example
</Text>
<TextInput
placeholder=“Enter Any Value”
// value={data}
underlineColorAndroid=“transparent”
onChangeText={(d) => setData(d)}
style={styleSheet.textInputStyle}
/>
<TouchableOpacity onPress={reSet} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> Reset Screen </Text>
</TouchableOpacity>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInputStyle: {
textAlign: ‘center’,
height: 40,
width: ‘90%’,
borderWidth: 1,
borderColor: ‘#4CAF50’,
borderRadius: 7,
marginTop: 12,
marginBottom: 20
},
button: {
width: ‘100%’,
paddingTop: 5,
paddingBottom: 5,
backgroundColor: ‘#00BCD4’,
borderRadius: 7,
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
}
});
|
Screenshots :-
Also Read :
React Native justifyContent style Explained With Example Tutorial
React Native Walkthrough Tooltip NPM – Android iOS Example
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
Wish You All a Very Very Happy New Year 2018
React Native Change Image Source Dynamically using State on Button Click
