Package Exports

react-native-swiper-animated

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-swiper-animated) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-swiper-animated

Tinder like animations swiper for React Native

Installation

$ npm i react-native-swiper-animated --save

Shots

Basic, Stack and Extended examples shots

Basic Usage

import React from 'react';
import {
  Text,
  View,
} from 'react-native';
import Swiper from 'react-native-swiper-animated';

const styles = {
  wrapper: {
    backgroundColor: '#009688',
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e91e63',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#673ab7',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3f51b5',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
};

export default () => <Swiper
  style={styles.wrapper}
  paginationStyle={{ container: { backgroundColor: 'transparent' } }}
  paginationLeft={''}
  paginationRight={''}
  smoothTransition
  loop
>
  <View style={styles.slide1}>
    <Text style={styles.text}>Hello Swiper</Text>
  </View>
  <View style={styles.slide2}>
    <Text style={styles.text}>Beautiful</Text>
  </View>
  <View style={styles.slide3}>
    <Text style={styles.text}>And simple</Text>
  </View>
</Swiper>;

Examples

$ cd examples
$ npm i
$ react-native run-android

Quick start with examples.

Properties

Basic

Prop	Default	Type	Description
smoothTransition	false	`bool`	If `true`, Swiper will only transit with minimal animations
loop	true	`bool`	Set to `false` to disable continuous loop mode.
index	0	`number`	Index number of initial slide.
stack	false	`bool`	Set to `true` to stack views
swiper	true	`bool`	Set to `false` to disable swiper (used when navigating using methods only)

Custom basic style & content

Prop	Default	Type	Description
style	{...}	`style`	See default style in source.
swiperThreshold	120	`number`	Used to set swiper distance before transition
backPressToBack	true	`bool`	Set to `false` to disable previous card nagivation on back press
stackOffsetY	3	`number`	Set vertical offset
stackDepth	5	`number`	Set number of cards to display in card stack
scaleOthers	true	`bool`	Set to `false` to disable scaling of cards below the top card
see more

Methods

forceLeftSwipe()

Swiper to left

forceRightSwipe()

Swiper to right

Development

$ cd examples
$ npm i
$ npm run watch
$ react-native run-android

Contribution

@chitezh The main author.

Questions

Feel free to contact me or create an issue

Inspired by leecade/Swiper and Tinder swiper by @brentvatne