react-native-scroll-view

The (Parallax) ScrollView component we all deserve. :rocket:

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.