Skip to main content
Version: Next

Getting Started

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.

Features

react-native-sticky-parallax-header provides two different type of components

  • primitive components - components with sticky header setup
  • predefined components - ready sticky header layouts

Primitive components

Library exports following components:

  • StickyHeaderScrollView
  • StickyHeaderFlatList
  • StickyHeaderSectionList

There is also possibility to create its own "sticky header" component, thanks to:

  • withStickyHeader - HOC that wraps custom scroll component and sets up header & tabs layouts
  • useStickyHeaderScrollProps - hook that sets up scroll props passed to custom "sticky header" component including "snap effect" props

Predefined components

Library offers following header layout types:

Tabbed HeaderAvatar HeaderDetails Header
Tabbed Header GifAvatar Header GifDetails Header Gif
  • AvatarHeader(ScrollView|FlatList|SectionList)
  • DetailsHeader(ScrollView|FlatList|SectionList)
  • TabbedHeaderPager
  • TabbedHeaderList

FlashList HOCs

Library also provides higher-order-components to enhance FlashList with sticky header layouts:

  • withAvatarHeaderFlashList (will produce FlashList equivalent of AvatarHeader(FlashList|SectionList))
  • withDetailsHeaderFlashList (will produce FlashList equivalent of DetailsHeader(FlashList|SectionList))
  • withTabbedHeaderFlashList (will produce FlashList equivalent of TabbedHeaderList)

As with primitive components, FlashList can also be customized to create its own "sticky header" layout, thanks to withStickyHeaderFlashList & useStickyHeaderFlashListScrollProps

In Use

Check the live demo on Expo Snack here.