React-native-router-flux: Force scene re render on back action

[goncalomarques]

Using RNRF v3.3.7 and react-native v0.39.0.

When pressing the back button on the navbar, I expect the previous scene to render it's component again. This could be a wrong expectation though, so, is there any way to force the update?

[ddolheguy]

No it shouldn't re-render by default. There are several ways to achieve this though.

1. Use Action.pop({ type: ActionConst.REFRESH })

2. Use the Action.pop({ somedata: 'result' }) with new props and the previous will re-render with the componentWillRecieveProps.

[iWebi]

@ddolheguy This did not work for me. Previous scene was shown but none of the react component lifecycle methods of the component were called.

[goncalomarques]

Thanks @ddolheguy, but it didn't work.

When using Action.[key]({type: ActionConst.REFRESH}) , the REACT_NATIVE_ROUTER_FLUX_REFRESH action is dispatched, but there isn't a screen render at all, the app mantains the same component.

When using Action.pop, I get the following error message: You are already in the root scene.

[JeroenNelen]

Can confirm that the type REFRESH does not has the expected behaviour.
It would be very, very, vey handy if there was a possibility to trigger a (re)render of the scene component when arriving on a specific scene (for refetching data etc.)

[MovingGifts]

When navigating forward, we have a componentWillMount method to hook into.
When navigating back, there is no method to hook into.

A method like componentIsVisible for example, would be great to put inside a scene, where it would execute any code in it whenever it is the top visible item in the scene stack. Including when we pop/back_action from another scene unto it.

This router is good for basic navigation and has an easy to use API, but it is pretty frustrating when it comes to things like this.

[leifdenby]

I've been trying to find a workaround for this for ages and finally found a robust method. My approach is to provide my own "reducer" for the navigation state and pass a prop to every scene that makes it possible in the scene's componentDidMount to indicate that a method should be called on the scene component when the component is brought into focus. I've put my code on github here: https://github.com/leifdenby/react-native-router-flux-focus-hook. Hope this is useful.

[MovingGifts]

@leifdenby I tried it out but it doesn't seem to work when navigating back to a scene that has your code's methods via Actions.pop()

I tested with an alert like this:

handleNavigationSceneFocus() {
    alert('focused');
}

and included your setup. The alert only works when I navigate/push to Scene A, then push from there to Scene B where I press something, which takes me to a second instance of Scene A (alerts here).

But when I go back from the second instance of Scene A to Scene B, then pop Scene B, it takes me back to the original Scene A but the alert does not run.

Shouldn't the alert run when popping back to Scene A?

[leifdenby]

@MovingGifts there might be other actions that I should hook onto when navigating. The easiest way to work this out would be to put in some debugging information in the reducer (https://github.com/leifdenby/react-native-router-flux-focus-hook/blob/master/index.js#L37). Once you find out what is missing I'd be happy to accept a pull request :)

[markhaasjes]

+1

[markhaasjes]

In my case I need to update the title within the NavBar and this part is doing the trick for me. I found the solution in Issue #1381.

Actions.pop({ refresh: { title: 'new title' } }

[codeNgamer]

@markhaasjes i followed @leifdenby cue and created https://github.com/codeNgamer/react-native-router-flux-hooks , you can hook into all ActionConst events now, just add what event you want.

[codeNgamer]

@leifdenby also, let me know if you wanna merge and I can submit a pr :)

[leifdenby]

@leifdenby also, let me know if you wanna merge and I can submit a pr :)

Definitely! :)

[shenders13]

Hi all, I was wondering if it would be possible to add a forceRenderOnFocus key on the Scene. For example:
<Scene key={HomeKey} component={Home} forceRenderOnFocus={true}/>

At present I'm using @leifdenby react-native-router-flux-focus-hook to solve the "Scene isn't re-rendering onFocus after the back button is pressed" problem.

But it means that I can't upgrade from react-native-router-flux "3.37.0" as that's what @leifdenby's hook uses. It also means I have to add the following code block to every component I want to renderOnFocus:

  componentDidMount() {
    const { navigationStateHandler } = this.props;
    navigationStateHandler.registerFocusHook(this);
  }

  componentWillUnmount() {
    const { navigationStateHandler } = this.props;
    navigationStateHandler.unregisterFocusHook(this);
  }

  handleNavigationSceneFocus() {
    this.forceUpdate();
  }

which bloats my codebase somewhat.

Very appreciative for your time in advance.

[tomerbarak]

 <Scene key="root" >
          <Scene  key="sceneA" component={SceneA} />
          <Scene  key="sceneB" onBack={() => Actions.sceneA()} component={SceneB} />
  </Scene>

[FrenchMajesty]

@shenders13 's solution is a great one.

If my scene A is Dashboard and my scene B is Profile.
User open Dashboard -> go to Profile -> update Profile (automatically redirected to Dashboard after hitting the Save button).
Now if user press the back button from the Dashboard on Android then it takes them to the previous Profile page without updating the state and it will show old information.

Having the forceRenderOnFocus prop would allow me to have Profile screen refresh whenever user hit the back button and they would see up to date information.