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.
* Progress Bar. Horizontal or vertical progress bar.

!Twitter Moments Demo
!Vevo Demo
!Lightbox Demo

Examples

Check out the GIF examples above via Expo. Or clone this repo and:

``shell
$ cd examples/ParallaxSwiperExample
$ npm install
$ react-native link
$ react-native run-ios
`

Installation

`shell
$ npm install react-native-parallax-swiper --save
`

Usage

`JSX
import React from "react";
import {
Animated,
Text,
View,
Image,
StyleSheet,
Dimensions
} from "react-native";

import {
ParallaxSwiper,
ParallaxSwiperPage
} from "react-native-parallax-swiper";

const { width, height } = Dimensions.get("window");

export default class App extends React.Component {
myCustomAnimatedValue = new Animated.Value(0);

getPageTransformStyle = index => ({
transform: [
{
scale: this.myCustomAnimatedValue.interpolate({
inputRange: [
(index - 1) * (width + 8), // Add 8 for dividerWidth
index * (width + 8),
(index + 1) * (width + 8)
],
outputRange: [0, 1, 0],
extrapolate: "clamp"
})
},
{
rotate: this.myCustomAnimatedValue.interpolate({
inputRange: [
(index - 1) * (width + 8),
index * (width + 8),
(index + 1) * (width + 8)
],
outputRange: ["180deg", "0deg", "-180deg"],
extrapolate: "clamp"
})
}
]
});

render() {
return (
speed={0.5}
animatedValue={this.myCustomAnimatedValue}
dividerWidth={8}
dividerColor="black"
backgroundColor="black"
onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
showProgressBar={true}
progressBarBackgroundColor="rgba(0,0,0,0.25)"
progressBarValueBackgroundColor="white"
>
BackgroundComponent={
style={styles.backgroundImage}
source={{ uri: "https://goo.gl/wtHtxG" }}
/>
}
ForegroundComponent={

style={[styles.foregroundText, this.getPageTransformStyle(0)]}
>
Page 1


}
/>
BackgroundComponent={
style={styles.backgroundImage}
source={{ uri: "https://goo.gl/gt4rWa" }}
/>
}
ForegroundComponent={

style={[styles.foregroundText, this.getPageTransformStyle(1)]}
>
Page 2


}
/>
BackgroundComponent={
style={styles.backgroundImage}
source={{ uri: "https://goo.gl/KAaVXt" }}
/>
}
ForegroundComponent={

style={[styles.foregroundText, this.getPageTransformStyle(2)]}
>
Page 3


}
/>

);
}
}

const styles = StyleSheet.create({
backgroundImage: {
width,
height
},
foregroundTextContainer: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "transparent"
},
foregroundText: {
fontSize: 34,
fontWeight: "700",
letterSpacing: 0.41,
color: "white"
}
});
`

ParallaxSwiper Props

| Prop | Type | Default | Description |
| ------------------------------------- | -------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| speed | _Number_ | 0.25 | This number determines how fast BackgroundComponent moves. Set to 0 for no movement at all, set to 1 and background will move as fast as the scroll. |
| dividerWidth | _Number_ | 8 | The width of the divider between each page. (horizontal only) |
| dividerColor | _String_ | black | Color of divider. |
| backgroundColor | _String_ | black | ParallaxSwiper’s background color. |
| scrollToIndex | _Number_ | 0 | Scroll to page with a smooth animation. _Note_: You need to use state if you want to change index any other time than when component is rendered. |
| onMomentumScrollEnd | _Function_ | N/A | Fired when ScrollView stops scrolling and is passed the current page index. |
| animatedValue | _Number (Animated.Value)_ | 0 | Optionally pass a new instance of Animated.Value to access the animated value outside of ParallaxSwiper. |
| 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. |
| 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. |
| children | _React component (ParallaxSwiperPage)_ | N/A | Each top-level ParallaxSwiperPage child. |
| showProgressBar | _Boolean_ | false | When true, a progress bar will render on bottom for horizontal and left on vertical. |
| progressBarThickness | _Number_ | 4 | Thickness translates to height for horizontal and width for vertical progress bar. |
| progressBarBackgroundColor | _String_ | rgba(255,255,255,0.25) | Background color of progress bar background. |
| progressBarValueBackgroundColor | _String_ | white | Background color of progress bar value background. |

ParallaxSwiperPage Props

| Prop | Type | Default | Description |
| ------------------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------- |
| BackgroundComponent | _React element_ | N/A | This component will render in the background of the page and will be animated based on scroll. |
| ForegroundComponent | _React element_ | N/A` | This component will render in the foreground of the page. |

TODO

* [x] Create Expo demos
* [x] Create examples
* [x] Expose current index
* [x] Support scrollToIndex
* [x] Fix Android
* [x] Expose Animated.Value for animation outside of ParallaxSwiper
* [ ] Add drag effects e.g. zoom, blur, darken
* [ ] Expose rest of ScrollView props
* [ ] Use FlatList instead of ScrollView

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.