3

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.

Nelson Sousa
  • 497
  • 6
  • 14
  • feels like those cards are supposed to fill your screen width a bit for you to get that effect – comphonia May 18 '20 at 01:17
  • I don't want to have a full width item, I want around 35% width of each card. This is possible with FlatList (where the Carousel is based) so I guess there's a solution, I just don't know how :( – Nelson Sousa May 18 '20 at 01:24

1 Answers1

1

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.

Nelson Sousa
  • 497
  • 6
  • 14