Sticky ScrollView header with Material Top Tab Navigator inside

I am implementing a profile screen that has a similar structure as the instagram profile page.

There are 2 issues I am facing:

1-Scrolling Issue... when making the tabs sticky, it stops scrolling when reaching the tabs which means that I can't see the other items below.

2- I am currently setting a fixed height for the tabs otherwise the content of tabs screens wouldn't show!! and tried playing with flex 1 and no luck. This can be fixed with normal view but in this case I will not be able to achieve the scrolling and by taking in consideration that I have a profile picture and some text above the tabs that are necessary.

Please see the video to see the issue in video: Click to see the video

Here is the Code for the Screen:

import { NativeStackScreenProps } from "@react-navigation/native-stack";
import React from "react";
import { ScrollView, StyleSheet, View, RefreshControl } from "react-native";
import { RootStackParamList } from "../../navigation/linking";
import ProfileImage from "./components/profileImage/profileImage";
import Gallery from "./tabs/gallery";
import Personal from "./tabs/personal";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import useSedcardImages from "../../hooks/useSedCardImages";
import ProfileProvider from "./context/profileContext";

type Props = NativeStackScreenProps<RootStackParamList, "Profile">;

const Profile: React.FC<Props> = (props: Props) => {
  const { navigation } = props;

  const [refreshing, setRefreshing] = React.useState(false);

  const wait = (timeout: number) => {
    return new Promise(resolve => setTimeout(resolve, timeout));
  };

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    refetch();
    wait(1000).then(() => setRefreshing(false));
  }, []);

  const { data, refetch } = useSedcardImages();

  const Tab = createMaterialTopTabNavigator();

  if (data) {
    return (
      <ProfileProvider sedCardImages={data}>
        <ScrollView
          stickyHeaderIndices={[1]}
          style={styles.root}
          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
          <ProfileImage onTouch={() => navigation.navigate("Camera", { type: "profile" })} />
          <View style={{ height: 700, backgroundColor: "#fff" }}>
            <Tab.Navigator
              initialRouteName="Gallery"
              screenOptions={{
                tabBarActiveTintColor: "#000",
                tabBarLabelStyle: {
                  fontSize: 12,
                  fontFamily: "helvetica-neue",
                  textTransform: "none",
                },
                tabBarIndicatorStyle: { backgroundColor: "#000" },
                tabBarStyle: { backgroundColor: "#fff" },
              }}>
              <Tab.Screen name="Gallery" component={Gallery} initialParams={{ sedCards: data }} />
              <Tab.Screen name="Personal" component={Personal} />
            </Tab.Navigator>
          </View>
        </ScrollView>
      </ProfileProvider>
    );
  }
  return null;
};

export default Profile;

const styles = StyleSheet.create({
  root: {
    backgroundColor: "#fff",
  },
});

My code for the Gallery Tab:

import React from "react";
import { SafeAreaView, StyleSheet } from "react-native";
import GalleryItem from "../components/galery/galleryItem";
import { useProfileContext } from "../context/profileContext";

interface Props {}

const Gallery: React.FC<Props> = (props: Props) => {
....

  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: "#ffffff",
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "flex-start",
      }}>
   ....
    </SafeAreaView>
  );
};
export default Gallery;

Any help would be much appreciated. Thanks a lot in advance.