rnr
react-native-realistic-deck-swiper
npm i react-native-realistic-deck-swiper
rnr

react-native-realistic-deck-swiper

deck swiper with realistic physics. Imitates "NYer Today" app's cartoon deck swiper.

by Alec

0.1.3 (see all)License:MITTypeScript:Not Found
npm i react-native-realistic-deck-swiper
Readme

React-Native-Realistic-Deck-Swiper

Swipeable deck with realistic physics, based on NYer Today app's cartoons swipe deck. See a write up of how this library works!

Demo

Change Log

v0.1.3 Allow touchables composed within cards, fix android undefined rotation transform

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation and Usage

npm i react-native-realistic-deck-swiper
import React from 'react'
import { View, Text } from 'react-native'
import Swiper from 'react-native-realistic-deck-swiper'

const Data = [
  { id: "1" },
  { id: "2" },
  { id: "3" },
  { id: "4" },
  { id: "5" },
]
export default class App extends React.Component {
  _renderCard = (item) => {
    return <View style={{
      width: 300,
      height: 400,
      borderRadius: 5,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <Text style={{ fontSize: 80 }}>{item.id}</Text>
    </View>
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Swiper
          cardsData={Data}
          renderCard={this._renderCard}
          containerStyle={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}
          style={{
            margin: 20,
            backgroundColor: 'white',
            borderColor: 'black',
            borderWidth: 1,
            borderRadius: 5,
          }}
        />
      </View>
    );
  }
}

Deck and Card Props

Propsrequiredtypedescriptiondefault
cardsDatarequiredarraydata array
renderCardrequiredfunctionrender function, receives cardsData element
deckSizeoptionalintegernumber of cards rendered and visible at a time3
offsetAngleMinoptionalintegerminimum vertical angle offset of cards in degrees-4
offsetAngleMaxoptionalintegermaximum vertical angle offset of cards in degrees4
infiniteSwipeoptionalbooleanrenderCard cycles through cardsData infinitelytrue
startIndexoptionalintegercardsData index for first card0
velocityThresholdoptionalpositive numbervelocity magnitude - compared to gesture velocity magnitude at release to determine successful or unsuccessful swipe0.4

Animation Props

Propsrequiredtypedescriptiondefault
rotationMultiplieroptionalpositive numbermultiplier to rotational animation input range, > 1 will slow down rotation animation, < 1 will speed up1
topCardAnimationDurationoptionalpositive numbermilisecond duration of top card animation after successful swipe (flying away)1000
bottomCardAnimationDurationoptionalpositive numbermilisecond duration of bottom card animation500
springConstantsoptionalobjectcontrol reset animation on unsuccessful swipe, object signature: { stiffness, damping, mass }{stiffness: 50, damping: 30, mass: 0.5}

Callbacks Props

Propsrequiredtypedescriptiondefault
onSwipeStartoptionalfunctioncallback function to be called on successful card swipe, with current index
onSwipedoptionalfunctioncallback function to be called after successful card swipe, with velocity vector object {vx, vy}
onSwipedAlloptionalfunctioncallback function to be called after successful last card swipe regardless of infiniteSwipe prop
onResetoptionalfunctioncallback function to be called on unsuccessful card swipe, with velocity vector object {vx, vy}

Card Style Props

*style objects can be modified but default properties cannot be changed

Propsrequiredtypedescriptiondefault
styleoptionalobjectcard style object
containerStyleoptionalobjectSwiper container view style object{position: absolute*, transform: []*, zIndex: number*}

Author

Anh Vo

License

This project is licensed under the MIT License.

Acknowledgments

Downloads/wk

7

GitHub Stars

51

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
0.1.3
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate