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