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
• Usage
• Props

Installation

npm install --save animated-swipe
OR
yarn add animated-swipe

Usage

import React from "react";
import { View, Text, Image } from "react-native";
import Swipe from "animated-swipe";

const Card = props => {
  return (
    <View>
      <Text>{props.title}</Text>
      <Image source={{ uri: props.image }} />
    </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"
  }
];

class App extends React.Component {
  render() {
    return (
      <View>
        <Swipe
          data={data}
          renderItem={item => {
            return <Card key={item.id} title={item.title} image={item.image} />;
          }}
        />
      </View>
    );
  }
}

export default App;

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