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

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.

Answer 2

I ended up removing the tabs content from the tab control altogether. It's hacky but worked for me...

 render() {
const {index} = this.state;
return (
  <ScrollView>
    <TabView
      renderPager={this._renderPager}
      renderScene={() => null}
      onIndexChange={index => this.setState({index})}
      initialLayout={{height: 0, width: Dimensions.get('window').width}}
    />
    {index === 0 && <Tab1Content />}
    {index === 1 && <Tab2Content />}
  </ScrollView>
);

Source:- https://github.com/satya164/react-native-tab-view/issues/290#issuecomment-447941998