Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (Restart/Reset Current Screen In React Native Without Mounting It Again).
In this note series, We will learn how to Restart / Reset Current Screen In React Native without mounting it again. React Native does not provide the default refresh component to restart the screen. In some cases, we need to restart or reset the screen again. If we are using React Navigation then we have a choice to mount the screen again and to refresh the screen have a look at Refresh Previous Screen after Going Back in React Navigation but in the normal case, if we need to refresh the screen then react-native-restart can help us by providing RNRestart Component.
So Let’s begin.
To Import the Component
import RNRestart from 'react-native-restart';
To Restart or Reset The Current Screen In React Native
RNRestart.Restart();
Example
In this example, we are going to make a single screen with a setInterval which will update the counter in every second. We will have a button below the counter and on the press of the button, we will refresh the screen.
Example Project Setup
To demonstration of Restart/Reset Current Screen, we have to follow the below steps:
- Create a new React Native project
- Install the Dependency
- Install CocoaPods
1. Create a new React Native project
Assuming that we have node installed, we can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cliRun the following commands to create a new React Native project.
react-native init ProjectNameThis will make a project structure with an index file named App.js in your project directory.
2. Install the Dependency
To install the dependencies, open the terminal and jump into our project
cd ProjectNameNow run the following commands to install the dependencies
npm install react-native-restart --save
3. Install CocoaPods
We need to install pods for the iOS
cd ios && pod install && cd ..
Example Code to Restart/Reset Current Screen In React Native
Now Open App.js in any code editor and replace the code with the following code.
// Restart/Reset Current Screen in React Native Without Mounting it Again
// import React in our code
import React, { useState, useEffect } from "react";
// import all the components we are going to use
import {
SafeAreaView,
Text,
View,
Button,
StyleSheet,
TextInput,
} from "react-native";
import RNRestart from "react-native-restart";
const App = () => {
const [value, setValue] = useState("");
useEffect(() => {
// Resetting default value for the input on restart
setValue("Default Value");
}, []);
const onButtonClick = () => {
RNRestart.Restart();
};
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.container}>
<Text style={styles.heading}>Example of React Native Restart</Text>
<Text style={styles.paragraph}>
Insert any value in Input and Click Restart Screen. You will see
blank TextInput again.
</Text>
<TextInput
placeholder="Please Insert Something"
defaultValue={value}
placeholderTextColor="#808080"
underlineColorAndroid="transparent"
onChangeText={(text) => setValue(text)}
style={styles.textInputStyle}
/>
<View style={{ marginTop: 20 }}>
<Button title="Restart Screen" onPress={onButtonClick} />
</View>
</View>
<Text
style={{
fontSize: 18,
textAlign: "center",
color: "grey",
}}
>
Restart/Reset Current Screen in React Native
</Text>
<Text
style={{
fontSize: 16,
textAlign: "center",
color: "grey",
}}
>
www.coolmonktechie.com
</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
padding: 10,
},
textStyle: {
textAlign: "center",
fontSize: 18,
color: "black",
},
heading: {
fontSize: 18,
fontWeight: "bold",
textAlign: "center",
},
paragraph: {
fontSize: 16,
marginVertical: 16,
textAlign: "center",
},
textInputStyle: {
fontSize: 25,
textAlign: "center",
height: 50,
backgroundColor: "#d6d6d6",
},
});
export default App;
To Run the React Native Example Code
Open the terminal again, and jump into our project using
cd ProjectNameTo run the project on an Android Virtual Device or on real debugging device
react-native run-androidor on the iOS Simulator by running (macOS only)
react-native run-ios (macOS only).The output of example code is as below:
After click the Restart Screen button, the output is as below :
Conclusion
In this note series, we understood how to Restart/Reset Current Screen in React Native Without mounting it again. This article showed the example code to Restart/Reset Current Screen in React Native.
Thanks for reading ! I hope you enjoyed and learned about Restart/Reset Current Screen Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
You can also follow official website and tutorials of React Native as below links :
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING!!???
