@fabfit/react-native-parallax-header
TypeScript icon, indicating that this package has built-in type declarations

0.4.0 • Public • Published

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

Package Sidebar

Install

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

Weekly Downloads

12

Version

0.4.0

License

MIT

Unpacked Size

76.5 kB

Total Files

48

Last publish

Collaborators

  • jamiehalvorson