Tinder like animations swiper for React Native

Tinder like animations swiper for React Native

react-native-swiper-animated .Tinder like animations swiper for React Native

react-native-swiper-animated

Tinder like animations swiper for React Native.

Installation

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

Shots

Basic Stack Extended

In Action

Basic Stack Stack with default navigation

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}
  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)
swipeDirection right string Set to left to move to next card on left swipe

Custom

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

Pagination

Prop Default Type Description
showPagination true bool Set to false to disable pagination
paginationDotColor #C5C5C5 string In active pagination bullet color
paginationActiveDotColor #4D4D4E string Active pagination bullet color
showPaginationBelow false bool Set to true to render pagination below content
hidePaginationOnLast false bool Set to true to hide pagination on last card
renderPagination null func render custom pagination - calls func with (total, currentIndex)

Toolbar

Prop Default Type Description
showToolbar false bool Set to true to enable toolbar
toolbarLeft <View /> element RN Element
toolbarRight <View /> element RN Element
toolbarCenter <View /> element RN Element
toolbarStyle {...} style See default style in source.

Discover more

Methods

forceLeftSwipe()

Swiper to left

forceRightSwipe()

Swiper to right

jumpToIndex(index: number)

Jump to a particular index

Development

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

Download Details:

Author: chitezh

GitHub: https://github.com/chitezh/react-native-swiper-animated

react-native programming react

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics .Google Analytics for React Native! Compatible with react-native-ab.

Lifecycle hooks are not enough with React Navigation in React Native

Also use these events and API, provided by React Navigation library

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.