React Native Card Carousel view?

I know that the question is old, but a co-worker and I recently had to create a component that answers this particular need. We ended up open-sourcing it, so it's all yours to try: react-native-snap-carousel.

The plugin is now built on top of FlatList (versions >= 3.0.0), which is great to handle huge numbers of items. It also provides previews (the effect you were after), snapping effect, parallax images, RTL support, and more.

You can take a look at the showcase to get a grasp of what can be achieved with it. Do not hesitate to share your experience with the plugin since we're always trying to improve it.

react-native-snap-carousel archriss showcasereact-native-snap-carousel archriss aix


Edit : two new layouts have been introduced in version 3.6.0 (one with a stack of cards effect and the other with a tinder-like effect). Enjoy!

react-native-snap-carousel stack layoutreact-native-snap-carousel tinder layout


You can achieve this using ScrollView with paging enabled on iOS and ViewPagerAndroid on Android.

F8 being an open source app, you can see that's what it's actually using: https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

This component renders all pages.

If you only want to have the visible and left and right pages rendered to save memory, there's another component built on top of it that does it: https://github.com/fbsamples/f8app/blob/master/js/common/Carousel.js

There are various other similar implementations available:

  • https://js.coach/react-native?search=carousel
  • https://js.coach/react-native?search=swiper

However I'm not recommending https://github.com/leecade/react-native-swiper as I've had several issues with it.