Demo

Installation

Install the package using yarn or npm:

yarn add react-native-scroll-view or npm i react-native-scroll-view

Usage

import ParallaxScrollView from 'react-native-scroll-view';

<ParallaxScrollView />

<ParallaxScrollView
  windowHeight={SCREEN_HEIGHT * 0.4}
  backgroundSource='http://i.imgur.com/UyjQBkJ.png'
  navBarTitle='John Oliver'
  userName='John Oliver'
  userTitle='Comedian'
  userImage='http://i.imgur.com/RQ1iLOs.jpg'
  leftIcon={{name: 'rocket', color: 'rgba(131, 175, 41, 1)', size: 30, type: 'font-awesome'}}
  rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
/>


<ParallaxScrollView
  windowHeight={SCREEN_HEIGHT * 0.4}
  backgroundSource='http://i.imgur.com/UyjQBkJ.png'
  navBarTitle='John Oliver'
  userName='John Oliver'
  userTitle='Comedian'
  userImage='http://i.imgur.com/RQ1iLOs.jpg'
  leftIcon={{name: 'rocket', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
  rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
>
  <ScrollView style={{flex: 1, backgroundColor: 'rgba(228, 117, 125, 1)'}}>
    <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 32, color: 'white'}}>Custom view</Text>
    </View>
    <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 32, color: 'white'}}>keep going.</Text>
    </View>
    <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 32, color: 'white'}}>keep going..</Text>
    </View>
    <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 32, color: 'white'}}>keep going...</Text>
    </View>
    <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 32, color: 'white'}}>the end! :)</Text>
    </View>
  </ScrollView>
</ParallaxScrollView>

API

| prop | default | type | description | | ---- | ---- | ----| ---- | | backgroundSource | http://i.imgur.com/6Iej2c3.png | string | The background image for the header (url) | | windowHeight | SCREEN_HEIGHT * 0.5 | number | The height of the header window | | navBarTitle | Katy Friedson | string | The title to be display on the NavBar header | | userName | Katy Friedson | string | The user name displayed in the collapsable header view | | userImage | http://i.imgur.com/uma9OfG.jpg | string | The user image displayed in the collapsable header view | | userTitle | Engineering Manager | string | The user title displayed in the collapsable header view | | headerView | Profile View | custom object | Pass in a custom object to override the default header view | | leftIcon | menu | object | Pass in the left icon name and type as an object. leftIcon={{name: 'rocket', color: 'red', size: 30, type: 'font-awesome'}}| | rightIcon | present | object | Pass in the right icon name and type etc as an object. rightIcon={{name: 'user', color: 'blue', size: 30, type: 'font-awesome'}}| | children | List View | React Components | Render any react views/components as children and these will be rendered below the headerView |

Try it out

You can try it out with Exponent here.

Example

Look at the example folder to run the expo app locally.

Motivation

There are a couple packages that provide a similar parallax scroll view component (here and here) although both of them are not maintained.

I really liked react-native-parallax-view but here are a couple reasons I didn't use it in my app:

1. It was not maintained hence I knew submitting an issue on it would go nowhere
2. It didn't have a Sticky NavBar when scrolling (similar to Spotify/ ReactConf'17 app)

So I set out to create a Parallax ScrollView component (using react-native-parallax-view as a base) with

1. Sticky NavBar Header :tada:
2. An awesome default component that just works out of the box (<ParallaxScrollView />)
3. Flexible and comprehensive API to build your own custom use case on it

aka it's a (Parallax) ScrollView component for React Native that we truly deserve :rocket:

Feedback

This repo is being actively manitained. Feel free to open a new Issue with a Feature Request or submit a PR with an Enhancement.