Tinder like React Native Card Stack Swiper

Tinder like React Native Card Stack Swiper

react-native-card-stack-swiper. Tinder like react-native card stack swiper

react-native-card-stack-swiper

Tinder like react-native card stack swiper

Installation

  npm install --save react-native-card-stack-swiper

Preview

App preview App preview2

import CardStack, { Card } from 'react-native-card-stack-swiper';
  <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>C</Text></Card>
  </CardStack>

CardStack

CardStack props

Props type description required default
style object container style {}
cardContainerStyle object cardContainerStyle style {}
secondCardZoom number second card zoom 0.95
duration number animation duration 300
initialIndex number initial card index 0
loop bool keep swiping indefinitely false
renderNoMoreCards func false
disableTopSwipe bool disable top swipe false
disableBottomSwipe bool disable bottom swipe false
disableLeftSwipe bool disable left swipe false
disableRightSwipe bool disable right swipe false
verticalSwipe bool enable/disable vertical swiping true
horizontalSwipe bool enable/disable horizont swiping true
verticalThreshold number vertical swipe threshold height/4
horizontalThreshold number horizontal swipe threshold width/2
outputRotationRange array rotation values for the x values ['-15deg', '0deg', '15deg']

CardStack events

Props type description
onSwipeStart func function to be called when a card swipe starts
onSwipeEnd func function to be called when a card swipe ends (card is released)
onSwiped func function to be called when a card is swiped. it receives the swiped card index
onSwipedLeft func function to be called when a card is swiped left. it receives the swiped card index
onSwipedRight func function to be called when a card is swiped right. it receives the swiped card index
onSwipedTop func function to be called when a card is swiped top. it receives the swiped card index
onSwipedBottom func function to be called when a card is swiped bottom. it receives the swiped card index
onSwipedAll async func function to be called when the last card is swiped. Could trig action to refresh cards
onSwipe func function to be called when a card is swiped. It receives the current x, and y coordinates

CardStack actions

Props type
swipeLeft func
swipeRight func
swipeBottom func
swipeTop func
goBackFromLeft func
goBackFromRight func
goBackFromBottom func
goBackFromTop func
  <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
  </CardStack>

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

Card

Card props

Props type description required default
style object container style {}

Card events

Props type description
onSwiped func function to be called when a card is swiped.
onSwipedLeft func function to be called when a card is swiped left.
onSwipedRight func function to be called when a card is swiped right.
onSwipedTop func function to be called when a card is swiped top.
onSwipedBottom func function to be called when a card is swiped bottom.

Download Details:

Author: lhandel

GitHub: https://github.com/lhandel/react-native-card-stack-swiper

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.