createMaterialTopTabNavigator inside ScrollView with dynamic height

Question

Is there any way to create something like a ScrollView with dynamic height?

Details on what we're trying to do:

We created a Top Tab Bar (using createMaterialTopTabNavigator) within a ScrollView. Everything works fine, except the height of the ScrollView. Let's assume there are 3 tab screens with different heights: TabScreen1: 800, TabScreen2: 400, TabScreen3: 300... At rendering, the ScrollView takes the greatest height, and when Tab2 or 3 is selected, the height of our ScrollView remains at 800, so there is empty space for scrolling in Tab2 and 3.

Answer 1

As I promised, here is how we solved it.

In your class where you have your ScrollView you need a state like

const [activeTab, setActiveTab] = useState('tab1') //your default (first) tab

Later, you want to change that state every time you change tab:

<TabsStack.Screen
  name={'tab1'}
  component={
    activeTab === 'tab1' ? Tab1Screen : DefaultScreen
  }
  listeners={{ focus: () => setActiveTab('tab1') }}
/>

Now every time a tab is unselected or rather not focused it will show DefaultScreen which is an empty view and has no height like:

const DefaultScreen = () => (
  <Box
    flex={1}
    py={20}
    alignItems="center"
    justifyContent="center"
    bg="background"
  >
    <ActivityIndicator size="large" color="white" animating />
  </Box>
)

In my case (see question above), every time I switch from Tab1.1.1 to Tab1.1.2, Tab1.1.1 will change to DefaultScreen