I am working with react-navigation 5.x and I want my AppBar to disappear when I scroll down.
This is how my navigation looks like:
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
export default function createAppContainer(AppNavigator) {
const { Navigator, Screen } = createDrawerNavigator();
// eslint-disable-next-line react/prop-types
return ({ AppBar, DrawerContent, ...rest }) => (
<Navigator drawerContent={DrawerContent}>
<Screen
name="inner-drawer"
component={(props) => (
<AppNavigator
headerMode="screen"
screenOptions={AppBar ? {
header: AppBar,
} : undefined}
{...props}
/>
)}
{...rest}
/>
</Navigator>
);
}
In react-navigation, how can I prevent the AppBar to be fixed top?
Use Animated.diffClamp() as the documentation said:
This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.