Hide bottomTabNavigator react native

Question

I'm trying to make my bottomTabNavigator hide when I click on a screen and then become visible again once you scroll. Here is my code for my StackNavigator and BottomTabNavigator:

function UsersScreenNavigator() {
        const Stack = createNativeStackNavigator();
    
        return (
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Users" component={BottomTabNavigator} options={{headerShown: false}}/>
                <Stack.Screen name="Profile" component={Profile} options={{headerShown: false}}/>
                <Stack.Screen name="Settings" component={Settings} options={{headerShown: false}}/>
                <Stack.Screen name="EditProfile" component={EditProfile} options={{headerShown: false}}/>
                <Stack.Screen name="BackButton" component={BackButton} options={{headerShown: false}}/>
            </Stack.Navigator>
        );
    }

    function BottomTabNavigator() {
    const {buttonShell, buttonText} = styles;
    const Tab = createBottomTabNavigator();
    const Icon = createIconSet(glyphMap, 'Fuze', 'Fuze.ttf');
    let [fontsLoaded] = useFonts({
        'Fuze': require('../../../assets/Fuze.ttf'),
        Roboto_500Medium
    });

    if (!fontsLoaded) {
        return <></>;
    } else {
        return (
            <Tab.Navigator
                initialRouteName="Users"
                screenOptions={{
                    headerShown: false,
                    tabBarShowLabel: false,
                    tabBarStyle: {borderColor: '#DBDBDB', height: 100, paddingTop: 16},
                }}
            >
                {
                    bottomTabs.map((bottomTab) => {
                            return (
                                <Tab.Screen
                                    key={`screen-${bottomTab.title}`}
                                    name={bottomTab.title}
                                    component={bottomTab.componentName}
                                    options={{
                                        unmountOnBlur: true,
                                        tabBarIcon: (({focused}) => {
                                            return !focused ?
                                                <Icon name={bottomTab.icon} size={32}/> :
                                                <View style={buttonShell}>
                                                    <Text style={buttonText}>{bottomTab.title}</Text>
                                                </View>

                                        })
                                    }}
                                />
                            )
                        }
                    )
                }
            </Tab.Navigator>
        )
    }
}

Here is my screen I want to hide the bottomNavigator on and the array of screens I map to my navigator:

   export const bottomTabs = [
    {
        title: 'User',
        componentName: Users,
        icon: 'icon-User'
    },
    {
        title: 'Check-in',
        componentName: CheckInScreenNavigator,
        icon: 'icon-CheckIn'
    },
    {
        title: 'Hub',
        componentName: HubScreenNavigator,
        icon: 'icon-Hub'
    },
    {
        title: 'Chats',
        componentName: Chats,
        icon: 'icon-Chats'
    }
]

    function Users() {
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;

    let [fontsLoaded] = useFonts({
        Roboto_400Regular,
        Roboto_500Medium
    });

    if (!fontsLoaded) {
        return <></>;
    } else {
        return (
            <View>
            <ScrollView>
                <View style={{flex: 1}}>
                    <ProfileButton/>
                    <Image style={{height: windowHeight - 100, width: windowWidth}} source={mockUsers[0].pictures[0]}/>
                    <UserProfileInfo/>
                </View>
                <View>
                    <Text style={{
                        fontSize: 16,
                        fontFamily: 'Roboto_400Regular',
                        marginTop: 32,
                        marginBottom: 16,
                        marginLeft: 32
                    }}>About</Text>
                    <View style={{marginLeft: 32}}>
                        <Text style={{fontSize: 14, color: '#878787', fontFamily: 'Roboto_400Regular'}}>
                            {mockUsers[0].about}
                        </Text>
                    </View>
                    <Text style={{
                        fontSize: 16,
                        fontFamily: 'Roboto_400Regular',
                        marginTop: 32,
                        marginBottom: 16,
                        marginLeft: 32
                    }}>Interests</Text>
                    <View style={{flexDirection: 'row', flexWrap: 'wrap', marginLeft: 32, marginRight: 32}}>
                        {mockUsers[0].userInterests?.map((interest, index) => {
                            return (
                                <View style={{backgroundColor: '#000', borderRadius: 44, minHeight: 44, justifyContent: 'center', marginRight: 8, marginBottom: 16}}>
                                    <Text key={`interest-${index}`} style={{
                                        color: '#FFF',
                                        fontFamily: 'Roboto_500Medium',
                                        fontSize: 18,
                                        paddingTop: 8,
                                        paddingLeft: 24,
                                        paddingBottom: 8,
                                        paddingRight: 24,
                                    }}>{interest}</Text>
                                </View>
                            )
                        })}
                    </View>
                    <Text style={{
                        fontSize: 16,
                        fontFamily: 'Roboto_400Regular',
                        marginTop: 32,
                        marginBottom: 16,
                        marginLeft: 32
                    }}>Questions and answers</Text>
                    <AnsweredQuestionInput />
                    <AnsweredQuestionInput />
                    <AnsweredQuestionInput />
                    <Text style={{
                        fontSize: 16,
                        fontFamily: 'Roboto_400Regular',
                        marginTop: 32,
                        marginBottom: 16,
                        marginLeft: 32
                    }}>Pictures</Text>
                    <Pictures userPictures={mockUsers[0].pictures} blur={true}/>
                </View>
            </ScrollView>
                <LikeAndDislike />
            </View>

        );
    }
}

Apologies for the un-neat code I am mid writing this and cannot find a way to hide the tabBar.