https://github.com/pacifio/animated-swipe

A react component for tinder like animated swiping
https://github.com/pacifio/animated-swipe

react react-library react-native react-native-animation react-native-library tinder-swiper

Last synced: 3 months ago
JSON representation

A react component for tinder like animated swiping

• Host: GitHub
• URL: https://github.com/pacifio/animated-swipe
• Owner: pacifio
• License: mit
• Created: 2019-05-14T13:14:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-14T13:38:25.000Z (over 5 years ago)
• Last Synced: 2024-11-03T20:03:52.753Z (3 months ago)
• Topics: react, react-library, react-native, react-native-animation, react-native-library, tinder-swiper
• Language: JavaScript
• Size: 4.88 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://d3a1eqpdtt5fg4.cloudfront.net/items/1Y0q100U133W2q0d2i0A/example.mov) for an example

## Table of contents

- [Installation](#installation)

- [Usage](#usage)

- [Props](#props)

# Installation

```bash

npm install --save animated-swipe

OR

yarn add animated-swipe

```

# Usage

```javascript

import React from "react";

import { View, Text, Image } from "react-native";

import Swipe from "animated-swipe";

const Card = props => {

  return (

    

      {props.title}

      

    

  );

};

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 (

      

         {

            return ;

          }}

        />

      

    );

  }

}

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