Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/monterosalondon/react-native-parallax-scroll

Parallax scroll view for react-native
https://github.com/monterosalondon/react-native-parallax-scroll

parallax parallax-scrolling react react-native scroll

Last synced: 5 days ago
JSON representation

Parallax scroll view for react-native

Host: GitHub
URL: https://github.com/monterosalondon/react-native-parallax-scroll
Owner: monterosalondon
License: mit
Created: 2017-04-19T07:25:47.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-01-03T17:40:15.000Z (almost 2 years ago)
Last Synced: 2024-04-24T20:04:56.887Z (8 months ago)
Topics: parallax, parallax-scrolling, react, react-native, scroll
Language: JavaScript
Size: 149 MB
Stars: 554
Watchers: 10
Forks: 63
Open Issues: 28
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-react-native - react-native-parallax-scroll ★209 - Parallax Scroll component with sticky header, foreground, native-driver and all scrollable components (FlatList, ListView, SectionList, ScrollView) support. (Components / UI)
awesome-react-native - react-native-parallax-scroll ★209 - Parallax Scroll component with sticky header, foreground, native-driver and all scrollable components (FlatList, ListView, SectionList, ScrollView) support. (Components / UI)
awesome-reactnative-ui - react-native-parallax-scroll - native|<ul><li>Last updated : This week</li><li>Stars : 263</li><li>Open issues : 6</li></ul>|![](https://raw.githubusercontent.com/monterosalondon/react-native-parallax-scroll/master/./demo/ios-demo-4.gif)| (Others)
awesome-reactnative-ui - react-native-parallax-scroll - native|<ul><li>Last updated : This week</li><li>Stars : 263</li><li>Open issues : 6</li></ul>|![](https://raw.githubusercontent.com/monterosalondon/react-native-parallax-scroll/master/./demo/ios-demo-4.gif)| (Others)
awesome-react-native - react-native-parallax-scroll ★209 - Parallax Scroll component with sticky header, foreground, native-driver and all scrollable components(FlatList, ListView, SectionList, ScrollView) support. (Components / UI)
awesome-react-native - react-native-parallax-scroll ★209 - Parallax Scroll component with sticky header, foreground, native-driver and all scrollable components (FlatList, ListView, SectionList, ScrollView) support. (Components / UI)

README

[![](https://img.shields.io/npm/dm/@monterosa/react-native-parallax-scroll.svg?style=flat-square)](https://www.npmjs.com/package/@monterosa/react-native-parallax-scroll)

# react-native-parallax-scroll

A `ScrollView`-like component that:

* Has a parallax background
* Has a parallax foreground
* Has a fixed or sticky header
* Can be nested within other views(FlatList, SectionList)
* Works on iOS and Android

## Installation

```
$ npm install @monterosa/react-native-parallax-scroll --save
```

## Demo

YouTube - https://www.youtube.com/watch?v=zM4koduK32Y

## Basic Usage

```js
import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

// Inside of a component's render() method:
render() {
return (
}
headerHeight={50}
isHeaderFixed={false}
parallaxHeight={250}
renderParallaxBackground={({ animatedValue }) => }
renderParallaxForeground={({ animatedValue }) => }
parallaxBackgroundScrollSpeed={5}
parallaxForegroundScrollSpeed={2.5}
>

);
}
```

## Examples

Please clone the repo and run `npm run storybook` or `yarn storybook` to show examples of usages.

## Usage (API)

All of the properties of `ScrollView` are supported. Please refer to the
[`ScrollView` documentation](https://facebook.github.io/react-native/docs/scrollview.html) for more detail.

The `ParallaxScroll` component adds a few additional properties, as described below.

| Property
| -------------------------------
| `style`
| `width`
| `height`
| `innerRef`
| `scrollStyle`
| `headerHeight`
| `renderHeader`
| `onHeaderFixed`
| `isHeaderFixed`
| `parallaxHeight`
| `useNativeDriver`
| `scrollableComponent`
| `isBackgroundScalable`
| `headerBackgroundColor`
| `contentContainerStyle`
| `headerFixedTransformY`
| `onChangeHeaderVisibility`
| `renderParallaxBackground`
| `renderBackgroundPlaceholder`
| `renderParallaxForeground`
| `fadeOutParallaxBackground`
| `fadeOutParallaxForeground`
| `headerFixedBackgroundColor`
| `backgroundScale`
| `backgroundScaleOrigin`
| `parallaxBackgroundScrollSpeed`
| `parallaxForegroundScrollSpeed` | Type | Defaut | Description | | ------------------------------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `object` | `{}` | Component's styles | | `number` | `Dimensions.get('window').width` | Component's width. | | `number` | `Dimensions.get('window').height` | Component's height. | | `func` | `null` | To get a reference to the scrollable component. | | `object` | `{}` | These styles will be applied to the scroll view. | | `number` | `45` | This is the height of sticky(fixed) header. | | `({ width, height, animatedValue }) => {}` | `null` | This renders an optional sticky(fixed) header that will be visible to the top of the view. | | `func` | `null` | A callback function that is invoked when the header will attach to the top. | | `bool` | `false` | Is header fixed to top(not sticky)? | | `number` | `Dimensions.get('window').width * 9 / 16` | This is the height of parallax. | | `bool` | `false` | Enable [Native driver](https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html) for animated. NOTE: Works only with `Animated.ScrollView` component. | | `class` | `Animated.ScrollView` | This is a class of scrollable component. | | `bool` | `true` | Is background scalable on iOS? | | `string` | `rgba(0, 0, 0, 0)` | The color of the unsticked(unfixed) header background. Can be empty `''` string. NOTE: Dosen't work with useNativeDriver. | | `object` | `{}` | These styles will be applied to the scroll view content container which wraps all of the child views. | | `number` | `0` | This number indicating how much the fixed header should move upwards during the scroll. Used as the hack to change fixed header height during scroll. | | `func` | `null` | A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with a `boolean` value to indicate whether header is visible or not. | | `({ width, height, animatedValue }) => {}` | `null` | This renders the background of the parallax. | | `({ height, animatedValue }) => {}` | `null` | By default we assume that you want to show the foreground and background in its own space. We prepend an empty view with the height of `parallaxHeight`. You can override this behaviour to layer things in between foreground and background. You might want to avoid foreground in such a scenario, see Issue [#23](https://github.com/monterosalondon/react-native-parallax-scroll/issues/23) for more details. | | `({ width, height, animatedValue }) => {}` | `null` | This renders the foreground of the parallax. | | `bool` | `false` | If `true`, the background will fade out as the user scrolls up. | | `bool` | `false` | If `true`, the foreground will fade out as the user scrolls up. | | `string` | `rgba(0, 0, 0, 1)` | The color of the sticked(fixed) header background. | | `number` | `3` | The speed factor that the background scales. Respects `backgroundScaleOrigin` | | `center` or `top` | `center` | The point of which the background should scroll from. Use `top` with `backgroundScale={2}` in order to achieve iOS native parallax scroll behavior. Top will keep the background locked to the top of the scrollview, while scaling the image such that it stretches the background in the downwards direction. | | `number` | `5` | The speed factor that the background moves at relative to the scroll content. | | `number` | `5` | The speed factor that the foreground moves at relative to the scroll content. |

## Latest changelog

All changes [here](./CHANGELOG.md)

### 1.8.0 - 2018-04-14

#### Added

* `renderBackgroundPlaceholder` prop for overriding default behaviour to layer things in between foreground and background (#23)

### 1.7.0 - 2018-04-12

#### Added

* `backgroundScale` and `backgroundScaleOrigin` props for support scaling from the top and make scale factor configurable (#22)

### 1.6.0 - 2018-04-05

#### Fixed

* Based on the Component, instead of PureComponent

## Contributing

I welcome contributions! Please open an issue if you have any feature ideas
or find any bugs. I also accept pull requests with open arms. I will
go over the issues when I have time. :)