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.

Solution 1

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.

Solution 2

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!

Comments

[Marty]

@jean-regisser what are the major issues you have ran into with react-native-swiper ?

[Mike S.]

react-native-swiper currently has a major android bug. It doesn't display at all on android. There are multiple issues and no recently accepted PR's. I think the module has been abandoned.

[Mike S.]

I'd be wary of this plugin as well. There haven't been any updates to it since Feb 2018

[bend]

Hey Mike, let me assure you that the plugin is still alive and well. The latest merged update was made two months ago, but a lot of work is happening behind the scene. And, if you take a close look at the issues, you'll see that every one of them has been answered within hours. Still, good contributors are always welcome if you want to help ;-)

[Mike S.]

Thanks, @bend. I'll keep an eye on it. Still, before I add a library to an enterprise app, I need assurance that it stays current with the RN library.

[B--rian]

@MikeS. As of November 2018, it looks there are some commits for reat-native-swiper. The only Android-issue I got is a problem with the fonts, see my answer below.

[Dr. Younes Henni]

So far the library has many open issues and pulled requests are stacking up. I wonder what the code owners are doing to push things forward.

[mixdev]

This is pretty unstable and flaky, especially number of cards are more.