snapToItem bug

[mlop113]

when I use snapToItem(index, false) with X > 3, It was usually return me to my Index then turn back to Index 0. I don't know why?, I don't add any props

[bd-arc]

⚠️ You did not follow the contributing guidelines!

As stated in these:

You need to fill out the issue template completely. This step is mandatory! Not doing so will result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.

---

Unless you provide a Snack example in which the issue can be reproduced, as well as a complete description of everything you've tried, we won't be able to help you and the thread will be closed.

[smkhalsa]

I have the same issue. @mlop113 were you able to find a solution?

[eggybot]

I can confirm that this issue has a bug on the latest RN version 0.59.8

[yoavprat]

+1

[bd-arc]

@eggybot @yoavapi Can you tell me if you experience the issue with and without prop loop enabled?

[yoavprat]

@eggybot @yoavapi Can you tell me if you experience the issue with and without prop loop enabled?

same experience with and without loop. please note that the Pagination component is being updated correctly (changing the focused dot) but the actual item is not visible.

[kevinvugts]

@bd-arc when we enable loop on the carousel it renders 3 clones, right? (or 6?)

If I press a button which is dynamically calling this._carousel.snapToItem(index) the menu is flickering and not going to the right index.

WHat is going wrong?

[eggybot]

@kevinvugts temp fix with setTimeout, check this link

[kevinvugts]

@kevinvugts temp fix with setTimeout, check this link

I am only experiencing this when I have loop=enabled. Do you know what's going wrong?

Please have a look: https://www.youtube.com/watch?v=f5b7vzuIzHc&feature=youtu.be

[kevinvugts]

@eggybot @yoavapi Can you tell me if you experience the issue with and without prop loop enabled?

Hi @bd-arc I am experiencing this only with loop=true please see the attached video above. Here is the video with the working solution (loop is disabled on here): https://www.youtube.com/watch?v=MHzPvyWy9VQ&feature=youtu.be

Code

  renderFiveHundredFilter = ({item, index}) => {
      return (
        <Text onPress={() => {
            setTimeout(() => this._carousel.snapToItem(index), 250)

            this.onPrivilegesRangeChange('none', index)
        }
      } key={`abc_${index}`} style={this._carousel.currentIndex === index ? Styles.activeMenuItem : Styles.menuItem}>{item.name}</Text>
      )
  }

<Carousel
          ref={(c) => { this._carousel = c;}}
          key={'fivehundredlist'}
          data={this.props.items}
          renderItem={this.renderFiveHundredFilter}
          keyExtractor={({name}) => {
            return 'range-button-'+name;
          }}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={100}
          loop={true}
          activeSlideAlignment={'start'}
          activeSlideOffset={2}
          enableMomentum={true}
          onSnapToItem={(slideIndex) => this.onPrivilegesRangeChange('none', slideIndex)}
        />

[kevinvugts]

@bd-arc I found out that this._enableLoop() function in the library is nowhere to be found. Is this on purpose?

Update

I changed the snapToItemFunction to:

snapToItem (index, animated = true, fireCallback = true) {
        const itemsLength = this._getCustomDataLength();
        const { loop, loopClonesPerSide } = this.props;

        if (!index || index < 0) {
            index = 0;
        }

        let positionIndex = this._getPositionIndex(index);
        let newIndex = loop ? positionIndex - loopClonesPerSide : positionIndex;

        if (positionIndex === this._activeItem) {
            return;
        }

        this._snapToItem(newIndex, animated, fireCallback);
    }

And the above code seems to work properly. However it does interfere with the snapToNext() and snapToPrevious methods

[horstleung]

If you are facing : it would snap to 0 slide when you are trying to snap to position x

simply add prop: getItemLayout to calculate offset.

example:

getItemLayout={(data, index) => (
              {length: viewportWidth, offset: viewportWidth * index, index}
)}

[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

[daihieptn97]

I add this function in the file "react-native-snap-carousel/src/carousel/Carousel.js", it's above function "snapToNext"

    snapToFist (index, animated = true, fireCallback = true) {
        this._snapToItem(0, animated, fireCallback);
    }

Or you can use my branch:

yarn add https://github.com/daihieptn97/react-native-snap-carousel