snapToItem does not move the slider to a specific position when list length is more than 15 items.

[binitgurzu]

There is a slider that contains more than 200 images there is a circular slider from which we slide that image slider. so we need to call the snapToItem method to move the carousel in a specific position. but snapToItem does not move the carousel to a specific position.

if the slider has only 10 or 15 images then it works perfectly but if we have more than 15 images snapToItem method doesn't work properly.

bug report

snapToItem does not move the slider to a specific position.

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

Environment

(Write your answer here.)

Expected Behavior

Need to move the slider to a specific position where I want. For example, I have 120 images in the slider then I call the snapToItem(119) then it moves to the slider to that 119 images.

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Add screencasts/screenshots!)

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. 2. 3.

[Sivakumar415]

Any updates

[026binit]

@Sivakumar415 Please try this https://github.com/026binit/react-native-snap-carousel

[Sivakumar415]

https://github.com/026binit/react-native-snap-carousel

Thanks @026binit I will try.

[yorickshan]

@Sivakumar415 Please try this https://github.com/026binit/react-native-snap-carousel

doesn't work 😓

[026binit]

@yorickshan have you provided getItemLayout props.

<Carousel
    ref={carouselRef}
    data={data}
    renderItem={renderCarouselItem}
    sliderWidth={width}
    itemWidth={ITEM_WIDTH}
    getItemLayout={getCarouselItemLayout}
  />

const getCarouselItemLayout = (_: any, index: number) => ({
    length: ITEM_WIDTH,
    offset: ITEM_WIDTH * index,
    index,
  });

carouselRef.current.snapToItem(index);

[yorickshan]

@yorickshan have you provided getItemLayout props.

<Carousel
    ref={carouselRef}
    data={data}
    renderItem={renderCarouselItem}
    sliderWidth={width}
    itemWidth={ITEM_WIDTH}
    getItemLayout={getCarouselItemLayout}
  />

const getCarouselItemLayout = (_: any, index: number) => ({
    length: ITEM_WIDTH,
    offset: ITEM_WIDTH * index,
    index,
  });

carouselRef.current.snapToItem(index);

fixed, nice work, thank you.