initialScrollIndex does not work all the time

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

This is a bug report.

The possibility to be able to use the props getItemLayout & initialScrollIndex (which I believe is a very good idea because of the optimisation of getItemLayout) does not work all the time.

Sometimes, the initialScrollIndex() does not work and renders the first item. The bug does not appear all the time, sometimes it works perfectly and sometimes it doesn’t. I have tried with a normal Flatlist in which all the items are the size of the screen to be sure if it is not a bug from Flatlist but it never failed. So the problem comes from SnapCarousel.

To explain what I am doing, I use the snap-carousel to show pictures fullscreen and the user can swipe between the pictures. The first picture rendered depends on what picture the user pressed before in a kind of gallery. I always tried with the last item of the list (9 items), and sometimes it show me indeed the last item and sometimes the first item. I do exactly the same actions each time.

I tried also with initialNumToRender() with a value of the index of the first item to show (it was necessary with firstIndex prop) but it does not change anything.

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

(Check the step you’ve followed - put an x character between the square brackets ([]).)

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn’t already been reported.
• I am using the latest plugin version.
• 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, because it works perfectly with a normal Flatlist all the time.

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

Tried on two android devices : android 8.1 android 9 => both has the problem

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

I tried without the debug on. The problem appears.

Environment

Environment: React: 16.8.6 React native: 0.60.5 react-native-snap-carousel: 3.8.4

Target Platform: Android (8.0 / 0.9) iOS (latest)

Expected Behavior

I expect that initialScrollIndex() show me the index I passed

Actual Behavior

initialScrollIndex() does not show me all the time the index passed and show me the first item of the list.

Reproducible Demo

I will try to post a reproductible demo. But maybe some other people has encountered the same problem so this post is for that.

Steps to Reproduce

Code used:

getItemLayout = (data, index) => {
    return { length: SCREEN_WIDTH, offset: SCREEN_WIDTH * index, index };
}

render() {
    <Carousel
      ref={this.refCarousel}
      data={this.state.render_list}
      renderItem={this.renderItem}
      sliderWidth={SCREEN_WIDTH}
      itemWidth={SCREEN_WIDTH}
      containerCustomStyle={[styles.CarouselStyle]}
      onBeforeSnapToItem={this.onBeforeSnapToItem}
      initialScrollIndex={this.state.initial_index}
      contentContainerCustomStyle={styles.contentContainerCustomStyle}
      removeClippedSubviews
      windowSize={10}
      scrollEventThrottle={16}
      getItemLayout={this.getItemLayout}
      keyExtractor={this.keyExtractor}
      shouldOptimizeUpdates={false}
   />
);

[cesar3030]

Same problem as well. I downgraded to 3.8.1 and it seems to work properly…

[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