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