How to hide bottomTabBar navigator when at top of scrollView react native

I have a nested stackNavigator inside a tabNavigator I am trying to make so that when I am at the top of the scrollView the tabNavigator is hidden.

function Users() {const navigation = useNavigation();const windowWidth = Dimensions.get('window').width;const windowHeight = Dimensions.get('window').height;let [fontsLoaded] = useFonts({    Roboto_400Regular});if (!fontsLoaded) {    return <></>;} else {    return (<ScrollView onScroll={() => {navigation.dispatch(            CommonActions.setParams({                tabBarStyle: {display: 'null'},            })        );}}>        {...}</ScrollView>    );}}

Here is the screen I am trying to have the tabBar hide on.

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

Here is the stackNavigator, which is then nested into a tabNavigator

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={{                tabBarActiveTintColor: '#e91e63',                headerShown: false,                tabBarShowLabel: false,                tabBarStyle: {borderColor: '#DBDBDB', height: 100},            }}>            {                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={44}/> :<View style={buttonShell}><Text style={buttonText}>{bottomTab.title}</Text></View>                                    })                                }}                            />                        )                    }                )            }</Tab.Navigator>    )}

}

Is there a way to do this? I have tried this answer on stackOverflow but cannot seem to make it work: Hide createBottomTabNavigator

Any help would be greatly appreciated :)