React Native Parallax Swiper

Configurable parallax swiper based on an iOS pattern.

Features

• Flexible. Share one Animated.Value between ParallaxSwiper and your own UI.
• Performant. Runs on the native thread for 60FPS with no latency.
• Cross-platform. Works on both iOS and Android.
• Progress Bar. Horizontal or vertical progress bar.

Examples

Clone this repo and:

$ cd examples/ParallaxSwiperExample
$ npm install
$ react-native link
$ react-native run-ios

Installation

$ npm install react-native-parallax-swiper --save

Usage

import React from "react";
import {
  Animated,
  Text,
  View,
  Image,
  StyleSheet,
  Dimensions
} from "react-native";

import {
  ParallaxSwiper,
  ParallaxSwiperPage
} from "react-native-parallax-swiper";

const { width, height } = Dimensions.get("window");

export default class App extends React.Component {
  myCustomAnimatedValue = new Animated.Value(0);

  getPageTransformStyle = index => ({
    transform: [
      {
        scale: this.myCustomAnimatedValue.interpolate({
          inputRange: [
            (index - 1) * (width + 8), // Add 8 for dividerWidth
            index * (width + 8),
            (index + 1) * (width + 8)
          ],
          outputRange: [0, 1, 0],
          extrapolate: "clamp"
        })
      },
      {
        rotate: this.myCustomAnimatedValue.interpolate({
          inputRange: [
            (index - 1) * (width + 8),
            index * (width + 8),
            (index + 1) * (width + 8)
          ],
          outputRange: ["180deg", "0deg", "-180deg"],
          extrapolate: "clamp"
        })
      }
    ]
  });

  render() {
    return (
      <ParallaxSwiper
        speed={0.5}
        animatedValue={this.myCustomAnimatedValue}
        dividerWidth={8}
        dividerColor="black"
        backgroundColor="black"
        onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
        showProgressBar={true}
        progressBarBackgroundColor="rgba(0,0,0,0.25)"
        progressBarValueBackgroundColor="white"
      >
        <ParallaxSwiperPage
          BackgroundComponent={
            <Image
              style={styles.backgroundImage}
              source={{ uri: "https://goo.gl/wtHtxG" }}
            />
          }
          ForegroundComponent={
            <View style={styles.foregroundTextContainer}>
              <Animated.Text
                style={[styles.foregroundText, this.getPageTransformStyle(0)]}
              >
                Page 1
              </Animated.Text>
            </View>
          }
        />
        <ParallaxSwiperPage
          BackgroundComponent={
            <Image
              style={styles.backgroundImage}
              source={{ uri: "https://goo.gl/gt4rWa" }}
            />
          }
          ForegroundComponent={
            <View style={styles.foregroundTextContainer}>
              <Animated.Text
                style={[styles.foregroundText, this.getPageTransformStyle(1)]}
              >
                Page 2
              </Animated.Text>
            </View>
          }
        />
        <ParallaxSwiperPage
          BackgroundComponent={
            <Image
              style={styles.backgroundImage}
              source={{ uri: "https://goo.gl/KAaVXt" }}
            />
          }
          ForegroundComponent={
            <View style={styles.foregroundTextContainer}>
              <Animated.Text
                style={[styles.foregroundText, this.getPageTransformStyle(2)]}
              >
                Page 3
              </Animated.Text>
            </View>
          }
        />
      </ParallaxSwiper>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
    width,
    height
  },
  foregroundTextContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "transparent"
  },
  foregroundText: {
    fontSize: 34,
    fontWeight: "700",
    letterSpacing: 0.41,
    color: "white"
  }
});

ParallaxSwiper Props

| Prop | Type | Default | Description | | ------------------------------------- | -------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | speed | Number | 0.25 | This number determines how fast BackgroundComponent moves. Set to 0 for no movement at all, set to 1 and background will move as fast as the scroll. | | dividerWidth | Number | 8 | The width of the divider between each page. (horizontal only) | | dividerColor | String | black | Color of divider. | | backgroundColor | String | black | ParallaxSwiper’s background color. | | scrollToIndex | Number | 0 | Scroll to page with a smooth animation. Note: You need to use state if you want to change index any other time than when component is rendered. | | onMomentumScrollEnd | Function | N/A | Fired when ScrollView stops scrolling and is passed the current page index. | | animatedValue | Number (Animated.Value) | 0 | Optionally pass a new instance of Animated.Value to access the animated value outside of ParallaxSwiper. | | vertical | Boolean | false | When true, ParallaxSwiper’s children are arranged vertically in a column instead of horizontally in a row. For now only iOS supports this. | | showsHorizontalScrollIndicator | Boolean | false | When true, shows a horizontal scroll indicator. The default value is false. | | showsVerticalScrollIndicator | Boolean | false | When true, shows a vertical scroll indicator. The default value is false. | | children | React component (ParallaxSwiperPage) | N/A | Each top-level ParallaxSwiperPage child. | | showProgressBar | Boolean | false | When true, a progress bar will render on bottom for horizontal and left on vertical. | | progressBarThickness | Number | 4 | Thickness translates to height for horizontal and width for vertical progress bar. | | progressBarBackgroundColor | String | rgba(255,255,255,0.25) | Background color of progress bar background. | | progressBarValueBackgroundColor | String | white | Background color of progress bar value background. |

ParallaxSwiperPage Props

| Prop | Type | Default | Description | | ------------------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------- | | BackgroundComponent | React element | N/A | This component will render in the background of the page and will be animated based on scroll. | | ForegroundComponent | React element | N/A | This component will render in the foreground of the page. |

TODO

• [x] Create Expo demos
• [x] Create examples
• [x] Expose current index
• [x] Support scrollToIndex
• [x] Fix Android
• [x] Expose Animated.Value for animation outside of ParallaxSwiper
• [ ] Add drag effects e.g. zoom, blur, darken
• [ ] Expose rest of ScrollView props
• [ ] Use FlatList instead of ScrollView

Why another parallax component? 😒

This component is inspired by an iOS pattern that no react-native-parallax-whatever previously delivered. It emulates this pattern by using the ScrollView component which has features like velocity, paging, and platform specific easing curves; It also has optional dividers to split up each page. You can see this pattern in apps like iOS Camera Roll, Twitter Moments, Kylie Jenner’s app, Vevo’s app, and more.

Contributors

| Chris LeBlanc[💻] | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: |

Questions or suggestions?

Hit me up on Twitter, or create an issue.

Copyright

Copyright (c) 2017 Zachary Gibson Licensed under the MIT license.