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
;<ParallaxScrollView /><ParallaxScrollViewwindowHeight=SCREEN_HEIGHT * 04backgroundSource='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'/><ParallaxScrollViewwindowHeight=SCREEN_HEIGHT * 04backgroundSource='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:
- It was not maintained hence I knew submitting an issue on it would go nowhere
- 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
- Sticky NavBar Header 🎉
- An awesome default component that just works out of the box (
<ParallaxScrollView />
) - 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 🚀
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
.