React-native-tab-view: Cannot get route to re-render with new props following README.md

[f6m6]

I have the following code in my 'parent' component:

  _renderScene = SceneMap({
    '1': () => <Weight weights={ramda.path(['user', 'user', 'weights'], this.props)} />,
    '2': StepsRoute,
    '3': SleepRoute,
  });

which, if i save the file for , forcing a hot reload, will work. (To clarify, ramda.path call returns undefined until the this.props.user.user.weights is defined and then returns it).

I followed the instructions in README.md i.e. I added loaded.false to state (and tried changing the line renderScene={this.renderScene} torenderScene={_this.renderPage}` although I don't understand what that would do, and it caused an error), and it still doesn't reload when the props come through to the parent component.

Is there a more detailed guide or example for getting my <Weight> component (i.e. a "route") to reload when the props to the parent component (the one importing TabViewAnimated, TabBar and SceneMap) are updated?

Thank you!

[satya164]

Don't use SceneMap if you need to use this.props. Check the examples folders for alternative usage.

[kylebebak]

@satya164 @farhanmannan

I had the same issue. There is no examples folders (plural). There's an example folder, which doesn't have any readily available info on solving this problem.

Linking to the relevant documentation might be a nice idea, it looks like it's right here in the README.

To get this working I added a componentWillReceiveProps that toggles a boolean in the state every time new props are received. I also had to remove the SceneMap. As far as I can tell, removing SceneMap alone is not sufficient to solve this problem.

[benhannel]

Thanks @kylebebak for pointing me in the right direction. For anyone who needs a little more detail about how to get a tab to re-render, there are two things you must do. The relevant state must be in the navigationState prop, and you must replace SceneMap (as below)

_renderScene = SceneMap({
'1': () => ,
'2': () =>
});

with something more like this

_renderScene = function(route) {
const scenes = {
'1': ,
'2':
};
return scenes[route.route.key];
};