[BUG] carousel not showing correct first item

[Arshit257]

Is this a bug report, a feature request, or a question?

Yes, Bug report

Have you followed the required steps before opening a bug report?

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

This is specific to both the platforms

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

Environment: React: 16.13.1 React native: 0.63.2 react-native-snap-carousel: 3.9.1

Target Platform: Android (12.0) iOS (15.5)

Expected Behavior

When using the carousel with enabling loop, and setting loopClonesPerSide to 1, the initial first item shown in expected to be the first item of data.

Actual Behavior

When component renders for the first time it is not showing the first item of the data prop.

Here I am passing exactly 2 item to each carousel. I want to show the first item first and then second item as per the image in the expected behaviour.

I tried setting firstItem to 0, 1, 2 but in all the case it is not working as expected.

Reproducible Demo

Carousel implementation:

<Carousel
  ref={carouselRef}
  data={carouselItemList}
  loop={true}
  loopClonesPerSide={1}
  enableSnap={true}
  renderItem={renderItem}
  scrollEnabled={false}
  onSnapToItem={handleOnSnapToItem}
/>

Steps to Reproduce

1. Implement the carousel as I mentioned above.
2. Give it exactly array of 2 items.

[purrseus]

Hi, I have the same issue, i resolve this in use loopClonesPerSide={data.length} and firstItem={-data.length}

[cgo123]

thiendo261

Quickfix, but mostly not practicable because of the performance

[Salman-Samian]

first load your data models and then render the <Carousel .... firstItem={x} /> also the first Item number should be updated as well.

you can load it in a useEffect and then pass it to Carousel data and you can see it will work.

if you need more information I can provide a sample for you.

[p-schlickmann]

try using useScrollView

[Jokotoye18]

The main reason this is happening is because when using FlatList to render the Carousel it only render item in batches with respect to initialNumToRender prop. So, if your firstItem value is greater than the initialNumToRender prop value, the Carousel won't be able to pick the correct firstItem up

try setting the initialNumToRender prop and ensuring useScrollView is false. initialNumToRender={Math.ceil(startIndex / 10) * 10} startIndex is a variable