React Native Tab view always has the height equal to height of the highest tab

Question

Introduction

I have a FlatList that renders a Tab View in its footer. This Tab View let the user switch between one FlatList or an other. So, these last are sibling FlatLists.

Problem

The first FlatList "A" has a greater height than the second one "B". When I choose the second list, its height is the same as the "A" FlatList's one.

I have reproduced the problem in a snack where you can see a similar code. I recognize that the code is a little long but too simple, just focus only on the parent FlatList (in the App component) and the two FlatLists that are rendered in each tab (at the end of the code)

QUESTION

Any ideas how to solve this issue? I don't know if the problem is in the styles or if I have to do something else to make this work (all flatlists have to have their own height, not the greater).

Thank you, I would really appreciate your help.

Answer 1

UPDATE 2022

  const renderScene = ({ route }) => {
    //
    // 📝 Note: We are hidding tabs in order to avoid the
    // "FlexBox Equal Height Columns" typical problem
    //
    switch (route.key) {
      case "bitcoin":
        return (
          <View style={index !== 0 && styles.hidden}>
            <Bitcoin />
          </View>
        );

      case "ethereum":
        return (
          <View style={index !== 1 && styles.hidden}>
            <Etherum />
          </View>
        );

      case "rose":
        return (
          <View style={index !== 2 && styles.hidden}>
            <Rose />
          </View>
        );

      default:
        return null;
    }
  };


...

<TabView
  renderTabBar={renderTabBar}
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={handleOnIndexChange}
  initialLayout={{ width: layout.width }}
  removeClippedSubviews={false}
  swipeEnabled
  swipeVelocityImpact={0.2}
  gestureHandlerProps={{
    activeOffsetX: [-30, 30], // To solve swipe problems on Android
  }}
  style={globalStyles.flexContainer}
/>

Styles:

hidden: { display: "none" }

---

I have updated the snack with the solution!

As in the snack I implemented my own TabView, I have decided to implement the same solution with the library "react-native-tab-view", as it is the best tab for react native for now.

Think that some people having this issue will be able to solve it.

Basically, what we need to do is to dinamically calculate the height of each tab scene and pass it to the style of the TabView using the onLayout prop.

Just like this:

 const renderScene = ({ route }) => {
    switch (route.key) {
      case "inifiniteScrollFlatList":
        return (
          <FirstRoute />
        );
      case "rawDataFlatList":
        return (
          <View
            onLayout={(event) => setTab1Height(event.nativeEvent.layout.height + TAB_HEIGHT)}
          >
            <SecondRoute />
          </View>
        );
      case "otherRawDataFlatList":
        return (
          <View
            onLayout={(event) => setTab2Height(event.nativeEvent.layout.height + TAB_HEIGHT)}
          >
            <ThirdRoute />
          </View>
        );
      default:
        return null;
    }
  };

  <TabView
      style={ index !== 0 && {
        height: index === 1 ? tab1Height : tab2Height,
      }}
      renderTabBar={renderTabBar}
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      removeClippedSubviews={false} // Pd: Don't enable this on iOS where this is buggy and views don't re-appear.
      swipeEnabled={true}
  />

Pd: You shouldn't do this with a tab that uses an infinite scroll with pagination. Instead, you will have to set the height to null to allow the parent FlatList to automatically get its height.

Answer 2

So, I haven't gone through the entire code, nor did I find a solution to your height problem.

But, what you can do is check out React navigation 5 -> createMaterialTopTabNavigator.

It lets you create tabs with separate flatlist for each tab. It will solve the height problem because what is being rendered are separate flatlists as per the active tab. And it will also, make your code much cleaner.

You won't have to use a Flatlist with header and footer components to render the tabs with nested Flatlists.

And if you want to hide the tabs on scroll, that is possible by passing props to the tab navigator that toggle visibility on scroll of the Flatlist using the onScroll event that is called when a Flatlist is scrolled. The same can be done for the visibility of the header as well. And with the proper animations it would look as if the header and the tabs were pushed up on scroll like it does right now.