Embedding react-native-tab-view in scrollview is not working

[yasodha-r]

Current behavior

It perfectly works fine with non scrollable views. But when it is wrapped inside Scrollview, tabview route contents disappearing. But it is already mentioned in Readme as - 'Avoid rendering TabView inside ScrollView' and 'So avoid doing it if possible'. My question is it possible to wrap it in Scrollview like this,

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

Expected behavior

To be able to run inside Scrollview

Reproduction

https://snack.expo.dev/kv0RZ0qCK

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.6
react-native	0.64.2
expo	NA
node	v12.22.1
npm or yarn	7.19.1

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.2, latest: 0.66.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[TeyimPila]

Current behavior

It perfectly works fine with non scrollable views. But when it is wrapped inside Scrollview, tabview route contents disappearing. But it is already mentioned in Readme as - 'Avoid rendering TabView inside ScrollView' and 'So avoid doing it if possible'. My question is it possible to wrap it in Scrollview like this,

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

Expected behavior

To be able to run inside Scrollview

Reproduction

https://snack.expo.dev/kv0RZ0qCK

Platform

• [x] Android
• [x] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package version react-native-tab-view 3.1.1 react-native-pager-view 5.4.6 react-native 0.64.2 expo NA node v12.22.1 npm or yarn 7.19.1

Trying to get this to work has consumed my entire day. Please, let me know if anyone finds a solution to this. I am now considering react-native-collapsible-tab-view which seems to work in scrollview but it is not as popular as this

[yasodha-r]

@TeyimPila Thanks for the response. But react-native-collapsible-tab-view animations are not smooth as this. Another option could be react-native-scrollable-tab-view

[TeyimPila]

@TeyimPila Thanks for the response. But react-native-collapsible-tab-view animations are not smooth as this. Another option could be react-native-scrollable-tab-view

I was able to find a hack for this. I achieved it by giving the TabView style prop a height. The problem with this is that the hight is fixed and thus not suitable for variable-length content

[timi-codes]

@TeyimPila Thanks, man. This works like magic

[TheSalarKhan]

thanks @TeyimPila

[jamesisaac]

Related issues and PRs (aiming to fix the variable-length content use case):

#1178 #1198 #1237

[sergey-king]

any updates on this?

[leethree]

we have dynamic content inside the tabs. it was working in v2. but the height shrinks to 0 with v3.

would greatly appreciate any workaround that allows for variable-height content.

[vargajacint]

Any update?

[thuantvDr4]

change style ={{flex:1}} inside scrollview to contentContainerStyle={{flex:1}}

hope useful to you!

[Deepa-Palani]

If anyone want to make a tabview with scrollview when there is more than three tabs please enable scroll in tabbar.it made my tabview scrollable.i have followed below code <TabBar {...props} scrollEnabled indicatorStyle={styles.indicator} style={styles.tabbar} tabStyle={styles.tab} labelStyle={styles.label} />

[sergey-king]

Any update?

[IzaELK]

Hello, I have the same issue. I want to have my tab bar and tab view in a scrollView. I have a component above my tab view. You can see what I want to achieve in the following diagram. I cannot fix the height of my scrollView because my content's length is variable. Do you have any updates or fixes?

[iamemmanuel-dev]

@IzaELK Please, have you found a solution to this

[leethree]

@turhansel the issue is about having TabView inside ScrollView. not the other way around.

[Gguigre]

On our side we decided to use patch-package to apply those changes until they are validated/merged. https://github.com/satya164/react-native-tab-view/pull/1237/files

For us it works like a charm. We had the same usecase as @IzaELK :)

[leethree]

@Gguigre I applied the patch and found that we also needed to revert a recent react-native-pager-view change of childrenWithOverriddenStyle (by removing the additional layer of View. see https://github.com/callstack/react-native-pager-view/commit/d22414e06c56b9c707c61f86270881185584f44e#diff-fed4d75f8ae11fb98e76134b44730daee2a90bb6ed422d0ad418755853542d40). Now it works as a temporary workaround.

[patrickschmelter]

I can't seem to get it working using above pull request. I use the tab view inside a screen of react-navigation/native which forces me to use a { flex: 1 } on the contentContainerStyle of the ScrollView

[okwasniewski]

Closing as it is a duplicate of #1349 which is resolved.

[devunt]

It is not resolved yet, the same as #1349.

[ThukuWakogi]

After days of trying to find a solution, I decided to settle with react-native-collapsible-tab-view.

[vlkpa]

Migrating react-navigation and updating react-native-tab-view from 2.16.0 to 3.3.0 causes this problem.