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

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

// Inside of a component's render() method:
render() {
  return (
     <ParallaxScroll
      renderHeader={({ animatedValue }) => <Header animatedValue={animatedValue} />}
      headerHeight={50}
      isHeaderFixed={false}
      parallaxHeight={250}
      renderParallaxBackground={({ animatedValue }) => <Background animatedValue={animatedValue} />}
      renderParallaxForeground={({ animatedValue }) => <Foreground animatedValue={animatedValue} />}
      parallaxBackgroundScrollSpeed={5}
      parallaxForegroundScrollSpeed={2.5}
    >
      <Welcome />
    </ParallaxScroll>
  );
}

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 for more detail.

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

Latest changelog

All changes here

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. :)