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.

Swipe gesture stuck - snap carousel loop

See original GitHub issue

Is this a bug report, a feature request, or a question?

question but possible bug.

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

I have read the guidelines regarding bug report.
I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
I have searched for existing issues and made sure that the problem hasn’t already been reported.
I am using the latest plugin version.
I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn’t a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both

Environment

React: 16.11.0
React native: 0.62.2
react-native-snap-carousel: ^3.9.1

Target Platform: Android (>6.0) iOS (>12)

Expected Behavior

Performing a swipe gestures slow and fast with the carousel component with the loop property enabled without stuck any itens.

Actual Behavior

Performing a swipe gestures slow and fast with the carousel component with the loop property enabled occurs stuck with the last “item 3”.

Reproducible Demo

View the demo

import * as React from 'react';
import {
  Text, 
  View,
  SafeAreaView } from 'react-native';

import Carousel from 'react-native-snap-carousel';

export default class App extends React.Component {

 
    constructor(props){
        super(props);
        this.state = {
          activeIndex:0,
          carouselItems: [
          {
              title:"Item 1",
              text: "Text 1",
          },
          {
              title:"Item 2",
              text: "Text 2",
          },
          {
              title:"Item 3",
              text: "Text 3",
          }
        ]
      }
    }

    _renderItem({item,index}){
        return (
          <View style={{
              backgroundColor:'floralwhite',
              borderRadius: 5,
              height: 250,
              padding: 50,
              marginLeft: 25,
              marginRight: 25, }}>
            <Text style={{fontSize: 30}}>{item.title}</Text>
            <Text>{item.text}</Text>
          </View>

        )
    }

    render() {
        return (
          <SafeAreaView style={{flex: 1, backgroundColor:'rebeccapurple', paddingTop: 50, }}>
            <View style={{ flex: 1, flexDirection:'row', justifyContent: 'center', }}>
                <Carousel
                  layout={"default"}
                  ref={ref => this.carousel = ref}
                  data={this.state.carouselItems}
                  sliderWidth={300}
                  itemWidth={300}
                  [loop={true}]([url](url))
                  inactiveSlideOpacity={1}
                inactiveSlideScale={1}
                  renderItem={this._renderItem}
                  onSnapToItem = { index => this.setState({activeIndex:index}) } />
            </View>
          </SafeAreaView>
        );
    }
}