[v3] TabView's height does not expand anymore to the content size

[TPXP]

Current behaviour

I'm wrapping a Top Bar navigator in a scrollview to show additional content below some content. I want the user to be able to scroll down the page to see the content in the top bar navigator. Yet, in order to be able to scroll back up, I wrap all the page content (including the navigator) in a ScrollView. When using v2, the TabNavigator would expand to its content size, thus making it visible without having to implement a scrollview in the screens of the navigator. This does not seem to be the case anymore, as content is shrinked to the height of the navigator.

Expected behaviour

I expect the navigator's height to be maximum of the screens' heights so that the content can be scrolled

Code sample

import React from 'react';
import {View, StyleSheet, ScrollView} from 'react-native';
import {createMaterialTopTabNavigator} from "@react-navigation/material-top-tabs";

export default function Posts() {
  const Tab = createMaterialTopTabNavigator();
  return (
    <ScrollView style={{flex:1}} contentContainerStyle={{minHeight:'100%', backgroundColor:'white'}}>
      <View style={{height:300, width:200, backgroundColor:'red'}} />
      <Tab.Navigator>
        <Tab.Screen
          name={"A"}>
          {() => <>
            <View style={{height:300, width:200, backgroundColor:'orange'}} />
            <View style={{height:300, width:200, backgroundColor:'red'}} />
            <View style={{height:300, width:200, backgroundColor:'blue'}} />
            <View style={{height:300, width:200, backgroundColor:'green'}} />
          </>}
        </Tab.Screen>

      </Tab.Navigator>
    </ScrollView>
  );
}

Screenshots (if applicable)

Trying to scroll down in both cases

v2	v3

What have you tried

Downgrading to the v2 series fixes the issue

yarn add react-native-tab-view@2

... But I like my dependencies to be up to date 😄

Your Environment

software	version
ios or android	iOS (probably Android too, didn't test)
expo	Bare workflow, RNUnimodules v0.13.3
react-native	0.64.0
react-native-tab-view	v3.0.1 (issue not present in v2.16.0)
react-native-pager-view	5.1.7
node	v16.1.0
npm or yarn	Yarn 1.22.10

[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.0, latest: 0.64.1)

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

[shamxeed]

TabView shouldn't be nested inside ScrollViews.

[TPXP]

Hmm, that enables some neat interface effects like the ability to put a fullscreen image at the top of a screen, then showing multiple detail pages by scrolling.

It used to work in version 2. While I understand this may seem like a farfetched use case of the lib, our designers (and users) love this design pattern. Isn't there a way to achieve this with version 3 of the package?

[ahtishamali09]

I am facing same issue TabView Height is not expanding after updating package i got this issue and For debugging purpose i add some static height its working Fine here is the some Testing Code <TabView style={{1000}} swipeEnabled={false} navigationState={{index, routes}} renderScene={SceneMap({ first: FirstRoute, })} onIndexChange={setIndex} initialLayout={{width: layout.width}} />

"react-native-tab-view": "^3.0.1", "react-native-pager-view": "^5.1.7",

[ahtishamali09]

@TPXP did you solve this issue?

[TPXP]

@ahtishamali09 Well, as I said in the issue report, you can downgrade to version 2 as a workaround for now. I don't have a fix for v3.

yarn add react-native-tab-view@2

[JackCA]

@TPXP:

this may seem like a farfetched use case of the lib

Just throwing it out there that I'm working on multiple designs where the tab bar is not at the top of the screen initially (and thus have to be in ScrollView). Might not be farfetched.

Before I found this issue issue and downgraded to v2, I was planning on fixing this by having the inner tabs report their heights to the wrapping view to update its dimensions. Setting a height on the tab content doesn't work, but setting it on the wrapping container does.

[jamesisaac]

Yup agreed with the comments above that this is a useful design pattern we've used in a few apps.

While it may be more common to have the tabs right at the top of the screen, and ScrollView within the TabViews, if you're going for a UI which shows something above the tabs, you risk ending up with a very cramped scrollable area if you don't have the ScrollView at the top of the hierarchy, outside the navigator.

I suppose requiring the Tab Navigator to have an explicit height set to achieve this pattern is understandable, but it was certainly handy when the Tab Navigator could set its own height automatically. If there was some way to reintroduce this behaviour that would be great.

[daniel112]

Yup agreed with the comments above that this is a useful design pattern we've used in a few apps.

While it may be more common to have the tabs right at the top of the screen, and ScrollView within the TabViews, if you're going for a UI which shows something above the tabs, you risk ending up with a very cramped scrollable area if you don't have the ScrollView at the top of the hierarchy, outside the navigator.

I suppose requiring the Tab Navigator to have an explicit height set to achieve this pattern is understandable, but it was certainly handy when the Tab Navigator could set its own height automatically. If there was some way to reintroduce this behaviour that would be great.

I was able to resolve this with 1 line change.

https://github.com/satya164/react-native-tab-view/pull/1198#discussion_r662052975

[bhattanmol101]

When will this get fixed any update

[gauravroyzz]

its still not resolved, most of the tab screens are breaking

[bhattanmol101]

Yes because of this we are not able to upgrade to the latest version of react-native also as everything breaks then

[gauravroyzz]

we have upgraded rn :') and now facing issues with upgrading these packages

[bhattanmol101]

we have upgraded rn :') and now facing issues with upgrading these packages

yes, exactly we are stuck at rn 0.64 coz of this and are missing out on the upgraded Hermes engine to improve perf :-(

[raquelmsmith]

I also ran into this issue. I was fortunately able to remove the tabview from the scrollview but it's not an ideal solution and it likely will cause problems in the future.

[sergey-king]

Any update on this?

[vargajacint]

Any update?

[cvbordalo]

I have the same issue here. I downgraded to v2 and it worked, but of course, this is not ideal. Any of you guys got an update?

[dennis-fritsch]

We need to have the TabView in a ScrollView. Downgrading to 2.16.0 worked out for us.

[dhmoon91]

I just started using this library and hitting this too.

The tabView don't expand to full height to wrap around the content inside the scene.

Is there any doc for installation guide for V2 while this is getting fixed?

[pjc0247]

I had a similar issue but not related to nested ScrollView. I was able to solve by downgrading react-native-pager-view to old version (https://github.com/callstack/react-native-pager-view/issues/532#issuecomment-1082369436)

[beerent]

We need to have the TabView in a ScrollView. Downgrading to 2.16.0 worked out for us.

unfortunately - this is the solution. works like a charm. Day wasted but at least the problem is over. Thanks for the tip!

[jordiepasman]

Hi all,

I'm facing the same issue here, i'm using React Navigation top tabs. Which underwater uses react-native-tab-view, is there any other solution for this?

My versions:

    "react-native": "0.69.0",
    "react-native-pager-view": "^5.4.25",
    "react-native-tab-view": "^3.1.1",

[arindoneATK]

@jordiepasman we just figured this out as you can supply styles to the navigation stack Navigator, depending on if you are using createNativeStackNavigator or not. The docs have this covered and tell you what properties you can use. In our instance this is what we did:

const Stack = createNativeStackNavigator();

<Stack.Navigator
  screenOptions={{
    headerTintColor: Color.Tomato,
    contentStyle: {
      flex: 1,
    },
  }}
>

[decodekult]

I hope this helps someone: we were trapped in this same problem and it turned out that the issue was not in this library but in react-native-pager-view and a bug introduced in 5.4.23, but solved in 5.4.25: https://github.com/callstack/react-native-pager-view/pull/580

After updating the dependency, our screens took the right amount of vertical space. Our stack includes drawer navigation, containing material top tabs navigation, containing stack navigation.

[vlkpa]

I hope this helps someone: we were trapped in this same problem and it turned out that the issue was not in this library but in react-native-pager-view and a bug introduced in 5.4.23, but solved in 5.4.25: callstack/react-native-pager-view#580

After updating the dependency, our screens took the right amount of vertical space. Our stack includes drawer navigation, containing material top tabs navigation, containing stack navigation.

Still not working with: "react-native-pager-view": "6.1.0", "react-native-tab-view": "3.1.1",

[okwasniewski]

Closing as a duplicate of #1349