A Short Note – How To Restart/Reset Current Screen In React Native Without Mounting It Again ?

|

CoolMonkTechie

by

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:

  1. Create a new React Native project
  2. Install the Dependency
  3. 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-cli

Run the following commands to create a new React Native project.

react-native init ProjectName

This 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 ProjectName

Now 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 ProjectName

To run the project on an Android Virtual Device or on real debugging device

react-native run-android

or 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 :

React Native Official Website

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!!???

Loading

Leave a Comment