React-native-snap-carousel: onSnapToItem never gets called

[mohammedmunaf]

Using "react-native-snap-carousel": "3.7.5"
Testing on iOS

Here is my code

<Carousel
                    ref={(c) => { this._carousel = c; }}
                    vertical={true}
                    data={["1", "2", "3", "4", "5", "6", "7", "8"]}
                    renderItem={({ item, index }) =>

                        <TouchableOpacity
                            style={{ flex: 1, backgroundColor: "transparent" }}
                            onPress={() => { this._carousel.snapToItem(index) }}>
                            <Text
                                style={{
                                    height: 30,
                                    textAlignVertical: 'center',
                                    flex: 1,
                                    textAlign: 'center',
                                    fontSize: 16
                                }} key={"money" + item}>{item}</Text>
                        </TouchableOpacity>
                    }
                    onSnapToItem={(index) => {
                        console.log("Moved to=====> " + index)
                        alert(index)
                    }}
                    inactiveSlideOpacity={0.4}
                    inactiveSlideScale={0.9}
                    enableSnap={true}
                    removeClippedSubviews={false}
                    autoplay={false}
                    sliderHeight={80}
                    sliderWidth={90}
                    itemHeight={30}
                    itemWidth={90}
                />

[adrian1388]

I am facing something similar in Desktop, but the difference is that on Android works OK.
I have not tested on iOS yet.

Using "react-native-snap-carousel": "3.8.0"

Code:

...
changeTitle(index) {
  this.setState({
    slider1ActiveSlide: index
  });
}
...
          <Carousel
            ref={c => {
              this._carousel = c;
            }}
            data={data}
            layout="default"
            renderItem={this._renderItem}
            sliderWidth={viewportWidth}
            itemWidth={viewportWidth}
            onSnapToItem={index => this.changeTitle(index)}
            useScrollView
          />

[adrian1388]

I am facing something similar in Desktop, but the difference is that on Android works OK.
I have not tested on iOS yet.

Using "react-native-snap-carousel": "3.8.0"

Code:

...
changeTitle(index) {
  this.setState({
    slider1ActiveSlide: index
  });
}
...
          <Carousel
            ref={c => {
              this._carousel = c;
            }}
            data={data}
            layout="default"
            renderItem={this._renderItem}
            sliderWidth={viewportWidth}
            itemWidth={viewportWidth}
            onSnapToItem={index => this.changeTitle(index)}
            useScrollView
          />

I found that this is the issue for me...

[mohammedmunaf]

Hi folks, Seems very cosmetic bug.
Setting activeSlideOffset={2} solved my issue

[cesar3030]

I'm having the same issue and activeSlideOffset={2} didn't solve it.
@adrian1388 Did you figure out a way to fix this?

[mohammedmunaf]

@cesar3030 I was facing this issue while I scroll fast on Android. I resolved it by adding

activeSlideOffset={2}
enableMomentum={true}
decelerationRate={0.9}

Here is my final code

<Carousel
                    ref={(c) => { this._carousel = c; }}
                    layout={'default'}
                    vertical={true}
                    data={this.props.data ? this.props.data : []}
                    renderItem={this.renderItem.bind(this)}
                    onSnapToItem={this._onSnapToItem.bind(this)}
                    sliderHeight={this.props.sliderHeight}
                    inactiveSlideOpacity={0.4}
                    inactiveSlideScale={0.9}
                    activeSlideOffset={2}
                    lockScrollWhileSnapping={true}
                    enableSnap={true}
                    enableMomentum={true}
                    decelerationRate={0.9}
                    removeClippedSubviews={false}
                    autoplay={false}
                    itemHeight={this.props.itemHeight}
                    initialNumToRender={this.props.data ? this.props.data.length : 0}
                    firstItem={0}
                />

[cesar3030]

@mohammedmunaf Thank you for your help!
My problem came from the fact I was using the carousel in a bottom sheet component from the react-native-reanimated-bottom-sheet library. On Android the touch event was not captured because of the bottom sheet.

[jrobber]

@mohammedmunaf Thank you for your help!
My problem came from the fact I was using the carousel in a bottom sheet component from the react-native-reanimated-bottom-sheet library. On Android the touch event was not captured because of the bottom sheet.

I'm having the same error. What was the fix?

[munafmohammed]

@mohammedmunaf Thank you for your help!
My problem came from the fact I was using the carousel in a bottom sheet component from the react-native-reanimated-bottom-sheet library. On Android the touch event was not captured because of the bottom sheet.

I'm having the same error. What was the fix?

https://github.com/archriss/react-native-snap-carousel/issues/541#issuecomment-514165668