Expo react native material-top-tab-navigator inside scrollView not showing screen

Question

When loading a tab screen using material-top-tab-navigator the screens are not displayed

---

version

"@react-navigation/material-top-tabs": "^6.2.1"

"expo": "^45.0.0",

---

page where the navigator is loaded

return (
 <View>
      <ScrollView >
       <View>
         <TitleH2 color={colors.white} style={{marginHorizontal:20, marginBottom:20}}>Ervaringen in gebied</TitleH2>
        </View>
         <View >
            <DestinationTabs/>
         </View>
   </ScrollView>
</View> 
)

Where the navigator is created

  return (
        <Tab.Navigator 
          screenOptions={{
              tabBarIndicatorStyle:{ backgroundColor:colors.green_500, },
              tabBarActiveTintColor: colors.green_500,
              tabBarScrollEnabled: true,
              lazy: true,
            
          }}
          sceneContainerStyle={{
              backgroundColor: colors.green_500,
             
                }}
        > 
          <Tab.Screen name="Tab1" component={TabSceen1}  />
          <Tab.Screen name="Tab2" component={TabSceen1} />
          <Tab.Screen name="Tab3" component={TabSceen1} />
          <Tab.Screen name="Tab4" component={TabSceen2} />
        </Tab.Navigator>
  );

I was only able to display the screen when giving the navigator a fixed height. But then it's not scrollable and the content is not properly displayed.

Is there a way to make the screen display in a scrollview where the height is displayed based on the content size in side a screen, and where it's also able to be scrolled ?

• update question *

How do you make the tab screens appear in a scrollView

Answer 1

The best way to solve that is to add fixed height to <Tab.Navigator/>. You can use minHeight for the screen to grow with content on it.

Code:

<Tab.Navigator style={{minHeight:1000}} />

I hope this gonna work.

Answer 2

Use this contentContainerStyle={{flex: 1}} in side scroll view

<ScrollView contentContainerStyle={{flex: 1}}/>