0

What approach should I use to make each cards swipe either right/left as tinder? My cards are in listview.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.

Cards UI is in listview Swiping of cards left/right The imports :

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 }) => (
      <Image
        source={require('./video.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

Function displaying users:

  displayImages(users){
    var {navigate} = this.props.navigation;
    return(  
    <View style={styles.container}>       
        <Content style={{paddingTop: 20, borderWidth: 0, shadowOpacity: 0,
                        shadowOffset: {
                          height: 0,
                          width:0
                        },
                        shadowRadius: 0,}}>
          <Card style={{borderWidth: 0}} transparent>
            <CardItem style={{height: 48,borderWidth:0,}}>
              <Left>
                <Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} />
                <Body>
                  <Text style={styles.uploaderName}>{users.name}</Text>
                </Body>
              </Left>
              <Right>
                <Image
                  source={require('./follow.png')}
                  style={{height: 23, width: 42}}
                />
              </Right>
            </CardItem>
            <CardItem cardBody>
              <Image source={{uri: users.image}} style={{height: 322, width: null, flex: 1}}/>
            </CardItem>
            <CardItem style={{height: 48,borderWidth:0,}}>
              <Left>  
                <TouchableOpacity onPress = { () => navigate ("profile", {}) }>               
                  <Icon style={{color:'#f00039'}} name={'md-heart'} size={20}/>
                </TouchableOpacity>
                <Text style={{marginLeft:2}}>46</Text>
                <Image
                    source={require('./sharePost.png')}
                    style={{height: 20, width: 25, marginLeft: 15}}
                />
              </Left>
              <Body>
                <Button transparent>

                </Button>
              </Body>
              <Right>

              </Right>
            </CardItem>
          </Card>
        </Content> 
       </View>      
    );
  }

The render method:

  render() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => 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',
      },
    ];

The view component:

    var cloneUsers = ds.cloneWithRows(users);

    return (  
    <View style={{flex: 1}}>    
        <ListView
          style={styles.listView}
          dataSource={cloneUsers}
          renderRow={this.displayImages.bind(this)}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
        />     

        </View>

    );  
  }
}

This is the styling:

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    paddingHorizontal : 25,    
  },
  uploaderName:{
    fontSize: 16,
    color: '#36292a'
  }


});
Milo
  • 3,365
  • 9
  • 30
  • 44
Kamlesh Tilwani
  • 59
  • 1
  • 2
  • 16

2 Answers2

0

In React I used HammerJS to do this.

ReactNative has a built in library called PanResponder. There are examples out there.

Jared
  • 100
  • 8
0

To make a swipe deck like Tinder in react-native you can use a library called react-native-swipe-decker. It's a pretty straightforward library, there's a stack of cards and there are actions like onSwipedLeft onSwipedRight onSwipedAll. You can define functions for each of them if you wish to customize. By default all the card contents need to be in an array and no matter which direction you swipe you move to the next card. You can also add infinite loop to it. You can have a look at the GitHub repository for the project and check out their example.

Nirmal Dalmia
  • 317
  • 3
  • 12