React Native Card Carousel view?

Question

Does anyone know how can we achieve this kind of view in React Native, or is there any available components out there that can help on this issue?

I've seen in F8 2016 app too, been searching on how to achieve the transition and the carousel-like view with horizontal scrolling.

Answer 1

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.

---

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!

Answer 2

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.