react-native-keyboard-aware-parallax-scroll-view v0.0.4

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

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