React Native Swiping Cards
Installation
npm install --save react-native-swiping-cards or using yarn yarn add react-native-swiping-cards
Simple Usage
class App extends Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Card
onSwipeRight={() => true}
onSwipeLeft={() => true}
onSwipeCenter={() => true}
onRelease={() => true}
onRightAnimationEnd={() => true}
onLeftAnimationEnd={() => true}
onCenterAnimationEnd={() => true}
onReleaseAnimationEnd={() => true}
>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Image source={{uri: "https://source.unsplash.com/random"}} />
</View>
</Card>
</View>
);
}
}See example app for more complex example.
Props
If no callback or animation end function is passed, the event won't be triggered and card will return to it's position
| Name | Type | Description |
|---|---|---|
| onSwipeRight | function(){} |
called immediately as right swipe event is done |
| onRightAnimationEnd | function(){} |
called when animation of right swipe event is finished |
| onSwipeLeft | function(){} |
called immediately as left swipe event is done |
| onLeftAnimationEnd | function(){} |
called when animation of left swipe event is finished |
| onSwipeCenter | function(){} |
called immediately as center swipe event is done |
| onCenterAnimationEnd | function(){} |
called when animation of center swipe event is finished |
| onRelease | function(){} |
called if swipe length is less and none of the events above was called |
| onReleaseAnimationEnd | function(){} |
called when animation of release event is finished |
| swipeLength | Number |
length of the swipe to trigger events, default: device width / 5 |