How to Hide TabBarNavigator dynamically react native

Question

I am looking for a way to hide my bottomTabNavigator onScoll 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

Answer 1

In react navigation they have removed tabBarVisible and instead replace it with tabBarStyles: {display: 'none'}. Therefore, I updated my code in my usersScreen to this:

function Users() {
const navigation = useNavigation();

const hideTabBar = () => {
    navigation.setOptions({
        tabBarStyle: {display: 'none'},
    });
};

const showTabBar = () => {
    navigation.setOptions({
        tabBarStyle: {display: 'flex', borderColor: '#DBDBDB', height: 88, paddingTop: 16},
    });
};

useEffect(() => hideTabBar(), [])

return (
    <View>
        <ScrollView
            showsVerticalScrollIndicator={false}
            onMomentumScrollEnd={() => showTabBar()}
            onMomentumScrollBegin={() => hideTabBar()}
        >
           //some code//
        </ScrollView>
        <LikeAndDislike/>
    </View>
);
}