React Native Keyboard Aware Parallax ScrollView
Motivation
We needed a parallax view with native animation and
a scrollView that scrolls automatically when focussing a TextField.
As seen in the FLAVR app
Google play
iTunes store
(Screenshot belongs to FLAVR NV, all rights reserved)
Setup
Install the dependency with npm or yarn:
yarn add react-native-keyboard-aware-parallax-scroll-view
Import into your component
import ParallaxKeyboardAwareScrollView from 'react-native-keyboard-aware-parallax-scroll-view';
Example
function ExampleComponent(props) {
return (
<ParallaxKeyboardAwareScrollView
backgroundImage={{ uri: kitchenPicture }}
imageHeight={160}
onScroll={props.onScroll}
>
{renderContent()}
</ParallaxKeyboardAwareScrollView>
);
}
Properties
Name | Type | Default value | Description |
---|
imageHeight | Number | 200 | The height of the header image |
onScroll | Function | | Additional scroll handler |
backgroundImage | Object | | Image resource for the background image |
background | Function | | Instead of an image, render a component on the background (function that returns component) |
header | Function | | Function that renders header overlay component |
Methods
To use scrollToPostion and other scrollView methods,
just use the reference.scrollView (e.g. this.kapsv.scrollView.scrollToPosition)
<ParallaxKeyboardAwareScrollView
ref={(kapsv) => { this.kapsv = kapsv; }}
>
{renderContent()}
</ParallaxKeyboardAwareScrollView>
Contribute
Make sure eslint has no issues before making a PR
npm run lint