Header Navigation Bar
It's basically the same as the Regular Navigation Bar
except we add a headerHeight
.
#
Plainimport { AppleStyle } from 'react-native-scrollable-navigation-bar';
#
CollapsibleThe Navigation Bar collapses when scrolling down and shows up when scrolling up again. All with just setting the collapsible
prop to true
.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
#
Stay CollapsedSometimes we want Navigation Bar to stay hidden all the time. By itself this is similar to just putting the Navigation Bar inside the Container
, but it's getting more interesting in combination with StickyComponent
.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
#
Sticky ComponentA Component
which sticks just right under the Navigation Bar.
#
Sticky Component - Regularimport { AppleStyle } from 'react-native-scrollable-navigation-bar';
#
StickyComponent - Collapsibleimport { AppleStyle } from 'react-native-scrollable-navigation-bar';
#
StickyComponent - Stay Collapsedimport { AppleStyle } from 'react-native-scrollable-navigation-bar';
#
Snap ComponentThis is a Component which is also directly under the Navigation Bar, but does not stick, it vanishes after the initial scroll.
#
CombinationNow comes the real power of the library, you can combine all the previous animations together. StickyComponent
with SnapComponent
, all the different collapses.