Skip to content
This repository was archived by the owner on May 25, 2023. It is now read-only.

Files

Latest commit

author
Kevin Pang
Update README.md
May 25, 2023
3b4dbff · May 25, 2023

History

History
35 lines (28 loc) · 2.46 KB

README.md

File metadata and controls

35 lines (28 loc) · 2.46 KB

react-native-panning-scrollview

CircleCI Test Coverage Maintainability David npm license

DEPRECATED

This has been rewritten using reanimated 2. See https://github.com/Moistbobo/rn-playground/tree/develop/src/features/Reanimated/pages/MoxLikeScrollView

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

Props

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.

Demo

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