Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onSnapToItem never gets called

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:9

Top GitHub Comments

13reactions

mohammedmunafcommented, Jul 23, 2019

@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}
                />

2reactions

mohammedmunafcommented, Jun 19, 2019

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