Scrollview not working with React Navigation Top Tabs

Question

I have this code below:

<ScrollView
  style={{ flex: 1, backgroundColor: defaultStyles.colors.lighterGray }}
  contentContainerStyle={{ flexGrow: 1 }}
>
  <ImageBackground
    style={styles.coverPhoto}
    source={{ uri: image }}
    resizeMode="cover"
  >
    <ReviewBadge rating={rating} />
  </ImageBackground>
  <SupplierHeader name={name} price={price} category={category} />
  <View>
    <SupplierTabs />
  </View>
</ScrollView>

It basically has a header image, which is the ImageBackground and SupplierHeader , below that is a component called SupplierTabs which contains the code below...

const Tab = createMaterialTopTabNavigator();

const SupplierTabs = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarLabelStyle: styles.tabBarLabelStyle,
        tabBarIndicatorStyle: styles.tabBarIndicatorStyle,
        tabBarStyle: styles.tabBarStyle,
      }}
    >
      <Tab.Screen
        name="SupplierOverviewTab"
        options={{
          tabBarLabel: "Overview",
        }}
        component={SupplierOverviewTab}
      />
      <Tab.Screen
        name="SupplierReviewsTab"
        options={{
          tabBarLabel: "Reviews",
        }}
        component={SupplierReviewsTab}
      />
      <Tab.Screen
        name="SupplierGalleryTab"
        options={{
          tabBarLabel: "Gallery",
        }}
        component={SupplierGalleryTab}
      />
    </Tab.Navigator>
  );
};

However, the Scrollview does not work (it does not scroll) unless I declared a fixed height for the View that's wrapping the SupplierTabs element (like height: 9999) which I can't do because the content is going to be dynamic.