Tinder layout does not show stacked items by default, it just shows one item

[jitendra-koodo]

List starts with one item and then on swiping items get stacked up. I want the opposite effect. It should start with the stack and then swiping should remove item.

How can I achieve this? This is how I'm using it with 4 elements...

          <Carousel
            layout={'tinder'}
            contentContainerStyle={{
              alignItems: 'flex-start',
              justifyContent: 'flex-start',
              marginBottom: 0,
            }}
            containerCustomStyle={{
              height: 160,
              width: '100%',
            }}
            data={slides}
            renderItem={_renderItem}
            sliderWidth={Dimensions.get('window').width - 30}
            itemWidth={Dimensions.get('window').width - 30}
            onSnapToItem={index => setSlideNumber(index)}
          />

[Mavenic]

@jitendra-koodo It does stack up, but since your every item height is the same as container height, it's getting hidden. Try giving some bottom padding in the inner content of the item then you will stacking of layouts behind this.

[jitendra-koodo]

@jitendra-koodo It does stack up, but since your every item height is the same as container height, it's getting hidden. Try giving some bottom padding in the inner content of the item then you will stacking of layouts behind this.

But when I swipe, I see next element getting stacked up nicely with little offset. Please see this in attached image ...

[gsevla]

Did you find a solution @jitendra-koodo? Same issue here but it seems to affect ios only.

[jitendra-koodo]

Did you find a solution @jitendra-koodo? Same issue here but it seems to affect ios only.

Sorry, I did not find any solution.. I changed my design.

[gsevla]

Just to others knowledge.

I tried two solutions:

1 - removeClippedSubviews={false}

I think it worked but idk it is a good solution https://reactnative.dev/docs/flatlist#removeclippedsubviews

2 - carouselRef.current.triggerRenderingHack();

If called after slides render it seems to work too

[Developeranees]

just add this prop => firstItem={slider.length - 1}

[appasaheb4]

swip card after zig zag showing card only android side issue showing

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2