/react-native-parallax-header

Animated Parallax Headers for React Native

Primary LanguageTypeScriptMIT LicenseMIT

React Native Parallax Header

Animated parallax headers for React Native as seen in our FabFit Studio App.

This component currently only supports iOS. It has not been tested in a production environment on Android.

Basic example (examples/src/screens/image) Overlay example (FabFit Studio iOS App)

Installation

npm install @fabfit/react-native-parallax-header

or

yard add @fabfit/react-native-parallax-header

Usage

import ParallaxHeader from '@fabfit/react-native-parallax-header';

const MyScreen = () => (
  <ParallaxHeader
    maxHeight={300}
    minHeight={100}
    heroImage={{ uri: 'https://source.unsplash.com/user/erondu/600x300' }}
  >
    <Text>All children will render below the parallax header</Text>
  </ParallaxHeader>
);

Props

Name Description Default
maxHeight (optional) Sets the maximum height of the header 550
minHeight (optional) Sets the minimum height of the header 170
children React children -
renderOverlay Renders an overlay over the parallax header, e.g text -
renderHeader -
heroImage React Native image props for display default image -

Examples

There are a number of examples that can be found in the /examples directory. If you'd like to run the examples you will need to:

  1. checkout this repository
  2. run yarn ; yarn bootstrap in the root
  3. run yarn example:ios which will run the example directory in a simulator

License

MIT © FabFit