I'm looking to build a UI with stackable cards, something like:

Where there are a dynamic number of cards being the currently active card, and as the top card goes away, cards below is displayed. Very similar to Tinder's swipe-able experience.

I need to build this UI Component in my React web-app (not native). I found this library which looks very popular:

However this library does not appear to support stacking view, and showing all the views at an offset as seen below.

Does anyone know if it is possible to acplish what I'm looking for with react-swipeable-views or if there is a better library out there to acplish UIC as seen in the image?

I'm looking to build a UI with stackable cards, something like:

Where there are a dynamic number of cards being the currently active card, and as the top card goes away, cards below is displayed. Very similar to Tinder's swipe-able experience.

I need to build this UI Component in my React web-app (not native). I found this library which looks very popular:

https://github./oliviertassinari/react-swipeable-views

However this library does not appear to support stacking view, and showing all the views at an offset as seen below.

Does anyone know if it is possible to acplish what I'm looking for with react-swipeable-views or if there is a better library out there to acplish UIC as seen in the image?

• javascript
• reactjs
• react-swipeable-views

• Did you finf something? Lookin this as well – Sergey Kudryashov Commented Aug 2, 2018 at 12:13
• Also looking... – olisteadman Commented Feb 22, 2019 at 10:55
• Have a look at the last example on this page from the react-spring library which is similar to what you are looking. I hope it helps you! – reymon359 Commented Jun 18, 2020 at 14:34

3 Answers 3

You could use the react-spring library to achieve this. Here is an example of that behavior implemented.

I hope it helps you!

you can check the recent react-native-reanimated-carousel. here you will see multiple example you can check there demo

You can Use :

import { Card, CardWrapper } from "react-swipeable-cards"

Your Card and their elements should be in CardWrapper

<CardWrapper >
  <Card>

  </Card>
</CardWrapper >