react-native-parallax-swiper

React Native Parallax Swiper

Configurable parallax swiper that leverages useNativeDriver for 60FPS parallax. Allows for your own custom animations outside of this component.

Ways to use this component

1. You have a background image that parallaxes while your UI moves at the ScrollView speed

1. You have no background image and all of your UI parallaxes

☝️ React Native Zoomable for image zoom. Artwork by Daniel Mackey.

Installation

$ yarn add react-native-parallax-swiper

Usage

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

<ParallaxSwiper
  parallaxStrength={80}
  dividerWidth={8}
  dividerColor="black"
  backgroundColor="#bae"
  onMomentumScrollEnd={() => console.log('💩')}
>
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
     }}
     backgroundImage={'https://goo.gl/7Mvjji'}
    >
    <Text>Pass Arbitrary JSX to ParallaxSwiper as Children</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 slide. (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.
onMomentumScrollEnd	Function	N/A	Called when ScrollView stops scrolling.
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 slide.
vertical	Boolean	false	When true, ParallaxSwiper’s children are arranged vertically in a column instead of horizontally in a row.
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
• Expose ScrollView scrollTo Method
• Fix Android
• Expose ScrollView contentOffset
• Add drag effects e.g. zoom, blur, darken
• Expose rest of ScrollView props
• Create <Slide/> component to replace arbitrary React Children Components? 🤔

Why another parallax component?

This component was created to emulate a specific iOS pattern that no react-native-parallax-whatever previously delivered. Native ScrollView, paging, and native driver for 60FPS. This style can be seen in apps like iOS Camera Roll, Twitter Moments, Kylie Jenner’s app, and Vevo’s app.

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.