Screens not visible when using Material Top Tab Navigator inside of FlatList.

[jp-23]

trafficstars

Current behavior

The tab screens are not visible - despite setting flex: 1.

export default function TabsScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Tab.Navigator>
        <Tab.Screen name="ScreenOne" component={ScreenOne} />
        <Tab.Screen name="ScreenTwo" component={ScreenTwo} />
      </Tab.Navigator>
    </View>
  );
}

It is not until I set a fixed height that the screen content appears:

<View style={{ flex: 1, height: 100 }}>

Expected behavior

I expect the tab screens to be visible when using flex: 1. It is not acceptable to use a fixed height as I would like to include variable-height content in the tab screens - such as a FlatList. I also want to keep the parent-level FlatList - as I would like to utilize sticky headers. I've also tried using SectionList as the parent-level VirtualizedList, and I experience the same issue.

Here is the minimum structure:

|Stack Navigator |- Screen |-- FlatList |--- item 1 - component |--- item 2 - component |---- Material Top Tab Navigator |----- n-number of screens

Reproduction

https://snack.expo.dev/CCbZk7c0u

Platform

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

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-bottom-tabs
• [X] @react-navigation/material-top-tabs
• [X] @react-navigation/stack
• [ ] @react-navigation/native-stack

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.8
@react-navigation/material-top-tabs	6.1.1
@react-navigation/stack	6.1.1
react-native-safe-area-context	3.3.2
react-native-screens	3.8.0
react-native-gesture-handler	1.10.2
react-native-tab-view	3.0.0
react-native-pager-view	5.4.6
react-native	0.63.4
node	15.8.0
npm or yarn	yarn

[github-actions[bot]]

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

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs

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-navigation/native (found: 6.0.6, latest: 6.0.8)
• @react-navigation/material-top-tabs (found: 6.0.6, latest: 6.1.1)
• @react-navigation/stack (found: 6.0.6, latest: 6.1.1)

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

[github-actions[bot]]

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

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs

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

[jp-23]

The issue still exists after upgrading to the latest versions of the mentioned packages.

[KFrysztak]

any update on this one?

[kennethstarkrl]

I have a screen with nested tabs that has the tabs in the middle of the page with the whole thing scrollable. Wrapping tabs inside a scrollview has the same effect, the tab page does not show unless the height is explicitly set.

This isn't a full solution but here's what I did.

create a state for the height

const [tabPageHeight, setTabPageHeight] = useState(0)

set the style to use the state

const styles = StyleSheet.create({
 tabsContainer:{
  minHeight: '100%',
  height: tabPageHeight,
 }
})

Then in the view of the tab page component, use onLayout

const tabPageScreen1 = () => {
   return (
      <View onLayout={updateTabHeight}>
      // some content
      </View>
  )
}

The onLayout event to set the height

const updateTabHeight = (event) => {
  const { height } = event.nativeEvent.layout;
  if(tabPageHeight === 0){
    setTabPageHeight(height);
  }
}

You may also want to set the TabNavigator to lazy to help with dynamic content, only loading the tab page when viewed.

<Tab.Navigator
  screenOptions={{
    lazy:true,
  }}>
  <Tab.Screen name="Tab 1" component={tabPageScreen1}/>
</Tab.Navigator>

Some pitfalls All the pages are the same height as the first. Might be able to to separate css styles for each tab page.

event.nativeEvent.layout height seems inconsistent on each device. Will have height perfect on Web, but iOS and Android cut off at the bottom. Might be able to detect the OS, then add extra height for each platform as necessary. ex setTabPageHeight(height + iOSOffset);

This seems like a hacky work around, it would be much easier if there was a way to tell the screen to fit-content

still experimenting with this.

[RRaideRR]

@kennethstarkrl did you came up with a different solution? I just stumbled across that very same problem and cant imagine that this is really the solution for this problem :-/... feels really hacky

[kennethstarkrl]

@kennethstarkrl did you came up with a different solution? I just stumbled across that very same problem and cant imagine that this is really the solution for this problem :-/... feels really hacky

I have not yet and yes totally agree its not a solution but a work-around.

[jeffngugi]

Hello, did anyone figure this out?

[awesome31]

Any update on this? Please do let know if there is any solution for the same.

[mustafaasif1]

Still stuck on this issue. Any update?

[ahmed-khlifi]

any updates on this ? fixing the height don't seem like a good solution, i tried with flexGrow and flex and sometimes it works and sometimes no

[DeveloperHarris]

Currently encountering this issue as well, but with ScrollView instead of Flatlist. I've created a reproduction:

Non-working (height not set): https://snack.expo.dev/@harrisr/funny-chip Working (height explicitly set): https://snack.expo.dev/@harrisr/quiet-sandwich

This issue occurs on ios and android.

Setting the height programmatically feels not-great, and I'd much prefer it if material-top-tabs properly calculated it's height based on children content.

[DeveloperHarris]

Dug into the code a bit. This seems to be related to an issue with react-native-tab-view, which is used by the material top tabs navigator.

There's an open issue their repo:

https://github.com/satya164/react-native-tab-view/issues/1349

[danielaloycedaniel]

I think the solution is to add fixed height to Tab.Navigator, I propose to use minHeight so tab screen will be growing with the contents on it.

But the problem is that, all the screens in tabs inherits height from the first screen tab 🤔

[alexdobson]

This is an issue with react-native-tab-view that was introduced in release 3.0.0. Here's issues related to it:

• 1274
• 1349

There doesn't seem to be a solution to it - although it seems like a very common use-case to want a tabview inside of a scroll view (Facebook, Instagram, etc.)

Would be greatly appreciated if this could be fixed - especially now that the package is housed under react-navigation.

[aminta]

Bug still present, any solution?

[Dajust]

Would be greatly appreciated if this could be fixed. Who knows if there are any plans for it?

[acro5piano]

I moved to this awesome library: https://github.com/PedroBern/react-native-collapsible-tab-view

If you don't need to stick implement tab on react-navigation way, I recommend react-native-collapsible-tab-view.

[Judono]

Any one found a fix yet bug still here?

[Judono]

just found a fix, it turns out that the bug is with react-native-pager-view v5.4.23 and to solve you need to upgrade to react-native-pager-view v2.4.25, you can fix with this command

yarn add react-native-pager-view@5

credits to @vlkpa for finding the solution here -> https://github.com/satya164/react-native-tab-view/issues/1178#issuecomment-1319737961

hope this helps

[victoriomolina]

This issue is a pain. I ve been more than 3 years trying to get this without tricky solutions.

[YASH6004]

I don't know how people are still downloading this library with this issue