meliorence / meliorence/react-native-snap-carousel
Android will not snap / snap callback when pulling towards index 0.
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 or a feature request?
Bug Report
Have you read the guidelines regarding bug report?
Yes.
Have you read the documentation in its entirety?
Yes.
Have you made sure that your issue hasn't already been reported/solved?
Read through all open/closed issues using keywords 'android' and 'snap'
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
Android
Is the bug reproductible in a production environment (not a debug one)?
Both in release and development builds, this issue comes up
Have you made sure that it wasn't a React Native bug?
I cannot find an issue that relates to my current issue.
Have you been able to reproduce the bug in [the provided example]
Yes. https://snack.expo.io/@nlwizkus/snapcarouselissue
Environment
Environment:
React: ^16.2.0
React native: ^0.53.3
react-native-snap-carousel: ^3.7.2
Target Platform:
Android (7.1)
Expected Behavior
Pulling past index 0 will snap to index 0, and the callback will fire.
video of ios: https://vimeo.com/user66774081/review/280244549/386e720eb6
Actual Behavior
When I pull down on the carousel, if I pull past the first item (index 0), the carousel refuses to snap. If I slightly towards index 1 afterwords, it will snap. If I pull slightly before (in-between 0 and 1) it will snap. Here is a video of what it is currently doing. There are animations in these examples but ignore that since I've tried this with those commented out. I've logged within the onSnap callback and it is not firing.
broken on android: https://vimeo.com/user66774081/review/280241289/9b73b34a23
(sorry, the mouse is in the middle of the screen since this was screen cast from a device. I'm doing the exact same motions as is shown in the ios video)
note: my issue isn't that it doesn't pull like it does in the ios, ie: going past the snap point on the beginning/end index. My issue is that the onSnapToItem doesn't get called when I pull past index 0 on android.
Reproducible Demo
public render(): JSX.Element {
return (
<View style={styles.flexOne}>
<Carousel
ref={(ref: any) => (this.carousel = ref)}
data={this.props.pickerOptions}
firstItem={START_INDEX} // 2
onSnapToItem={(index) => {
console.log('SNAP!', index);
this.props.onSelectRating(this.props.pickerOptions[index]);
this.setState({ activeCardIndex: index });
}}
enableSnap={true}
renderItem={this.renderItemForCarousel}
vertical={true}
itemHeight={(sliderHeight / this.props.pickerOptions.length) * 0.9}
sliderHeight={sliderHeight * 1.1} // ( * 1.1 fixes an issue with not snapping to last index)
inactiveSlideOpacity={0.5}
inactiveSlideScale={0.7}
slideStyle={styles.flexOne}
// scrollInterpolator={(i, p) => getScrollInterpolator(i, p)}
// slideInterpolatedStyle={(i, v) => getSlideInterpolatedStyle(i, v)}
/>
</View>
);
}
private renderItemForCarousel = (props: { item: Rating; index: number }) => {
return (
<TouchableOpacity onPress={() => this.pressedOption(props.index)} style={styles.container}>
<Image style={styles.itemImage} source={ORDERED_PICKER_NUMBER_IMAGES[props.index]} />
<Fade visible={props.index === this.state.activeCardIndex} style={styles.textContainer} duration={500}>
<Text style={styles.carouselText}>{this.state.activeCardIndex !== props.index ? '' : props.item.feeling}</Text>
</Fade>
</TouchableOpacity>
);
};
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the Android behavior in the provided Expo Snack and compare it with the Carousel usage shown in the report, especially vertical dragging past index 0. Trace the Android snap handling for this case and verify that pulling past the first item snaps to index 0 and invokes onSnapToItem; confirm the behavior in both development and release builds.
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