Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 951
Nelson Sousa Avatar asked Jul 04 '26 19:07

Nelson Sousa


1 Answers

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.

like image 119
Nelson Sousa Avatar answered Jul 06 '26 11:07

Nelson Sousa



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!