react-native-parallax-swiper

This project is currently in beta and APIs are subject to change.

React Native Parallax Swiper

Configurable parallax swiper based on an iOS pattern. Uses Native Driver for super smooth parallax.

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.

You can see this effect in apps like:

• iOS Photos (Camera Roll)
• Twitter Moments
• Kylie Jenner app 😅
• Vevo app (older version)

Add it to your project

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

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.
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 examples
• Expose current index
• Expose ScrollView scrollTo Method
• 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? 🤔

Copyright

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