React-native-snap-carousel: snapToItem(0, (animated = false)) snaps to SECOND item.

[rendomnet]

Cant snap to first item.
this._carousel.snapToItem(0, (animated = true)); snaps to second one.
And this._carousel.snapToItem(1, (animated = true)); snaps to third one.

[bd-arc]

@rendomnet Can you share your exact <Carousel /> set up?

[rendomnet]

@bd-arc

<Carousel
            ref={c => {
              this._carousel = c;
            }}
            loop={true}
            apparitionDelay={500}
            data={this.state.markers}
            renderItem={this._renderCarouselItem}
            sliderWidth={DEVICE_WIDTH}
            firstItem={0}
            itemWidth={CARD_WIDTH}
            inactiveSlideOpacity={0.8}
            autoplay={false}
            inactiveSlideScale={0.9}
            enableMomentum={true}
            onSnapToItem={index => this.carouselSnap(index)}
            activeSlideAlignment="center"
            autoplayDelay={0}
            containerCustomStyle={styles.cardContainer}
            contentContainerCustomStyle={{}}
          />

  carouselSnap(index) {
    const { coordinate } = this.state.markers[index];
    this.map.animateToRegion(
      {
        ...coordinate,
        latitudeDelta: this.state.region.latitudeDelta,
        longitudeDelta: this.state.region.longitudeDelta
      },
      350
    );
  }



md5-883b43f644eb167e64aa630290825152



 markerClick(index) {
     this._carousel.snapToItem(index, true);
  }

[bd-arc]

@rendomnet This might have to do with the loop feature. Does it work properly if you set loop to false?

[rendomnet]

@bd-arc Yes. Turning off loop makes snapToItem act properly. But we need fix for loop=true settings.

[bd-arc]

The issue should be fixed by this commit. To try it out, just copy/paste the following in your package.json file:

"react-native-snap-carousel": "https://github.com/archriss/react-native-snap-carousel#ce3bf06"

@rendomnet Can you confirm that it works for you?

[bd-arc]

Closing as no further feedback was provided.
The supposed fix has been published in version 3.4.0.

[rendomnet]

@bd-arc sorry my PC is not available rn so cant test your solution. I think it will work anyway, thank you for response.

[jordangrant]

@bd-arc Potential bug: Have been using a looped carousel, and let's say I start at index one, I move to the left (index 0.. index (-1)..) the carousel suddenly loops around to that same card, but on the right side? Hard to explain, here's a gif: https://imgur.com/61cmLGJ
Quite a bit of skipping, in general, looking at the commit above, I'm thinking it _could_ be related?

[bd-arc]

Hi @jordangrant,

Thanks for reporting back. While the issue you describe is not linked to the one from this thread, it clearly has to do with loop handling.

When looping, the data you provide is cloned in order to create slide duplicates. When you reach the edges of the original slides, you are then scrolling duplicates (their number being defined by prop loopClonesPerSide). Then, when the scroll interaction is finished, the scroll offset is seamlessly repositioned so that the original slide is presented for you to interact with.

They are two potential problems though:

• On Android in debug mode, and while the repositioning is done without animation, you can sometimes see the carousel moving. There is nothing I can do about it since that's an issue with the underlying FlatList component (have you seen this by the way? ;-)). This problem usually goes away in production mode.
• Depending on the number of slides you're dealing with, the FlatList will do its internal optimizations and avoid rendering slides that are "too far away". When the carousel is repositioned, you might then be facing a temporary blank slide... You can try modifying inherited props's default values to find something that better suits your need. I'm starting to wonder whether I should add a prop to prevent optimizations by rendering a ScrollView instead of a FlatList.

[bd-arc]

Honestly, I'm not completely satisfied with the "clones" approach, but that's the only one I could think of with the FlatList component in which rendering can only be handled with data and renderItem().

If you have a better idea, I'll be glad to implement it ;-)

[AmmarTariq10]

snaptoprev and snaptoItem(0) both are not working I want to slide back to the first item
snapToItem always takes to the index 1 I only have two items in my data and want to move back and froth in the carousel

• using snaptoPrev and snapToNext function: prev did not work next worked smoothly
• using snaptoItem always takes to index 1 even whem I'm giving it index 1

Please help!!!!

Here is how I'm creating my carousel

                  <Carousel
                        onSnapToItem={(slideIndex)=>{
                            console.log('slideIndex')
                            EventRegister.emit('goHard:segmentChange')
                            this.setState(p=>{
                                return{
                                    ...p,
                                    index:slideIndex
                                }
                            })
                        console.log(this.state.index,pos)
                        }}  
                        loop={false}
                        slideStyle={{width:90*vw}}
                        ref={(c) => { this._carousel = c; }}
                        data={this.state.data}
                        renderItem={this._renderItem}
                        sliderWidth={100 * vw}
                        itemWidth={100 * vw}
                        inactiveSlideScale={1}
                        swipeThreshold={40 * vw}
                        inactiveSlideOpacity={1}
                        activeSlideAlignment={pos}
                    />

[bd-arc]

@AmmarTariq10 Please create a new thread that includes a Snack example in which the issue can be reproduced. Make sure to follow the contributing guidelines.

[sultan-arshi]

for me (animated = true) worked but when I used (animated = false) it returns to previous image
I don't know why
I think this bug still present in the library