Search code examples
react-nativereact-native-snap-carousel

How to right align carousel using react-native-snap-carousel?

I am trying to align the end of the carousel to the right.

This is how I defined the Carousel:

<Carousel
    data={pointsOfSale}
    firstItem={0}
    renderItem={renderItem}
    sliderWidth={sliderWidth}
    itemWidth={itemWidth}
    hasParallaxImages
    containerCustomStyle={{
        marginStart: theme.mixins.widthPercentageToDP(2),
    }}
    inactiveSlideScale={1}
    inactiveSlideOpacity={1}
    activeSlideAlignment="start"
/>

With the property activeSlideAlignment="start" I was able to align the start of the carousel to the left. However, if I scroll to the end, the last item will align at the left (the same position as the first item). I would like to keep the last item in the right, just like FlatList.

Current behaviour: Current behaviour

I would like to avoid those empty spots.

I am using React Native 0.62.2 and react-native-snap-carousel 3.9.0.

Solution

  • Answer: Not possible with version 3.x of the plugin.

    However this is being implemented in version 4, using the prop useExperimentalSnap. It is currently in beta.