meliorence / meliorence/react-native-snap-carousel

Android will not snap / snap callback when pulling towards index 0.

Open
#357 8 comments 0 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 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.