@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

$ 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

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 (
      <View style={styles.page}>
        <Text style={styles.name}>{data.name}</Text>
      </View>
    )
  };
  
  render() {
    return (
      <View style={styles.container}>
        <RNSwipePager
          style={styles.pager}
          dataSource={this.state.dataSource}
          renderSwipePage={this.renderPage}
          renderPageIndicator={false}
          autoPlay={true}
          autoPlayTimeout={1000}
          locked={true}
          onSwipe={this.onSwipe}
        />
      </View>
    );
  }
}

styles.js

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

<RNSwipePager
          style={styles.pager}
          dataSource={this.state.dataSource}
          renderSwipePage={this.renderPage}
          isLoop={true}
          animation={(animatedValue, toValue, gestureState) => {
            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