title: What Approach should I use to make each cards swipe either right/left as tinder?React Native?
body: <p>What approach should I use to make each cards swipe either right/left as tinder?
  My cards are in <code>listview</code>.Once I swipe any card right or left it should vanish off and the next stacked card should come up at that place? In React Native.     </p>
  
  <p><a href="https://i.stack.imgur.com/HZTIm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZTIm.jpg" alt="Cards UI is in listview"></a>
  <a href="https://i.stack.imgur.com/PKdfk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PKdfk.png" alt="Swiping of cards left/right"></a>
  The imports :</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Platform,
    StyleSheet,
    Text,
    View,Image,ListView,TouchableOpacity
  } from 'react-native';
  import Icon from 'react-native-vector-icons/Ionicons';
  import { TabNavigator, StackNavigator } from 'react-navigation';
  import { Col, Row, Grid } from 'react-native-easy-grid';
  import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right } from 'native-base';
  const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
      'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
      'Shake or press menu button for dev menu',
  });
  
  export default class Scenes extends Component{
  
    static navigationOptions = {
    tabBarLabel: 'Scenes',
    tabBarIcon: ({ tintColor }) =&gt; (
        &lt;Image
          source={require('./video.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        /&gt;
      ),
    };
  </code></pre>
  
  <p>Function displaying users:</p>
  
  <pre><code>  displayImages(users){
      var {navigate} = this.props.navigation;
      return(  
      &lt;View style={styles.container}&gt;       
          &lt;Content style={{paddingTop: 20, borderWidth: 0, shadowOpacity: 0,
                          shadowOffset: {
                            height: 0,
                            width:0
                          },
                          shadowRadius: 0,}}&gt;
            &lt;Card style={{borderWidth: 0}} transparent&gt;
              &lt;CardItem style={{height: 48,borderWidth:0,}}&gt;
                &lt;Left&gt;
                  &lt;Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} /&gt;
                  &lt;Body&gt;
                    &lt;Text style={styles.uploaderName}&gt;{users.name}&lt;/Text&gt;
                  &lt;/Body&gt;
                &lt;/Left&gt;
                &lt;Right&gt;
                  &lt;Image
                    source={require('./follow.png')}
                    style={{height: 23, width: 42}}
                  /&gt;
                &lt;/Right&gt;
              &lt;/CardItem&gt;
              &lt;CardItem cardBody&gt;
                &lt;Image source={{uri: users.image}} style={{height: 322, width: null, flex: 1}}/&gt;
              &lt;/CardItem&gt;
              &lt;CardItem style={{height: 48,borderWidth:0,}}&gt;
                &lt;Left&gt;  
                  &lt;TouchableOpacity onPress = { () =&gt; navigate ("profile", {}) }&gt;               
                    &lt;Icon style={{color:'#f00039'}} name={'md-heart'} size={20}/&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;Text style={{marginLeft:2}}&gt;46&lt;/Text&gt;
                  &lt;Image
                      source={require('./sharePost.png')}
                      style={{height: 20, width: 25, marginLeft: 15}}
                  /&gt;
                &lt;/Left&gt;
                &lt;Body&gt;
                  &lt;Button transparent&gt;
  
                  &lt;/Button&gt;
                &lt;/Body&gt;
                &lt;Right&gt;
  
                &lt;/Right&gt;
              &lt;/CardItem&gt;
            &lt;/Card&gt;
          &lt;/Content&gt; 
         &lt;/View&gt;      
      );
    }
  </code></pre>
  
  <p>The render method:</p>
  
  <pre><code>  render() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
      var users = [
        {
          name: 'Amy Farha',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
          image: 'https://i.pinimg.com/564x/1c/f3/05/1cf305362aed02ad559f989687b1460e.jpg',
        },
        {
          name: 'Chris Jackson',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
          image: 'https://i.pinimg.com/236x/a8/37/8e/a8378eeb01ec788a0068ea6b1b759091.jpg',
        },
        {
          name: 'Amanda Martin',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
          image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
        },
        {
          name: 'Amy Farha',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
          image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
        },
        {
          name: 'Chris Jackson',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
          image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
        },
        {
          name: 'Amanda Martin',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
          image: 'https://i.pinimg.com/564x/58/0c/78/580c789ded6ceeafdf71b792b0d57ac6.jpg',
        },
        {
          name: 'Amy Farha',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
          image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
        },
        {
          name: 'Chris Jackson',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
          image: 'https://i.pinimg.com/564x/47/6b/5c/476b5c4c9725ff3cd4bb3e5f61e4d6c3.jpg',
        },
        {
          name: 'Amanda Martin',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
          image: 'https://i.pinimg.com/564x/ad/4b/06/ad4b06523eefacc30d09d41a9992029f.jpg',
        },
        {
          name: 'Christy Thomas',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
          image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
        },
        {
          name: 'Melissa Jones',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
          image: 'https://i.pinimg.com/564x/82/ac/2e/82ac2e1c86692090173666496b9ce1cf.jpg',
        },
        {
          name: 'Amanda Martin',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
          image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
        },
        {
          name: 'Christy Thomas',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
          image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
        },
        {
          name: 'Melissa Jones',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
          image: 'https://i.pinimg.com/564x/ae/b6/ac/aeb6ac2f05644f1464c298bf979630e9.jpg',
        },
        {
          name: 'Christy Thomas',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
          image: 'https://i.pinimg.com/564x/57/ac/3e/57ac3e724c61f9b9803d520574e42a1e.jpg',
        },
        {
          name: 'Melissa Jones',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
          image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
        },
      ];
  </code></pre>
  
  <p>The view component:</p>
  
  <pre><code>    var cloneUsers = ds.cloneWithRows(users);
  
      return (  
      &lt;View style={{flex: 1}}&gt;    
          &lt;ListView
            style={styles.listView}
            dataSource={cloneUsers}
            renderRow={this.displayImages.bind(this)}
            renderSeparator={(sectionId, rowId) =&gt; &lt;View key={rowId} style={styles.separator} /&gt;}
          /&gt;     
  
          &lt;/View&gt;
  
      );  
    }
  }
  </code></pre>
  
  <p>This is the styling:</p>
  
  <pre><code>const styles = StyleSheet.create({
    icon: {
      width: 26,
      height: 26,
    },
    container: {
      flex: 1,
      backgroundColor: '#F5F5F5',
      paddingHorizontal : 25,    
    },
    uploaderName:{
      fontSize: 16,
      color: '#36292a'
    }
  
  
  });
  </code></pre>