@around25/react-native-swipe-pager

1.0.2 • Public • Published

@around25/react-native-swipe-pager

npm npm npm npm

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

Package Sidebar

Install

npm i @around25/react-native-swipe-pager

Weekly Downloads

48

Version

1.0.2

License

ISC

Unpacked Size

383 MB

Total Files

7203

Last publish

Collaborators

  • biancap
  • adrian.boros
  • gabicg
  • daniel.suciu.developer
  • cupsadarius
  • calintamas
  • cosminharangus