pacifio/animated-swipe

A react component for tinder like animated swiping

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