Tinder Style Swipe Cards Optimization in Ionic Last update: 2015-02-04

Tinder Styled cards have become very popular in the last time due to the success of the Tinder app. In a recent article on Nic’s Blog I explained how to make Tinder style swipe Cards with Ionic. Due to some feedback are here some things you experienced or wanted to know regarding the use of Tinder Cards.

Using a REST API to grab some live data

One Question was “Do you have any examples of cards pulling from live data?”, and the easiest answer you can go with is: randomuser.me for dummy JSON response data.

For example you can call http://api.randomuser.me/?results=5 for a very simple JSON response with 5 user objects. Inside your app.js you could then fill your cards array like this:

$scope.cards = [];

$scope.addCard = function(img, name) {
	var newCard = {image: img, title: name};
	newCard.id = Math.random();
	$scope.cards.unshift(angular.extend({}, newCard));
};

$scope.addCards = function(count) {
  $http.get('http://api.randomuser.me/?results=' + count).then(function(value) {
	angular.forEach(value.data.results, function (v) {
	  $scope.addCard(v.user.picture.medium, v.user.email);
	});
  });
};

$scope.addCards(5);

And to automatically reload cards once destroyed, change your cardDestroyed() function to adding always a new card:

$scope.cardDestroyed = function(index) {
    $scope.cards.splice(index, 1);
    $scope.addCards(1);
};

If you have more questions about how to get live data, just leave me a comment.

Swipe Events not getting called on Tinder Card

The next problem was a bit tricky, though I sometimes felt like I already had the same. For reasons, the cardSwipedRight and cardSwipedLeft events don’t get called always. You can reproduce this problem when not swiping the cards out but dragging them to the side slowly.

The problem would be to determine now to which side the card was pulled if you rely on that event. The solution is rather simple:

As I inspected the tinder card directive on Github, I saw that it has some more functions we can receive callbacks from:

onSwipeLeft: '&',
onSwipeRight: '&',
onTransitionLeft: '&',
onTransitionRight: '&',
onTransitionOut: '&',
onPartialSwipe: '&',
onSnapBack: '&',
onDestroy: '&'

So there are transition events for left and right and also just out (if you only need the remove event). To make use of these, you have to modify your index.html like this:

<td-card id="td-card" ng-repeat="card in cards"
on-transition-left="transitionLeft(card)"
on-transition-right="transitionRight(card)"
on-transition-out="transitionOut(card)"
on-destroy="cardDestroyed($index)"
on-swipe-left="cardSwipedLeft($index)"
on-swipe-right="cardSwipedRight($index)"
on-partial-swipe="cardPartialSwipe(amt)">

Now you will receive a callback even when the card was just dragged out. You just need to add these functions to your app.js(or the ones you would like to get informed about):

$scope.transitionOut = function(card) {
  console.log('card transition out');
};

$scope.transitionRight = function(card) {
  console.log('card removed to the right');
  console.log(card);

};
$scope.transitionLeft = function(card) {
  console.log('card removed to the left');
  console.log(card);
};

Moreover the question contained how to set a custom value of the tinder style card. There is no problem, if you have card objects like this

{ image: 'img/pic2.webp', title: 'So much grass', myValue: false}

you can then easily set the value in the above functions by calling card.myValue = true.

If you have any more questions about tinder styled cards or a related topic, just leave me a comment or contact me @schlimmson via Twitter!