Skip to main content

Header Navigation Bar

It's basically the same as the Regular Navigation Bar except we add a headerHeight.

Plain#

import { AppleStyle } from 'react-native-scrollable-navigation-bar';
Live Editor
Result

Collapsible#

The 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';
Live Editor
Result

Stay Collapsed#

Sometimes 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';
Live Editor
Result

Sticky Component#

A Component which sticks just right under the Navigation Bar.

Sticky Component - Regular#

import { AppleStyle } from 'react-native-scrollable-navigation-bar';
Live Editor
Result

StickyComponent - Collapsible#

import { AppleStyle } from 'react-native-scrollable-navigation-bar';
Live Editor
Result

StickyComponent - Stay Collapsed#

import { AppleStyle } from 'react-native-scrollable-navigation-bar';
Live Editor
Result

Snap Component#

This is a Component which is also directly under the Navigation Bar, but does not stick, it vanishes after the initial scroll.

Live Editor
Result

Combination#

Now comes the real power of the library, you can combine all the previous animations together. StickyComponent with SnapComponent, all the different collapses.

Live Editor
Result