Info

Updated version of react-native-parallax-scroll-view I published this because the height for the page was much longer than it needed to be.

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-sadooghi';
import CustomScrollView from 'custom-scroll-view'

const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)

render() {
return (
backgroundColor="blue"
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
// renderScrollComponent={() => }
renderScrollComponent={() => }
renderForeground={() => (

Hello World!

)}>

Scroll me


);
}
`

react-native-parallax-scroll-view-sadooghi

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)
- Can be nested within other views
- Works on iOS and Android

Installation

`
$ npm install react-native-parallax-scroll-view-sadooghi --save
`




Demo


| iOS | Android |
| --- | ------- |
| ![](./demo.ios.0.17.2.gif) | ![](./demo.android.0.17.2.gif) |

Basic Usage

`js
import ParallaxScrollView from 'react-native-parallax-scroll-view-sadooghi';

// Inside of a component's render() method:
render() {
return (
backgroundColor="blue"
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
renderForeground={() => (

Hello World!

)}>

Scroll me


);
}
`




Usage (API)

All of the properties of ScrollView are supported. Please refer to the
ScrollView documentation 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) |
| backgroundSpeed | 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) |
| 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) (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) |
| outputScaleValue | number | No | The value for the scale interpolation output value, default 5` |

Latest changes

Contributing