Animated swipe
A react component for creating a tinder like swiping view . Created using the raw Animated, PanResponder
module . It has been tested accros different devices .
Example
Please take a look at this video for an example
Table of contents
Installation
npm install --save animated-swipeORyarn add animated-swipe
Usage
;;; const Card = { return <View> <Text>propstitle</Text> <Image source= uri: propsimage /> </View> ;}; const data = id: "212dw3232dqs32" title: "title 1" image: "image1.jpg" id: "43sd3324fdsf34" title: "title 2" image: "image2.jpg" id: "1298avsdfdf193" title: "title 1" image: "image3.jpg" ; Component { return <View> <Swipe data=data renderItem= { return <Card key=itemid title=itemtitle image=itemimage />; } /> </View> ; } ;
Props
Props | Type | isRequired | Description |
---|---|---|---|
data | array | true | An array of data for iteration |
onSwipeRight | function | false | Called when the item is swiped right |
onSwipeLeft | function | false | Called when the item is swiped left |
renderOnEnd | function / react component | false | Render jsx when data array ends |
renderItem | function / react component | true | Render jsx per array item , the item is passed via parameter |
onEnd | function | false | Called when data array ends |
Created by Adib Mohsin