react-native-parallax-swiper
Version:
Full Screen Parallax Swiper Allowing Arbitrary UI Injection
234 lines (199 loc) • 11.9 kB
Markdown
[](https://www.npmjs.com/package/react-native-parallax-swiper)
[](https://www.npmjs.com/package/react-native-parallax-swiper)
[](https://github.com/prettier/prettier)
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.
<img alt="React Native Parallax Swiper Expo QR code" src="images/QR-code.png" width="160px"/>
Check out the GIF examples above via [Expo](https://expo.io/@zachgibson/ParallaxSwiperExample). Or clone this repo and:
```shell
$ cd examples/ParallaxSwiperExample
$ npm install
$ react-native link
$ react-native run-ios
```
```shell
$ npm install react-native-parallax-swiper --save
```
```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 (
<ParallaxSwiper
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"
>
<ParallaxSwiperPage
BackgroundComponent={
<Image
style={styles.backgroundImage}
source={{ uri: "https://goo.gl/wtHtxG" }}
/>
}
ForegroundComponent={
<View style={styles.foregroundTextContainer}>
<Animated.Text
style={[styles.foregroundText, this.getPageTransformStyle(0)]}
>
Page 1
</Animated.Text>
</View>
}
/>
<ParallaxSwiperPage
BackgroundComponent={
<Image
style={styles.backgroundImage}
source={{ uri: "https://goo.gl/gt4rWa" }}
/>
}
ForegroundComponent={
<View style={styles.foregroundTextContainer}>
<Animated.Text
style={[styles.foregroundText, this.getPageTransformStyle(1)]}
>
Page 2
</Animated.Text>
</View>
}
/>
<ParallaxSwiperPage
BackgroundComponent={
<Image
style={styles.backgroundImage}
source={{ uri: "https://goo.gl/KAaVXt" }}
/>
}
ForegroundComponent={
<View style={styles.foregroundTextContainer}>
<Animated.Text
style={[styles.foregroundText, this.getPageTransformStyle(2)]}
>
Page 3
</Animated.Text>
</View>
}
/>
</ParallaxSwiper>
);
}
}
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"
}
});
```
| 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](http://facebook.github.io/react-native/releases/0.47/docs/scrollview.html#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](http://facebook.github.io/react-native/releases/0.48/docs/scrollview.html) 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](https://goo.gl/GY3bFQ), [Twitter Moments](https://goo.gl/CvzCQA), [Kylie Jenner’s app](https://goo.gl/yDB69S), [Vevo’s app](https://goo.gl/FMSSeF), and more.
| [<img src="https://avatars0.githubusercontent.com/u/2807897?v=4&s=460" width="80px;"/><br /><sub>Chris LeBlanc</sub>](https://github.com/LeBlaaanc)<br />[💻] |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------: |
Hit me up on [Twitter](https://twitter.com/zacharykeith_), or create an [issue](https://github.com/zachgibson/react-native-parallax-swiper/issues).
Copyright (c) 2017 [Zachary Gibson](http://zachgibsondesign.com/) Licensed under the MIT license.