React Native – Restart/Reset Current Screen

In some cases, we need to restart or reset the screen again and React Native does not provide the default refresh component to restart the screen. So in that case react-native-restart can help you by providing RNRestart Component.

To Import the Component
import RNRestart from 'react-native-restart';
To Restart or Reset the Current Screen
RNRestart.Restart();

For using react-native-start we have to install it using npm

npm install react-native-restart --save

after that you have to link that using 

react-native link react-native-restart

App.js code

import React, {Component} from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
import RNRestart from 'react-native-restart';
  
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }
  componentDidMount() {
    this._interval = setInterval(() => {
      this.setState({
        counter: this.state.counter + 1,
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this._interval);
  }

  onButtonClick = () => {
    RNRestart.Restart();
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>Example of React Native Restart</Text>
        <Text style={styles.paragraph}>{this.state.counter}</Text>
        <View>
          <Button title="Restart Screen" onPress={this.onButtonClick} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 30,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

0 0 vote
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x