search

meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.35k stars 2.29k forks source link

Feature request carousel like on revolut #237

Closed muresanandrei closed 6 years ago

muresanandrei commented 6 years ago

I don't know if it's possible with this plugin. I tried but can't make the carousel work like on this video. https://www.revolut.com/assets/media/ios1.76bac5.mp4.

Is there a way to achieve this with this plugin now?

bd-arc commented 6 years ago

Hi @muresanandrei,

If you're talking about the two-way control, there already is a dedicated issue regarding it: #202

I still didn't have time to put together a working example, but it should definitely be possible. Can you share what you've tried so far? I'm going to close this issue but we can continue the discussion in the other thread ;-)

muresanandrei commented 6 years ago

Actually not the two-way control is my problem. I am trying to achieve multiple items preview like on that video.

bd-arc commented 6 years ago

Oh ok. Then you shouldn't have any issue.

There are many examples of multiple items preview in the issues (#51, #161, and others).

Since your items will have a really small width, make sure to decrease the default value of activeSlideOffset accordingly. You might also want to reduce the value of props swipeThreshold and callbackOffsetMargin.

muresanandrei commented 6 years ago

I managed to have the carousel work like on the gif the only problem I have is because I have to set the width of the item same for all items for example 80 width if I have an element with longer text that width will need to be bigger.Can I somehow set auto width for items? I want to have same space between all items but auto width.

This is what I have so far:

screen shot 2017-12-30 at 00 00 14
bd-arc commented 6 years ago

No, handling different item widths is not possible. This would require complex developments and would impair carousel's performance.

I'll add it to the roadmap though and will take a deeper look at it in the future to see what can be done about it.

You may get away with an intermediate width and allowing two lines of text with numberOfLines={2}. You can also try to define a dynamic letterSpacing based on each item's number of letters (iOS only).