rn-animated-swiper

react-native-animated-swiper

Animated swiper for React Native.

Installation

$ npm i rn-animated-swiper --save

Example

Usage

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
} from 'react-native';

import PropTypes from 'prop-types';
import AnimatedSwiper from 'rn-animated-swiper';


const styles = StyleSheet.create({
  card: {
    width: 300,
    height: 450,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: 'white',
    fontSize: 30
  }
});

export default () => (
  <AnimatedSwiper
    currentPageRotate={['90deg', '0deg', '-90deg']}
    nextPageRotate={['-70deg', '0deg', '70deg']}
    dragOffsetForTransparency={300}
    swipebleWidth={300}
    swipebleHeight={450}
    nextPageAnimationDuration={300}
    containerStyle={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'pink',
    }}
  >
    {[
      <View style={[styles.card, { backgroundColor: 'blue' }]}><Text style={styles.text}>Hello</Text></View>, 
      <View style={[styles.card, { backgroundColor: 'red' }]}><Text style={styles.text}>React Native</Text></View>,
      <View style={[styles.card, { backgroundColor: 'purple' }]}><Text style={styles.text}>Awesome</Text></View>
    ]}
  </AnimatedSwiper>
)

Properties

Prop	Default	Type	Description
currentPageRotate	['0deg', '0deg', '0deg']	array	Left/Right swipe interpolate offset rotate for current page
nextPageRotate	['0deg', '0deg', '0deg']	array	Left/Right swipe interpolate offset rotate for next page
dragOffsetForTransparency	screenWidth	number	Swipe offset for transparency
swipebleWidth	screenWidth	number	Width where can start swipe (from center screen)
swipebleHeight	screenHeight	number	Height where can start swipe (from center screen)
nextPageAnimationDuration	500	number	How long will the animation continue on the next screen
containerStyle	{flex: 1, justifyContent: 'center', alignItems: 'center', }	object	Style for wrapper