https://github.com/monte9/react-native-parallax-scrollview

The Parallax ScrollView component we all deserve. :rocket:
https://github.com/monte9/react-native-parallax-scrollview

android ios profile react-native scrollview-component stickyheader

Last synced: 5 days ago
JSON representation

The Parallax ScrollView component we all deserve. :rocket:

• Host: GitHub
• URL: https://github.com/monte9/react-native-parallax-scrollview
• Owner: Monte9
• License: mit
• Created: 2017-05-18T17:59:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-07-22T13:03:02.000Z (over 2 years ago)
• Last Synced: 2024-12-25T06:11:46.651Z (12 days ago)
• Topics: android, ios, profile, react-native, scrollview-component, stickyheader
• Language: JavaScript
• Homepage: https://expo.io/@monte9/parallax-scrollview-example
• Size: 10.7 MB
• Stars: 279
• Watchers: 8
• Forks: 54
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  








  

  



## Demo

![Demo gif](./react-native-scroll-view.gif)

## Installation

This package has a dependency of React Native Elements. Install RNE first with:

```yarn add react-native-elements``` (make sure the version is `0.19.1`)

Finally install this package using yarn or npm:

```yarn add react-native-parallax-scrollview```

## Usage

### Default Profile Component

``` jsx

import ParallaxScrollView from 'react-native-parallax-scrollview';

```

### Default header view with custom User

```jsx

```

### Default Header view & Custom ScrollView content

```jsx

  

    

      Custom view

    

    

      keep going.

    

    

      keep going..

    

    

      keep going...

    

    

      the end! :)

    

  

```

### Custom Header view & ScrollView content

```jsx

      

        My App

        

          Custom Header View

        

      

    

  )}

  leftIcon={{name: 'rocket', color: 'rgba(228, 117, 125, 1)', size: 30, type: 'font-awesome'}}

  leftIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}

  rightIcon={{name: 'user', color: 'rgba(228, 117, 125, 1)', size: 30, type: 'font-awesome'}}

  rightIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}

>

  

    

      Custom view

    

    

      keep going.

    

    

      keep going..

    

    

      keep going...

    

    

      the end! :)

    

  

```

## API

| prop | default | type | description |

| ---- | ---- | ----| ---- |

| backgroundSource | {uri:http://i.imgur.com/6Iej2c3.png} | ImageSourcePropType | The background image for the header. The image source is (either a remote URL or a local file resource) ```backgroundSource={{uri:http://i.imgur.com/6Iej2c3.png}}``` or ```backgroundSource={require('./image.png')}```  |

| onBackgroundLoadEnd | none | callback | Callback function when the background finishes loading (either with success or failure) |

| onBackgroundLoadError | none | callback | Callback function when the background loading fails (an object is received with the error details) |

| 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 |

| navBarTitleColor | 'white' | string | Color of the navBar title when displayed |

| navBarColor | 'rgba(0, 0, 0, 1.0)' | string | Color of the navbar when shown |

| navBarHeight | 65 | number | Height of the navBar when displayed |

| navBarView | Left/Right Icons View | custom object | Pass in a custom object to override the default navigation bar view |

| 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 | none | object | Pass in the left icon name and type as an object. ```leftIcon={{name: 'rocket', color: 'red', size: 30, type: 'font-awesome'}}```|

| leftIconOnPress | none | callback | Callback function when the left icon is pressed |

| leftIconUnderlayColor | 'transparent' | string | Underlay color for the left icon. |

| rightIcon | none | object | Pass in the right icon name and type etc as an object. ```rightIcon={{name: 'user', color: 'blue', size: 30, type: 'font-awesome'}}```|

| rightIconOnPress | none | callback | Callback function when the right icon is pressed |

| rightIconUnderlayColor | 'transparent' | string | Underlay color for the right icon. |

| *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](https://exp.host/@monte9/parallax-scrollview-example)

### Example

Look at the [`example`](https://github.com/Monte9/react-native-parallax-scrollview/tree/master/example) folder to run the expo app locally.

## Motivation

Currently there are a couple packages that provide a similar parallax Scrollview component ([here](https://github.com/jaysoo/react-native-parallax-scroll-view) and [here](https://github.com/lelandrichardson/react-native-parallax-view)) although both of them are not maintained and wasn't exactly what I was looking for.

So I challenged myself to create a Parallax ScrollView component (using [react-native-parallax-view](https://github.com/lelandrichardson/react-native-parallax-view) as a base) with

1. Sticky NavBar Header :tada:

2. An awesome default profile component that just works out of the box (``````)

3. Flexible and comprehensive API to use the ScrollView component for any use case.

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`.