Too much space at the end of the carousel

[siongesteban]

Hi!

Any way we can achieve this same behavior of the snap for the last item?

https://github.com/dohooo/react-native-reanimated-carousel/assets/20148068/5a5fee3a-4851-44a8-96d2-7b2b75e3a1ea

This is how the left align example works currently.

https://github.com/dohooo/react-native-reanimated-carousel/assets/20148068/08dc392d-5177-49b9-b267-37fa72342116

In our use case, the cards aren't that big so when the carousel snaps to the last item, there's too much white space on the right side.

[dosubot[bot]]

🤖

Hey there @siongesteban! Great to see you back. Let's take a look at what we can do about that space.

Based on the information you've provided, it seems like you want to adjust the snapping behavior of the last item in the carousel to reduce the amount of white space on the right side when the carousel snaps to the last item.

There is a way to achieve this by adjusting the useOffsetX hook in the react-native-reanimated-carousel. This hook calculates the offset for each item in the carousel based on the index of the item, the size of the item, and the total number of items in the carousel.

Here's how you can adjust the TOTAL_WIDTH and HALF_WIDTH variables in the useOffsetX hook:

const TOTAL_WIDTH = size * ITEM_LENGTH - size;
const HALF_WIDTH = 0.5 * size - 0.5 * size;

Please note that these changes will affect the snapping behavior of all items in the carousel, not just the last item. If you want to adjust the snapping behavior of the last item only, you will need to add conditional logic to the useOffsetX hook to handle the last item differently. You can refer to the useOffsetX.ts file for more details.

Additionally, there's a prop called overscrollEnabled that determines whether items will scroll to the first placement when scrolling past the edge rather than closing to the last. This behavior is valid when the loop prop is set to false. The default value of the overscrollEnabled prop is true. If you want to change this behavior, you can set the overscrollEnabled prop to false. You can refer to the types.ts file for more details.

I hope this helps! If you have any other questions, feel free to ask.

Sources

• [FEATURE REQUEST] Let the last item stop to the end of container.
• src/hooks/useOffsetX.ts
• src/types.ts

#### About Dosu

This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. If you want to continue the conversation, start your reply with @dosu-bot.

[stoickeyboard]

@siongesteban have you tried using overscollEnabled={false} that might fix your issue