https://github.com/around25/react-native-swipe-pager
https://github.com/around25/react-native-swipe-pager
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/around25/react-native-swipe-pager
- Owner: Around25
- Created: 2018-06-26T10:06:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-28T08:50:34.000Z (about 8 years ago)
- Last Synced: 2025-05-15T16:17:16.614Z (about 1 year ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @around25/react-native-swipe-pager
   
This component is a implementation of pager for React Native. It allows you to swipe between pages, turn on auto play, to set timeout for auto plat and so on.
- works on iOS and Android
### Features
- can render hundreds of pages
- set auto play
- lock swipe action
- set timeout for auto play
- render custom page indicator
- enable/disable loop
### Installation
```sh
$ npm i @around25/react-native-swipe-pager --save
```
### Options
| Option | iOS | Android | Description | Default | Options | Type
|:------:|:------:|:-------:|:----:|:-------------:|:--------:|:----:|
| `dataSource` | YES | YES | ***Required*** - Provide pages data | - | - | -
| `renderSwipePage` | YES | YES | Render page view | - | - | **{component}**
| `autoPlay` | YES | YES | If is set to `true`, pages will change automatically | ***false*** | *true*, *false* | **{boolean}**
| `initialPage` | YES | YES | The initial page to display. It requires the index of the page. | ***0*** | - | **{number}**
| `isLoop` | YES | YES | If is set to `true`, infinite swipe is enabled | ***false*** | *true*, *false* | **{boolean}**
| `locked` | YES | YES | If is set to `true`, swipe to change pages is disabled | ***false*** | *true*, *false* | **{boolean}**
| `renderPageIndicator` | YES | YES | If is set to `true`, indicator will hide. If is set to nothing, it will show the default indicator with dots. Custom component can be passed instead of `false` | - | *false*, ** | **{boolean/component}**
| `autoPlayTimeout` | YES | YES | Specify the timeout of auto play. | ***5000*** | - | **{number(miliseconds)}**
| `animation` | YES | YES | Pass custom function with animation, if not, the default animation will be applied. | - | - | **{function}**
### Methods
| Method | Description | Type
|:------:|:-----------:|:----:|
| `onSwipe` | Callback when the page is changed | ***{function}***
### Example
## App.js
```javascript
import React, { Component } from 'react';
import { Text, View, Animated, Easing } from 'react-native';
import RNSwipePager from '@around25/react-native-swipe-pager';
import styles from './styles';
export default class App extends Component {
constructor(props) {
let dataSource = new RNSwipePager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
super(props);
this.state = {
dataSource: dataSource.cloneWithPages([{name: 'Kidgarten'}, {name: 'Engage'}, {name: 'Around25'}, {name: 'CleverWash'}])
}
}
/**
* @description Function called when page is changed
* @param pageIndex
*/
onSwipe = (pageIndex) => {
// Do whatever you want
};
/**
* @description Render page with content
* @param data
* @return {XML}
*/
renderPage = (data) => {
return (
{data.name}
)
};
render() {
return (
);
}
}
```
## styles.js
```javascript
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
page: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
height: '100%',
width: '100%'
},
pager: {
flex: 1,
backgroundColor: 'red',
width: '100%',
height: '100%'
},
name: {
fontSize: 40
}
});
```
## An example with `animation`
``` javascript
{
let velocity = Math.abs(gestureState.vx);
let baseDuration = 300;
let duration = (velocity > 1) ? 1 / velocity * baseDuration : baseDuration;
return Animated.timing(animatedValue,
{
toValue: toValue,
duration: duration,
easing: Easing.out(Easing.exp),
bounce: 10
});
}}
onSwipe={this.onSwipe}
autoPlay={false}
/>
```
# License
MIT