npm.io
0.4.0 • Published 6 years ago

@fabfit/react-native-parallax-header

Licence
MIT
Version
0.4.0
Deps
0
Size
75 kB
Vulns
0
Weekly
0
Stars
6
SummaryDependencyVersions

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

Keywords

react-nativeiosandroid