React-native-router-flux: react-native-tab-view not working on Android when nested in a flux tab

[tasharofi]

I am using the "react-native-starter-app" but when I tried it on Androind simulator in the last tab where there are nested "react-native-tab-view", the content of the tabs are not showing and its also not possible to navigate between tabs.

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21
• react-native v0.48.1

Steps to reproduce

1. run the react-native-starter-app on android
2. go to the last tab using the bottom tabs
3. you dont see any content loaded for the top tabs (no content loaded on any of the tabs from tab view).
4. try to navigate and its not possible

[tasharofi]

For those who are experiencing the same issue, here is the solution:

<TabViewAnimated lazy style={[styles.tabContainer]} renderScene={this.renderScene} renderHeader={this.renderHeader} navigationState={this.state.navigation} onIndexChange={this.handleChangeTab} renderPager={this._renderPager} />

and

_renderPager = (props) => { return (Platform.OS === 'ios') ? <TabViewPagerScroll {...props} /> : <TabViewPagerPan {...props} /> }

Basically TabViewPagerScroll does not behave fine on Android when it comes to the nested tab views.