react-native-sticky-parallax-header is a simple React Native library, enabling to create a fully custom header layout for your iOS, Android and web apps.

Read the full Docs at: https://netguru.github.io/sticky-parallax-header/

Sticky Parallax Header ships with 3 different use cases for sticky headers and a possibility to create fully custom header!

Check the live demo on Expo Snack here.

This is how you can display header in your app:

import * as React from 'react'
import { DetailsHeaderScrollView } from 'react-native-sticky-parallax-header'
import { SafeAreaProvider } from 'react-native-safe-area-context'
const TestScreen = () => (
 <SafeAreaProvider>
 <DetailsHeaderScrollView {...scrollProps} {...detailsHeaderProps}>
 {/** scroll view content */}
 </DetailsHeaderScrollView>
 </SafeAreaProvider>
)
export default TestScreen

i️ Library supports react-native version 0.64+

$ yarn add react-native-sticky-parallax-header@rc

yarn add react-native-reanimated react-native-safe-area-context

After installation:

• check Reanimated installation guide
• handle Pods installation with npx pod-install
• wrap your root component with SafeAreaProvider from react-native-safe-area-context

Contributing guidelines

This library is available as open source under the terms of the MIT License.