Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zachgibson/react-native-parallax-swiper
Paged Parallax Swiper with Effects
https://github.com/zachgibson/react-native-parallax-swiper
Last synced: 5 days ago
JSON representation
Paged Parallax Swiper with Effects
- Host: GitHub
- URL: https://github.com/zachgibson/react-native-parallax-swiper
- Owner: zachgibson
- License: mit
- Created: 2017-07-06T13:41:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-07T19:11:23.000Z (over 4 years ago)
- Last Synced: 2024-12-03T18:55:44.771Z (9 days ago)
- Language: JavaScript
- Homepage:
- Size: 19 MB
- Stars: 623
- Watchers: 12
- Forks: 76
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-parallax-swiper ★315 - Configurable parallax swiper based on an iOS pattern. Uses Native Driver for super smooth parallax. (Components / UI)
- awesome-reactnative-ui - react-native-parallax-swiper - images.githubusercontent.com/10658888/30244667-636cfc0e-9588-11e7-9805-3a0c5649ab4b.gif)| (Others)
- awesome-react-native - react-native-parallax-swiper ★315 - Configurable parallax swiper based on an iOS pattern. Uses Native Driver for super smooth parallax. (Components / UI)
- awesome-react-native - react-native-parallax-swiper ★315 - Configurable parallax swiper based on an iOS pattern. Uses Native Driver for super smooth parallax. (Components / UI)
- awesome-reactnative-ui - react-native-parallax-swiper - images.githubusercontent.com/10658888/30244667-636cfc0e-9588-11e7-9805-3a0c5649ab4b.gif)| (Others)
- awesome-react-native - react-native-parallax-swiper ★315 - Configurable parallax swiper based on an iOS pattern. Uses Native Driver for super smooth parallax. (Components / UI)
README
# React Native Parallax Swiper
[](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.** Share one `Animated.Value` between ParallaxSwiper and your own UI.
* **Performant.** Runs on the native thread for 60FPS with no latency.
* **Cross-platform.** Works on both iOS and Android.
* **Progress Bar.** Horizontal or vertical progress bar.
## Examples
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 (
console.log(activePageIndex)}
showProgressBar={true}
progressBarBackgroundColor="rgba(0,0,0,0.25)"
progressBarValueBackgroundColor="white"
>
}
ForegroundComponent={
Page 1
}
/>
}
ForegroundComponent={
Page 2
}
/>
}
ForegroundComponent={
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](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.
## Contributors
| [
Chris LeBlanc](https://github.com/spacesuitdiver)
[💻] |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------: |
## Questions or suggestions?
Hit me up on [Twitter](https://twitter.com/zacharykeith_), or create an [issue](https://github.com/zachgibson/react-native-parallax-swiper/issues).
## Copyright
Copyright (c) 2017 [Zachary Gibson](http://zachgibsondesign.com/) Licensed under the MIT license.