react-native-parallax-swiper

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

React Native Parallax Swiper

Configurable parallax swiper that uses Native Driver for super smooth parallax.

Wait, another parallax component?

Yeah, another parallax component, cause you know parallaxers are lit and stuff right? Nah, 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. You can see this pattern in apps like iOS Camera Roll, Twitter Moments, Kylie Jenner’s app, and the Vevo app.

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.

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
• 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? 🤔

Questions or suggestions?

Hit me up on Twitter, or create an issue.

Copyright

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