React Native Parallax Swiper

Configurable parallax swiper based on an iOS pattern.

Features

Flexible. Pass your own Animated.Value and use that value for both ParallaxSwiper and your own UI.
Performant. Leverages useNativeDriver for 60FPS and no latency.
Cross-platform. Implement your parallax on both iOS and Android.

Installation

$ yarn add react-native-parallax-swiper

Usage

import ParallaxSwiper from 'react-native-parallax-swiper';

constructor() {
  super();
  
  this.myCustomAnimatedValue = new Animated.Value(0);
}

<ParallaxSwiper
  parallaxStrength={80}
  animatedScrollValue={this.myCustomAnimatedValue}
  dividerWidth={8}
  dividerColor="black"
  backgroundColor="#fff"
  onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
>
  <Animated.View
    style={{
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
      opacity: this.myCustomAnimatedValue.interpolate({
        inputRange: [0, deviceWidth * 0.25],
        outputRange: [1, 0]
      })
    }}
    backgroundImage={`https://source.unsplash.com/user/erondu/${deviceHeight + 1}x${deviceWidth + 1}`}
  >
    <Text>Parallaxing is rad</Text>
  </Animated.View>
  <View
    style={{
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
    }}
    backgroundImage={`https://source.unsplash.com/user/erondu/${deviceHeight}x${deviceWidth}`}
  >
    <Text>Parallaxing is too rad</Text>
  </View>
</ParallaxSwiper>

Props

Prop	Type	Default	Description
`parallaxStrength`	Number	`80`	This number determines how slow parallax’ing element moves. Lower number yields a subtler parallax effect, higher number increases parallax effect.
`dividerWidth`	Number	`8`	The width of the divider between each page. (horizontal only)
`dividerColor`	String	`black`	Color of divider.
`backgroundImage`	String	`N/A`	The image source. If used this becomes the background image that parallaxes. (remote URL only for now)
`backgroundImageResizeMode`	String	`cover`	Determines how to resize the image.
`backgroundColor`	String	`black`	The main view’s background color.
`scrollToIndex`	Function	0	Scrolls to index with a smooth animation. If used onComponentDidMount scroll is immediate with no animation.
`onMomentumScrollEnd`	Function	`N/A`	Called when ScrollView stops scrolling and is passed the current page index.
`animatedScrollValue`	Animated.Value	`0`	Optionally pass a new instance of Animated.Value to this prop to have access to the animated scroll value to animate your own components.
`children`	ReactComponents	`N/A`	JSX to inject into the page.
`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, but there is work to implement vertical paging on Android.
`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.

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

_{Chris LeBlanc} [💻]

Questions or suggestions?

Hit me up on Twitter, or create an issue.

cjstone1982/react-native-parallax-swiper