Image Background
To create an Image Background, you need to create a HeaderBackgroundComponent. It's pretty trivial, therefore following the example should be enough.
Regular#
It's important to set headerBackgroundColor to transparent.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';Parallax#
Parallax effect is supported out of the box.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';Fade Out#
Fade Out effect is supported out of the box. Put attention that it fades out, therefore the backgroundColor of the container is the color it fades to.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';Scale#
Scaling effect is supported out of the box. This is only required for iOS.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';Carousel#
It does not have to be a plain Image, it can be anything, therefore we can also create a Carousel using a ScrollView.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';Handling StatusBar#
This is only for native. When we reached the transitionPoint the regular Navigation Bar will show up and with that often times a change of the Status Bar style is necessary. This can be achieved using the props beforeTransitionPoint and afterTransitionPoint on Container.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';import { StatusBar } from 'react-native';