A ScrollView component that only scrolls after the header has been pushed up.

Usage no npm install needed!

<script type="module">
  import reactNativePanningScrollview from '';



CircleCI Test Coverage Maintainability David npm license

A ScrollView component that moves along with the header section, and only scrolls after the header has been pushed up


prop type description
children ReactNode | ReactNodeArray The scrollview content
headerImage ImageSourcePropType Optional. The header image. Defaults to a white background view if not supplied.
badgeImage ImageSourcePropType Optional. The badge image. The component will automatically apply border radius and enforce a size.
translateRatio number Optional. Affect the rate that the header translates. Higher values = shorter translate distance. Defaults to 3. Recommended 1 - 5
useNativeDriver boolean Optional. Control whether to use nativeDriver. For compatibility. Defaults to true
backgroundColor ColorValue Optional. Change the color of the scrollview container.

How it works

This component uses a scrollview and some Animated trickery to create the illusion of a scrollview that only scrolls after the header has been panned upwards.


  1. Clone this repo
  2. cd demo
  3. yarn
  4. yarn android or yarn ios