Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/i6mi6/react-native-parallax-scroll-view
A ScrollView-like component with parallax and sticky header support.
https://github.com/i6mi6/react-native-parallax-scroll-view
Last synced: 26 days ago
JSON representation
A ScrollView-like component with parallax and sticky header support.
- Host: GitHub
- URL: https://github.com/i6mi6/react-native-parallax-scroll-view
- Owner: i6mi6
- License: isc
- Created: 2015-12-16T02:33:09.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-03-30T21:57:41.000Z (7 months ago)
- Last Synced: 2024-04-23T02:36:08.278Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 10.1 MB
- Stars: 2,255
- Watchers: 35
- Forks: 379
- Open Issues: 93
-
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-view ★1486 - A ScrollView-like component with parallax and sticky header support. (Components / UI)
README
[](https://www.npmjs.com/package/react-native-parallax-scroll-view)
[](https://www.npmjs.com/package/react-native-parallax-scroll-view)
# Rodrigocs - Animated Driver
This component now uses Native Driver by default.
Remember to pass a Animated component to `renderScrollComponent`, by default it has `Animated.ScrollView`
# Example
```js
import ParallaxScrollView from 'react-native-parallax-scroll-view';
import CustomScrollView from 'custom-scroll-view'
const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)
render() {
return (
}
renderScrollComponent={() => }
renderForeground={() => (
Hello World!
)}>
Scroll me
);
}
```
# react-native-parallax-scroll-view
A `ScrollView`-like component that:
- Has a parallax header
- Has an optional sticky header
- Is composable with any component that expects a `ScrollView` (e.g. `ListView` or [`InfiniteScrollView`](https://github.com/exponentjs/react-native-infinite-scroll-view))
- Can be nested within other views
- Works on iOS and Android
## Installation
```
$ npm install react-native-parallax-scroll-view --save
```
**Note:** For React Native 0.19.0 and earlier, you'll want to use `[email protected]`. Version `0.18.0` changes the scrolling API to be compatible with React Native 0.20.0.
## Demo
| iOS | Android |
| --- | ------- |
|  |  |
## Basic Usage
```js
import ParallaxScrollView from 'react-native-parallax-scroll-view';
// Inside of a component's render() method:
render() {
return (
(
Hello World!
)}>
Scroll me
);
}
```
## Examples
Please refer to the [ListView example](./examples/ListView/Talks.js) provided to see how `ParallaxScrollView` can be used in
combination with `ListView`.
The [Android ListView example](./examples/ListView/index.android.js) shows how you can use `PullToRefreshViewAndroid` with `ParallaxScrollView`.
There are more examples in the [examples](./examples) folder.
## 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 `ParallaxScrollView` component adds a few additional properties, as described below.
| Property | Type | Required | Description |
| -------- | ---- | -------- | ----------- |
| `backgroundColor` | `string` | No | The color of the header background. Defaults to `#000`) |
| `backgroundScrollSpeed` | `number` | No | The speed factor that the background moves at relative to the foreground. Defaults to 5. |
| `contentBackgroundColor` | `string` | No | This is the background color of the content. (Defaults to `'#fff'`) |
| `fadeOutForeground` | `bool` | No | If `true`, the foreground will fade out as the user scrolls up. (Defaults to `true`) |
| `onChangeHeaderVisibility` | `func` | No | 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. |
| **`parallaxHeaderHeight`** | `number` | **Yes** |This is the height of parallax header. |
| `renderBackground` | `func` | No | This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using `backgroundColor`) |
| `renderContentBackground` | `func` | No | This renders the background of the content. Can be used to display cover images for example. (Defaults to a non-visible `View`) |
| `renderFixedHeader` | `func` | No | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You should set its height and width appropriately. |
| `renderForeground` | `func` | No |This renders the foreground header that moves at same speed as scroll content. |
| `renderScrollComponent` | `func` | No | A function with input `props` and outputs an `Animated.ScrollView`-like component in which the content is rendered. This is useful if you want to provide your own scrollable component, remember however to make it an Animated component. (See: [https://github.com/exponentjs/react-native-scrollable-mixin](https://github.com/exponentjs/react-native-scrollable-mixin)) (By default, returns a `Animated.ScrollView` with the given props) |
| `renderStickyHeader` | `func` | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |
| `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | If `renderStickyHeader` is set, then its height must be specified. |
| `contentContainerStyle` | `object` | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as for [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)) |
| `outputScaleValue` | `number` | No | The value for the scale interpolation output value, default `5` |
| `parallaxHeaderContainerStyle` | `object` | No | These styles will be applied to the parallax header view content container |
| `parallaxHeaderStyle` | `object` | No | These styles will be applied to the parallax header view content |
| `backgroundImageStyle` | `object` | No | These styles will be applied to the background image header view content |
| `stickyHeaderStyle` | `object` | No | These styles will be applied to the sticky headerStyle view content |
| `scrollEvent` | `func` | No | Callback to recieve the animated scroll event values |
## Latest changes
### 0.20.1
- Added prop to change interpolated Scale Output Value
### 0.20.0 // Rodrigocs
- Now uses native driver, and tested with React Native 0.46.0
- Adds `useNativeDriver` to improve performance, but renderScrollComponent must be a Animated component ( ie: Animated.createAnimatedComponent(component))
See full changelog [here](./CHANGELOG.md).
## Contributing
I welcome contributions! Please open an issues 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. :)