Regular Navigation Bar

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