React-native-router-flux: Re-render scene when back button is pressed

Created on 23 May 2016  路  6Comments  路  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using (react native 0.26 is required for v3):

  • react-native-router-flux v3.26.0
  • react-native v0.26.1

Expected behavior

Re-render the component when the scene is loaded by pressing the back button. The data for the page doesnt have any way to be updated without hard exiting and reloading the app.

Actual behavior

No lifecycle events at all are called (render, componentWillReceiveProps, componentWillMount, componentDidMount)

question

All 6 comments

You can create your own Reducer to handle navigation state. Check out the detailed example for details.

+1

Has this feature been implemented? @anthonywebb were you able to find a solution to your issue?

I ended up putting my data in a reducer, but I don't think that is the ideal implementation.

@anthonywebb You may try to use Actions.refresh(data) before Actions.pop. I've just added onBack property to latest 3.26.22
However it will not help for gesture back. Looks like upcoming 0.27/0.28 version will have separate onBack handler for this.

but why not just have it do a render cycle on focus?
it feels weird having to make a custom reducer just for some data that is already there (but does not show because no re-render)
edit:
this re-renders on back:

if (action.type === FOCUS_ACTION) {
    return Object.assign({}, state, {number:state.number+1})
}

with:

@connect(
  state => ({number: state.number})
, dispatch => ({/*stuff*/})
)
export default class Search extends React.Component {
...

I think it would be very confusing to call react lifecycle methods when react itself wouldn't. The reducer is simple to implement and is an easy solve for those who want that level of control.

@ThaJay I'm afraid your suggestion would not work in complex apps, and would create performance issues.

Was this page helpful?
0 / 5 - 0 ratings