React Native tab view inside a scrollview

Question

expo demo

I'm trying to use react-native-tab-view with scrollable content, but having the tabview start half way down a scrollable page like:

    <View style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        <SomeContent />
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={initialLayout}
            style={{flex: 1}}
        />
      </ScrollView>
    </View>

However when I run this on ios nothing renders below the tabs. If I remove the top level scrollview then the whole thing will render but obviously only the tab itself is scrollable.

Any advice would be appreciated

Answer 1

this issuse almost drove me crazy, this is the solution:

<View style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        <SomeContent />
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={initialLayout}
            style={{height:1000}}
        />
      </ScrollView>
    </View>

add height to your tab view and it would work

Answer 2

This is a known issue with react-native-tab-view v3 You can temporary downgrade to v2 ([email protected]).