0.0.3 • Published 7 years ago

rn-animated-swiper v0.0.3

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

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

PropDefaultTypeDescription
currentPageRotate'0deg', '0deg', '0deg'arrayLeft/Right swipe interpolate offset rotate for current page
nextPageRotate'0deg', '0deg', '0deg'arrayLeft/Right swipe interpolate offset rotate for next page
dragOffsetForTransparencyscreenWidthnumberSwipe offset for transparency
swipebleWidthscreenWidthnumberWidth where can start swipe (from center screen)
swipebleHeightscreenHeightnumberHeight where can start swipe (from center screen)
nextPageAnimationDuration500numberHow long will the animation continue on the next screen
containerStyle{flex: 1, justifyContent: 'center', alignItems: 'center', }objectStyle for wrapper