react-native-snap-carousel: Swipe gesture stuck - snap carousel loop

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?

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>
        );
    }
}

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 5
  • Comments: 23 (2 by maintainers)

Most upvoted comments

as @emilioheinz suggested if you set this prop loopClonesPerSide={data.length} with the data length the problem disappear ¯_(ツ)_/¯

Still same issue , swipe gesture had a problem in android , very difficult to swipe left or right in android only