React Native reload page

Kevin Gozali picture Kevin Gozali · Nov 18, 2017 · Viewed 52.3k times · Source

So I have an app with an activity. The app checks for Internet connection at the beginning. If there are no Internet connection, it will show a screen with a button to refresh the page. The problem is that my API calls (Axios) is located on componentDidMount() where it's called only once after the first render. Is there any way I can reload the page so it calls componentDidMount again?

I mean like total refresh. I am using EXPO btw. Any help is appreciated. Sorry there are no examples, I just wanted to get the idea if possible

Answer

Sunil tc picture Sunil tc · Dec 3, 2017

You can force update the component. Check this: https://reactjs.org/docs/react-component.html#forceupdate

It will re-render the component.

check this example:

class App extends Component{
  constructor(){
    super();
        this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  };

  forceUpdateHandler(){
    this.forceUpdate();
  };

  render(){
    return(
      <div>
          <button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button>
            <h4>Random Number : { Math.random() }</h4>
          </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));