React Native Tinder like cards

If you're looking to put some interaction into your apps, Jason Brown has assembled a nice tutorial showing how to accomplish a Tinder like card UI.

React-Native Tinder like cards

Intro

The test of all good frameworks is how easy it is to implement Tinder right? Well with react-native we do get the benefits of flex box as well as some transforms which we’ll take advantage of.

We don’t have access to an easy physics, even though they were added in IOS7. If you’d like physics you can use some JavaScript libraries like rebound https://github.com/facebook/rebound-js from Facebook, or any others that don’t require a DOM.

Concept

We’ll create a card. On touch press/grant we’ll figure out the offset of the card to the touch and start generating the transform to move/rotate the card.

Well use the style transform property which we can find documentation here https://facebook.github.io/react-native/docs/transforms.html#proptypes. However documentation is a little skimpy.

It’s mostly straight forward once you dive in though.

What we won’t do.

Physics. You can implement a bouncy spring system, but we’ll keep it simple with a drag concept.

Tinder like cards