How to Create a Tinder-Like Card Stack Using React Native?

Usually, when developers need to implement non-trivial UI features like swipe cards, they go for the most obvious option — go on Google and find a ready-to-use package on npm.

From the business perspective, it’s a reasonable approach since it can save a lot of effort and speed-up the development process.

Yet, such out-of-the-box packages can limit or restrict certain aspects of the solution that might be crucial for your use case. For example, the library can be poorly maintained or it doesn’t meet one of the requirements.

Thus, such inconveniences can make developers opt for custom solution development for swipeable Tinder-like cards.

In this article, we’re going to show you that it’s not that hard or scary to build a custom package. As an example, we’re going to create a Tinder-like card stack view using React Native and the brand new React Native Reanimated 2 library and describe each step in detail.

The Starting Point

To begin with, let’s list the source code of utils we are going to need for the implementation in the future. Firstly, we’ll need a card item that will be used in the stack:

Here we have a static card layout with some simple content, which is good to start from. The next step is making it interactable by using React Native Reanimated library.

Gesture Handling

First of all, for creating Tinder-like swipe cards we need to link the card position to finger movement across the screen. In order to enable that, we will use a band of useAnimatedGestureHandler and PanGestureHandler. Also, useSharedValue and useAnimatedStyle might be worth attention — they’re used for storing an animation state & transforming it into component styling.

With the help of useDerivedValue hook, we can create rotation animated value, depending on current translation.

Let’s assume that the card is completely hidden when it’s translated to the width of two screens. Thus, in this position, the card will be rotated by 60 or -60 degrees respectively.

Now, we are ready to proceed to the next stage and implement stack logic.

Tinder-like Swipe Card Stack

Basically, stack implementation consists of two main features:

• Card swiping
• Next card appearing

Thus, there will be no more than two cards that are simultaneously displayed on the screen.

The simplest step here is to hide the card by swiping it away.

So, here we use an absolute alignment for the next item layout and place it right below the overlay card. The next item is also tied to the animated state of the currently displayed one — the more we drag the card to the side, the more opacity and scale of the following item increase.

There is also a little trick that makes the process a little smoother. We’d recommend paying attention to useEffect: we change the index of the next item only after the current index is set and animated back to its initial position. It’s required to make the substitution of the cards completely indistinguishable and avoid blinking during items rerendering.

Refactoring

And last but not least, we need to provide a way to receive a callback when the card is swiped to the right or left, so the Tinder-like logic could be applied to our stack component. Moreover, it might be a good idea to encapsulate all the stack logic inside a dedicated component with a clear interface and allow item customization.

Here is how the component usage will look after this minor refactoring: