App/components/Discover/component.tsx

import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { ScrollView } from "tamagui";
import RecentlyAdded from "./helpers/just-added";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { StackParamList } from "../types";
import { H2 } from "../Global/helpers/text";
import { useDiscoverContext } from "./provider";
import { RefreshControl } from "react-native";

export default function Index({ 
    navigation 
} : { 
    navigation : NativeStackNavigationProp<StackParamList> 
}) : React.JSX.Element {

    const { refreshing, refresh } = useDiscoverContext();

    return (
        <SafeAreaView edges={["top", "left", "right"]}>
            <ScrollView
                flexGrow={1}
                contentInsetAdjustmentBehavior="automatic"
                removeClippedSubviews
                paddingBottom={"$15"}
                refreshControl={(
                    <RefreshControl
                    refreshing={refreshing}
                    onRefresh={refresh}
                    />
                )}
                >
                <H2>{`Recently added`}</H2>
                <RecentlyAdded navigation={navigation} />
            </ScrollView>
        </SafeAreaView>
    )
}