0.4.0 • Published 4 years ago
@fabfit/react-native-parallax-header v0.4.0
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-headeror
yard add @fabfit/react-native-parallax-headerUsage
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:
- checkout this repository
- run
yarn ; yarn bootstrapin the root - run
yarn example:ioswhich will run the example directory in a simulator