React-native-tab-view: Tab inside scroll view on android not working

[acollazomayer]

Current behaviour

I have a ScrollList with two components one with information and the second one is a tab view. I want to be able to scroll the page in order to see the tabs sections which may change in height.

On iOS the behaviour is correct, i am able to scroll down the page with no problem, and switching the tabs with no issues at all. However on android i cant scroll the scroll view.

Expected behaviour

The expected behaviour is that i can scroll the scroll view.

Code sample

const { content } = this.props;
    return (
      <ScrollView
        style={styles.container}
        onScroll={this.onScroll}
        scrollEventThrottle={100}
      >
        <ContentInfo content={content} />
        { content.type === 'series' ? <SeriesContent /> : <MovieContent content={content} /> }
      </ScrollView>
    );

MovieContent Component

<View style={styles.container}>
        <TabView
          navigationState={{ index, routes }}
          renderScene={({ route }) => {
            switch (route.key) {
            case 'first':
              return error ?
                <Text style={[TextStyles.error, styles.error]}> { error } </Text> :
                <ContentGridList items={related} scrollEnabled={false} />;
            case 'second':
              return <Trailers />;
            default:
              return null;
            }
          }}
          onIndexChange={key => this.setState({ index: key })}
          initialLayout={{ width: Dimensions.get('window').width }}
          renderTabBar={props => (
            <TabBar
              {...props}
              indicatorStyle={{ backgroundColor: Colors.main }}
              style={{ backgroundColor: Colors.secondary }}
              labelStyle={TextStyles.titleSmall}
            />
          )}
        />
      </View>

Your Environment

| software | version
| --------------------- | -------
| android |
| react-native | 0.55.4
| react-native-tab-view |1.02

[acollazomayer]

I just see that the tabs are not rendering. Dont know why might this happen

[imansalhi]

i have exactly same problem to ......:(

[binoalien]

https://github.com/react-native-community/react-native-tab-view/issues/537

[adcuz]

I have the same. This is a real show stopper. The only way for it to work in Android is to set the parent container of the TabView to a fixed height, which is not practical. Anyone know any alternative tab libraries that would work?

[WestFR]

Same issue on my new development app !
Any solution without fixed height ?

[satya164]

Please don't nest TabView inside ScrollView. Whatever feature you're trying to achieve, this is not the optimal way and will cause perf issues if you have any listview inside the tabs. See https://github.com/react-native-community/react-native-tab-view/issues/107#issuecomment-287708043