react-native-snap-carousel: 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 ([]).)

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}
   />
);

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 7
  • Comments: 15 (2 by maintainers)

Most upvoted comments

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

Hack, but working.

  useEffect(() => {
    const timeout = setTimeout(() => {
      carouselRef?.current?.snapToItem(selectedIndex)
    }, 60)
    return () => clearTimeout(timeout)
  }, [carouselRef?.current, selectedIndex])