meliorence / meliorence/react-native-snap-carousel

Swipe gesture stuck - snap carousel loop

Open
#720 23 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

### 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?

- [x] I have read [the guidelines regarding bug report](https://github.com/archriss/react-native-snap-carousel/blob/master/CONTRIBUTING.md).
- [x] I have reviewed [the documentation](https://github.com/archriss/react-native-snap-carousel/blob/master/README.md) in its entirety, including the dedicated documentations :books:.
- [x] I have searched for [existing issues](https://github.com/archriss/react-native-snap-carousel/issues) and made sure that the problem hasn't already been reported.
- [x] I am using [the latest plugin version](https://github.com/archriss/react-native-snap-carousel/releases).
- [x] I am following [the issue template](https://raw.githubusercontent.com/archriss/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) closely in order to produce a useful bug report.

### Have you made sure that it wasn't a [React Native bug](https://github.com/archriss/react-native-snap-carousel/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%22react-native+bug%22+)?

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](https://drive.google.com/file/d/14N5r4931fEsKLwXSzOl5uQ4EM_VXJ1Ff/view)

```
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 (

{item.title}
{item.text}

)
}

render() {
return (


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


);
}
}
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproducible demo and the Carousel usage shown in the issue, focusing on the loop prop and slow versus fast swipes on both Android and iOS. Reproduce the case where the carousel becomes stuck on item 3, then trace the relevant Carousel behavior. Done means looped swipes no longer get stuck on the last item.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.