React-native-tab-view: Clarification about re-rendering

Created on 8 Aug 2017 · 4Comments · Source: satya164/react-native-tab-view

https://github.com/react-native-community/react-native-tab-view#caveats - the docs make it clear that the tab won't necessary re-render if the parent state changes. However I don't understand what we need to do to force it to re-render.

I have a scene that renders information that comes from firebase database. I don't have the content for the first tab when we render the tab. The loading of the data happens like few seconds after the tab is rendered.

I've set this state in my constructor

this.state= {
            index: 0,
            routes: [
                {key: '1', title: 'Offen'},
                {key: '2', title: 'Ergebnisse'},
            ],
            analysis: props.analysis,
            loaded: false
        }

And I later change my state like this:

    componentWillReceiveProps(nextProps) {
        this.setState({analysis: nextProps.analysis, loaded: !this.state.loaded});
    }

And I render the component with this code:

<TabViewAnimated
                        style={{flex: 1}}
                        navigationState={this.state}
                        renderScene={this.scenes}
                        lazy={false}
                        renderHeader={this._renderHeader}
                        onRequestChangeTab={this._handleChangeTab}
                    />

But this doesn't rerender the scene. However if I change the index to -1 in the constructor, then the tab is properly rendered once the data arrives?

I've defined my scenes in the constructor like this:
```
this.scenes = SceneMap({
'1': () => this.renderOpen(),
'2': () => this.renderResults(),
});
````
What am I missing here?

Source

compojoom

👍3

Most helpful comment

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.