react-native-parallax-swiper

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

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

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.