React-native-router-flux: Bug Tabbar ScrollableTabView

[remch1990]

Version

Tell us which versions you are using:

• react-native-router-flux 4.0.0-beta.21
• react-native 0.48.3

OS Android. In the construction of the router I have the following configuration:

   <Tabs
      key="tabs"
      swipeEnabled
      showLabel={true}
      tabBarPosition={'bottom'}    >     

               <Stack key="home" title={'people'} name_icon={''people'} icon={TabIcon} initial >
                      <Scene key="_home" component={People} renderTitle={() => this.search()}  />
                  </Stack>
                   ...other scenes
</Tabs>

Inside the tab view I have a ScrollableTabView and in the app I can not see anything, just the scroll bar of the ScrollableTabView but not the content.

<ScrollableTabView ref="ref_people' renderTabBar={() => <Submenu />}  >
        <View tabLabel={'discover'} style={basicStyles.background}>
          <Discover/>
        </View>
        <View tabLabel={'suggestions'} style={basicStyles.background}>
          <Suggestions/>
        </View>
        <View tabLabel={'myFriends'} style={basicStyles.background}>
          <MyConnections/>
        </View>
</ScrollableTabView>

any way to solve this?

if I put lazy = {true} I can see the contents of the view correctly.

[mcabs3]

Which ScrollableTabView are you using? you own or a third party?

[remch1990]

https://github.com/skv-headless/react-native-scrollable-tab-view

[shukerullah]

Scrollable-Tab-View not working if we add it inside Tabs.

I faced this issue only on Android

Solution

Add delay to show ScrollableTabView

componentDidMount() {
    setTimeout(() => {
      this.setState({
        isLoaded: true
      });
    }, 100);
}