React Navigation 5 Top bar with FlatList Scrolling and Dynamic Height

I wanted to create a similar feature of how Instagram has on their profile page, where you're able to swipe on different tabs (your posts, and posts people tagged you in).

I've tried attempting to create it using React Navigation 5's Top Tab Navigator https://reactnavigation.org/docs/material-top-tab-navigator and FlatList, but not sure if its the correct way of doing it.

Profile Screen Component

const ProfileScreen = () => (
  <>
    <FlatList
      data={null}
      ListHeaderComponent={
        <View style={{ marginBottom: 20 }}>
          // Added the component and navigator here because of scrolling capabilities
          <UserInfo />
          <Tab.Navigator>
            <Tab.Screen name="Images" component={ImageScreen} />
            <Tab.Screen name="TaggedImages" component={TaggedImageScreen} />
          </Tab.Navigator>
        </View>
      }
    />
  </>
)

Image Screen

const ImageScreen = () => (
  <>
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View>
          <Image src={item} />
        </View>
      )}
    />
  </>
)

Tagged Image Screen

const TaggedImageScreen = () => (
  <>
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View>
          <Image src={item} />
        </View>
      )}
    />
  </>
)

There's a couple questions/issues with this:

The height of the Tab Navigator is not dynamic to its respected component - meaning, if I have 3 images in Image Screen component, and 10 images in Tagged Screen component, the height will expand to the Tagged screen component (for both)

The reason for the FlatList in my Profile Component is because I want to be able to scroll the component (similar to Instagram's profile).

So this brings to the next question: Is having the Tab Navigator in the List Header Component of the FlatList the best method to doing something similar to IG? Is there another way I should handle this feature?