react-native-swiper-animated

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
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