How We built React Native Card Swiper for NativeBase

Recently we needed a card swiper component for one of our React Native app we’re working on. Specifically, animated swipeable cards like the ones in Tinder.

We found react-native-animated-demo-tinder which was started by Brent Vatne built for similar user cases. And built the component entirely around his code. So a big thanks to him. However, we found it lacks customizability and didn’t exhibit the exact behaviour we were looking for.

The code for this demo can be found here and it’s 100% free for use and reproduction. The swipper component is a part of NativeBase UI library.

Basically our requirements were:

• Allow swipeable cards, or any other react-native component.
• Have smooth card animations without frame drops.
• Allow for fully customizable content and styles.

So how did we go about doing it?

Set the order of the cards:

By default, we have two cards stacked one over the other, ideally when the top card is swiped, then the card below should scale up and zoom into it’s natural size.

Handling the Gestures:

Using the PanResponder handlers we needed to map the movement of the swipe to the position of the current element as well as the scale and opacity of the bottom element. Thankfully the Animated API of react-native provides us the options to configure just anything.

So we figured out a multiplier using which we could achieve near perfect zoom effect in relation to the swipe distance.

Firing the .onSwipeRight() and .onSwipeLeft() events:

To check this we tracked the gesture velocity as well as the direction (for left and right swipes). Also we made sure that the card moved back to it’s original position if the velocity threshold wasn’t met.

This component is a part of our bigger project at NativeBase where we build more such components to make React-Native development easier.

This is still under progress and we’re planning on making it much more smoother and configurable. Feel free to send PR’s!

Please share and recommend if you like the article.

Authors: Sanket, Sankhadeep from GeekyAnts.