meliorence / meliorence/react-native-snap-carousel

[Android] Carousel is glitchy when snapping

Open
#1,018 0 comments 2 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

Version: 3.9.1

The carousel is very laggy when snap to item on Android while it works fine on iOS.

If you view the video at 0.5x speed, you will see that the item already snaps into correct place, but after that somehow it is shifted downward and snapped upward again. I am not sure if it is caused by the ITEM_HEIGHT or SLIDER_HEIGHT props being set inaccurately.

https://github.com/meliorence/react-native-snap-carousel/assets/56820749/b8df59ef-fdc0-4b60-8fbf-a6f8329ecc53

Here are the props of the Carousel component:

  const ITEM_HEIGHT = height - tabBarHeight - HEADER_HEIGHT;
  const SLIDER_HEIGHT = ITEM_HEIGHT;

          <Carousel
            data={dishes}
            firstItem={initialIndex}
            initialScrollIndex={initialIndex}
            renderItem={renderDish}
            sliderWidth={SLIDER_WIDTH}
            itemWidth={ITEM_WIDTH}
            itemHeight={ITEM_HEIGHT}
            ListEmptyComponent={renderEmptyList}
            sliderHeight={SLIDER_HEIGHT}
            inactiveSlideOpacity={1}
            inactiveSlideScale={1}
            onSnapToItem={handleSnapListView}
            initialNumToRender={PRERENDERED_AMOUNT}
            keyboardShouldPersistTaps="always"
            lockScrollWhileSnapping
            lockScrollTimeoutDuration={LOCK_SCROLL_DELAY_DURATION}
            keyExtractor={handleKeyExtractor}
            getItemLayout={(_, idx) => ({
              length: ITEM_HEIGHT,
              offset: ITEM_HEIGHT * idx,
              index: idx,
            })}
            snapToInterval={ITEM_HEIGHT}
            ref={listCarouselRef as any}
            vertical
            onScrollEndDrag={handleScrollEnd}
            onScroll={handleOnScroll}
            enableSnap
            decelerationRate="fast"
            onEndReached={onEndReached}
            onMomentumScrollBegin={onMomentumScrollBegin}
            ListFooterComponent={<ListFooter isFetchingMore={isFetchingMore} />}
            onEndReachedThreshold={THRESHOLD_LAZY_LOAD}
          />

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 by reproducing the Android snapping behavior from the Carousel props shown, especially the vertical layout, itemHeight, sliderHeight, getItemLayout, and snapToInterval settings. Inspect the carousel's snapping and layout entry points to determine where the post-snap shift occurs. Done means Android snaps to the expected position without the visible downward-then-upward movement while preserving the working iOS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.