new version of react-native-parallax-scroll-view
npm install react-native-parallax-scroll-view-newnew version of react-native-parallax-scroll-view I published this because the height for the page was much longer than it needed to be.
This component now uses Native Driver by default.
Remember to pass a Animated component to renderScrollComponent, by default it has Animated.ScrollView
js
import ParallaxScrollView from 'react-native-parallax-scroll-view-new';
import CustomScrollView from 'custom-scroll-view'const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)
render() {
return (
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
// renderScrollComponent={() =>
renderScrollComponent={() =>
renderForeground={() => (
Hello World!
)}>
Scroll me
);
}
`react-native-parallax-scroll-view-new
A
-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 AndroidInstallation
`
$ npm install react-native-parallax-scroll-view-new --save
Demo
| iOS | Android |
| --- | ------- |
|  |  |
Basic Usage
js
import ParallaxScrollView from 'react-native-parallax-scroll-view-new';// Inside of a component's render() method:
render() {
return (
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
renderForeground={() => (
Hello World!
)}>
Scroll me
);
}
`
Usage (API)
All of the properties of
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` |