CODEWITHSUNDEEP
react-nativenavigationreload
Emerald
Emerald

Reputation: 874

Reload previous screen in React Native

I've been using this way to refresh the previous screen when triggering a button from the current screen.

Screen A

constructor(props){
  ...
  this.handleOnNavigateBack = this.handleOnNavigateBack.bind(this);
}

handleOnNavigateBack = (foo) => {
  this.setState({ foo })
}

goToScreenB(){
  this.props.navigation.navigate('ScreenB', {
    onNavigateBack: this.handleOnNavigateBack
  })
}

Screen B

goBackToScreenA(){
  this.props.navigation.state.params.onNavigateBack(this.state.foo)
  this.props.navigation.goBack()
}

I need to keep the function inside the parameters first so that it can be triggered when going back from screen b. But this is okay to use if it is from 1 screen to 1 screen. If I have a multi layer screen been navigated such as

from Screen A -> Screen B -> Screen C,

and go back

from Screen C -> Screen B -> Screen A then reload the function at Screen A, it will be troublesome.

Or maybe the situation is :

from Screen A -> Screen B, then from Screen B replace Screen C, then from Screen C -> Screen A then only reload the function at Screen A.

By doing so, I have to keep passing the function to reload when every navigation taken place. So I was wondering if there is a way to capture the screen entered and fire the specific function that you want like how Ionic did.

In Ionic case, there is an event called ionViewWillEnter where it helps to perform this reloading thing without going through with the function registration and all. You simply call out the function and that's it.

I've been trying to find a way that is working similar to this at React Native but I can't have it work around. I've heard about redux but never implement it as I still can't understand how it works so I'm trying not to use it first.

Upvotes: 0

Views: 2797

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

Based on your question you are looking for something similar to 'ionViewWillEnter' which will run a callback whenever a screen is focused.

Given that you are using React Navigation v5 The hook useFocusEffect serves the same purpose of running a function whenever a screen is focused this includes navigating back to a screen as well.

From the documentation

Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using focus and blur events, it's not very ergonomic.

The code would be something like this

  useFocusEffect(
    React.useCallback(() => {
      alert('Screen focused')
      // Do something when the screen is focused
      return () => {
        alert('Screen was unfocused');
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

You can find the documentation here https://reactnavigation.org/docs/use-focus-effect/

If your requirement is updating the data by passing something from screen B or C you can think of using Context which is easy to use or if you are planning to to use redux that is also a possible alternative.

Upvotes: 1

Related Questions