🚀 What layout style do you want?

[dohooo]

Writing here!

BTW, looking forward to your PR!~ 🍺

[dohooo]

[dohooo]

[dohooo]

[dohooo]

[dohooo]

[dohooo]

[yepMad]

Hello,

I want to do something like this. I believe the current "Parallax" solves this, but I have doubts about how to change the size of the item that is not in focus.

[dohooo]

Hello,

I want to do something like this. I believe the current "Parallax" solves this, but I have doubts about how to change the size of the item that is not in focus.

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/layouts/ParallaxLayout.tsx#L75 here

[yepMad]

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/layouts/ParallaxLayout.tsx#L75 here

Thank you! I actually turned this change into a property. In case you find it interesting, I can make a commit with it.

[dohooo]

cool,let me a look

[dohooo]

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/layouts/ParallaxLayout.tsx#L75 here

Thank you! I actually turned this change into a property. In case you find it interesting, I can make a commit with it.

You are the first one to submit layout, thank you for your contribution!~

[yepMad]

You are the first one to submit layout, thank you for your contribution!~

I am happy with that! You can see what I did in this PR. It was simple changes, and a little quick, let me know if there are any side effects or problems.
#139

[dohooo]

You are the first one to submit layout, thank you for your contribution!~

I am happy with that! You can see what I did in this PR. It was simple changes, and a little quick, let me know if there are any side effects or problems. #139

I released v2.3.1 just now, THX!~ @yepMad

[IAmNatch]

It would be great to have support for multiple items per a page. I was able to achieve this by setting the width to 50%, and adding a style of overflow: "visible", but this seems a bit hacky, as it's actually leaving the carousel wrapper entirely. As well, you'll notice when not looping the last element can still be scrolled to, leaving an awkward space. Ideally we could customize maxPages to something like data.length - itemsPerPage in order to prohibit the last swipe.

Happy to spend some time contributing to this if you could point me in the right direction.

[IAmNatch]

One other request: "Auto Height" for horizontal layouts. I know this might not be possible, as the items are currently all positioned absolutely, but it would be great to be able to size to height of the carousel based on the height of the contents. This was achievable in snap-carousel, but they may have been using a very different strategy.

[dohooo]

@IAmNatch here, Let's discuss it

[testermumatstudio]

@IAmNatch were you able to figure this out, thanks for the help if you can

[testermumatstudio]

hello, where can I find an example to show more than one item

[dohooo]

hello, where can I find an example to show more than one item

What do you mean?

[testermumatstudio]

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

[dohooo]

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

I added an example. You can look at this demo in home page, and click that gif it will navigate you to code example. 🍺

[dohooo]

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

BTW, This code will control the number of items that displaied.

[testermumatstudio]

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

BTW, This code will control the number of items that displaied.

grateful for your help and your time, really thanks, I'm going to try and study the code

[Nadimkhan120]

@dohooo hi thanks for this amazing library,
can we use this as a swiper like tinder?

[yepMad]

Hello how are you? I have an error I don't know if it's mine or the carousel let's see if you can help me, the carousel I have is web and horizontal when I want to scroll the web version the mobile version doesn't let me scroll the dom the carousel moves correctly horizontally , but I can not scroll if I press the card that is inside the horizontal carousel how can I solve it, I put the example in gif gift

Hi! Sorry you went through this. This is covered in the README, as a good practice for ScrollView and FlatList (I believe it also works on the web)

[testermumatstudio]

¿Hola como estás? tengo un error no se si es mio o del carrusel a ver si me puedes ayudar el carrusel que tengo es web y horizontal cuando quiero hacer scroll la version web la version movil no me deja hacer scroll el dom el carrusel se mueve correctamente horizontalmente, pero no puedo hacer scroll si presiono la tarjeta que esta dentro del carrusel horizontal como lo soluciono, pongo el ejemplo en gif de regalo

¡Hola! Lamento que hayas pasado por esto. Esto está cubierto en README, como una buena práctica para ScrollView y FlatList (creo que también funciona en la web)

perfect, thank you very much for answering, I will try and commit, if I had read it but had not understood what this was for, I thought it was to move it in reference to which point could be made to slide inside the carousel on the x axis, the values of the activeoffsetx -10 10: could you tell me what they are for? since I don't have them clear from the documentation in a short summary, and should I use them in the carousel I have with activeoffsety ? since the carousel is horizontal?

[yepMad]

perfect, thank you very much for answering, I will try and commit, if I had read it but had not understood what this was for, I thought it was to move it in reference to which point could be made to slide inside the carousel on the x axis, the values of the activeoffsetx -10 10: could you tell me what they are for? since I don't have them clear from the documentation in a short summary, and should I use them in the carousel I have with activeoffsety ? since the carousel is horizontal?

activeOffsetX should already solve your issue, it is intended for horizontal carousels (side to side) that are inside a scroll view. The "panGestureHandlerProps" property is from react-reanimated itself.

From the documentation of reanimated itself:

Range along X axis (in points) where fingers travels without activation of handler. Moving outside of this range implies activation of handler. Range can be given as an array or a single number. If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number p is given a range of (-inf, p) will be used if p is higher or equal to 0 and (-p, inf) otherwise.

[OlehDeneka-docode]

@dohooo how can i disable bouncing?
And is there a way to display items like this without having to scale them?

[dohooo]

@dohooo how can i disable bouncing?
And is there a way to display items like this without having to scale them?

Disable bouncing

> Without scale.

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/docs/custom-animation.md
You can customize the animation, Like this #128 , #128 (comment)

[OlehDeneka-docode]

oh man, thank you so much) guess i didnt look good enough in docs and issues

[quicksilverr]

Just had a query regarding this, how can we make the highlighter from centre?

[wqcstrong]

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

I added an example. You can look at this demo in home page, and click that gif it will navigate you to code example. 🍺

How to center the active item?

[dohooo]

@wqcstrong @quicksilverr

Here.
Fold example

Tab-bar example

[aditya-keri-betterhalf]

@dohooo - Great work on this library, thank you for all the efforts on this!

I would love to know how I can implement this vertical stack animation in the Carousel ?

https://www.youtube.com/shorts/-lvrU34Jt50

I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

[dohooo]

@dohooo - Great work on this library, thank you for all the efforts on this!

I would love to know how I can implement this vertical stack animation in the Carousel ?

https://www.youtube.com/shorts/-lvrU34Jt50

I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

[aditya-keri-betterhalf]

@dohooo - Great work on this library, thank you for all the efforts on this!
I would love to know how I can implement this vertical stack animation in the Carousel ?
https://www.youtube.com/shorts/-lvrU34Jt50
I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

[dohooo]

@dohooo - Great work on this library, thank you for all the efforts on this!
I would love to know how I can implement this vertical stack animation in the Carousel ?
https://www.youtube.com/shorts/-lvrU34Jt50
I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

RPReplay_Final1656070531.MP4

[aditya-keri-betterhalf]

@dohooo - Great work on this library, thank you for all the efforts on this!
I would love to know how I can implement this vertical stack animation in the Carousel ?
https://www.youtube.com/shorts/-lvrU34Jt50
I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

RPReplay_Final1656070531.MP4

This is great! Exactly what I need. Could you please help me with the props you've used to achieve this ? or an example you've created ?

[dohooo]

@dohooo - Great work on this library, thank you for all the efforts on this!

I would love to know how I can implement this vertical stack animation in the Carousel ?

https://www.youtube.com/shorts/-lvrU34Jt50

I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

RPReplay_Final1656070531.MP4

This is great! Exactly what I need. Could you please help me with the props you've used to achieve this ? or an example you've created ?

I have added to examples.

[in2progress]

Stellar work on this library. Wondering if a combination of vertical and horizontal mode is possible.

[dohooo]

Stellar work on this library. Wondering if a combination of vertical and horizontal mode is possible.

Thank you. It seems that it is not possible at present. More modifications are needed.

[IAmNatch]

Hey @dohooo, I've been looking at your multiple example again, and I've been hitting an issue which I would call "overscrolling".

When the carousel is set to "loop", everything works as expected, however when loop is disabled, you can scroll the last element all the way to "position 1" instead of it being the last item in the carousel.

Current Implementation:

Slot 1	Slot 2	Slot 3
LastItem	Empty	Empty

Ideal Implementation

Slot 1	Slot 2	Slot 3
ThirdLastItem	SecondLastItem	LastItem

I've attached a minimal reproduction in expo here:
https://snack.expo.dev/@srobbins/reanimated-carousel-overscroll-example

I think this would be made possible by allowing us to set maxPages on the ScrollViewGesture, where maxPages would be totalItems.length - numberOfItemsOnScreen, however there would still be a slight problem of navigating to the last item.

Curious what you think about this!

Edit: I believe this is the same issue as #240.

[IAmNatch]

@dohooo I have a PR that adds support for this here:
#295

[dohooo]

@dohooo I have a PR that adds support for this here: #295

Solved in #297.

[ijhar-nivoda]

hey @dohooo , how can do style like this ? is it possible without parallax ?

[vbylen]

stacked card animations that look like this would be amazing:

https://www.youtube.com/watch?v=xPbRsca_l7c

[SinanAldefai]

One other request: "Auto Height" for horizontal layouts. I know this might not be possible, as the items are currently all positioned absolutely, but it would be great to be able to size to height of the carousel based on the height of the contents. This was achievable in snap-carousel, but they may have been using a very different strategy.

Has someone already found a way for this? Or is it just not possible?

[rbhuzwandar]

How to use parallax mode, but hide the left nad right item. so the active item will show full width screen ?

[estebandiazfront]

Which layout should I use to achieve something like this?