CODEWITHSUNDEEP
react-nativescrollviewreact-native-tab-view
user2086359
user2086359

Reputation: 325

React Native tab view inside a scrollview

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

Upvotes: 4

Views: 5781

Answers (2)

Curtis Crentsil
Curtis Crentsil

Reputation: 501

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

Upvotes: 2

Patrik Vlk
Patrik Vlk

Reputation: 9

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

Upvotes: -1

Related Questions