react-native-parallax-swiper

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. |

Copyright

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