How to Hide TabBarNavigator dynamically react native

I am looking for a way to hide my bottomTabNavigatoronScoll from within my UserScreen

Here is my userScreen:

    function Users() {    const {headerText, interestText, interestShell, interestsLayout, aboutText, userImage} = styles;    return (<View><ScrollView showsVerticalScrollIndicator={false}><View style={{flex: 1}}><ProfileButton/><Image style={userImage} source={mockUsers[0].pictures[0]}/><UserProfileInfo/></View><View><Text style={headerText}>About</Text><View style={{marginLeft: 32}}><Text style={aboutText}>                            {mockUsers[0].about}</Text></View><Text style={headerText}>Interests</Text><View style={interestsLayout}>                        {mockUsers[0].userInterests?.map((interest, index) => {                            return (<View style={interestShell}><Text key={`interest-${index}`} style={interestText}>{interest}</Text></View>                            )                        })}</View><Text style={headerText}>Questions and answers</Text><AnsweredQuestionInput/><AnsweredQuestionInput/><AnsweredQuestionInput/><Text style={headerText}>Pictures</Text><Pictures userPictures={mockUsers[0].pictures} blur={true}/></View></ScrollView><LikeAndDislike/></View>    );}

Here is my bottomTabNavigator:

    function BottomTabNavigator() {    const {buttonShell, buttonText} = styles;    const Tab = createBottomTabNavigator();    const Icon = createIconSet(glyphMap, 'Fuze', 'Fuze.ttf');    return (<Tab.Navigator            initialRouteName="Users"            screenOptions={({route}) => ({                headerShown: false,                tabBarShowLabel: false,                tabBarStyle: {borderColor: '#DBDBDB', height: 88, 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>    )}

So far I have been researching and found react navigation removed the tabBarVisible option and the only other way that I have seen people hide the screen is through css on the screenOptions by setting display: 'none'I would love to find a way to pass up from the user screen a if scrolling return true and then set display based on the boolean value. Any help would be brilliant. Thanks