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