Home

Awesome

React Native Parallax Swiper

npm npm styled with prettier

Configurable parallax swiper based on an iOS pattern.

Features

Twitter Moments Demo
Vevo Demo
Lightbox Demo

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

PropTypeDefaultDescription
speedNumber0.25This 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.
dividerWidthNumber8The width of the divider between each page. (horizontal only)
dividerColorStringblackColor of divider.
backgroundColorStringblackParallaxSwiper’s background color.
scrollToIndexNumber0Scroll 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.
onMomentumScrollEndFunctionN/AFired when ScrollView stops scrolling and is passed the current page index.
animatedValueNumber (Animated.Value)0Optionally pass a new instance of Animated.Value to access the animated value outside of ParallaxSwiper.
verticalBooleanfalseWhen true, ParallaxSwiper’s children are arranged vertically in a column instead of horizontally in a row. For now only iOS supports this.
showsHorizontalScrollIndicatorBooleanfalseWhen true, shows a horizontal scroll indicator. The default value is false.
showsVerticalScrollIndicatorBooleanfalseWhen true, shows a vertical scroll indicator. The default value is false.
childrenReact component (ParallaxSwiperPage)N/AEach top-level ParallaxSwiperPage child.
showProgressBarBooleanfalseWhen true, a progress bar will render on bottom for horizontal and left on vertical.
progressBarThicknessNumber4Thickness translates to height for horizontal and width for vertical progress bar.
progressBarBackgroundColorStringrgba(255,255,255,0.25)Background color of progress bar background.
progressBarValueBackgroundColorStringwhiteBackground color of progress bar value background.

ParallaxSwiperPage Props

PropTypeDefaultDescription
BackgroundComponentReact elementN/AThis component will render in the background of the page and will be animated based on scroll.
ForegroundComponentReact elementN/AThis component will render in the foreground of the page.

TODO

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

<img src="https://avatars0.githubusercontent.com/u/2807897?v=4&s=460" width="80px;"/><br /><sub>Chris LeBlanc</sub><br />[💻]

Questions or suggestions?

Hit me up on Twitter, or create an issue.

Copyright

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