react-native-snap-carousel icon indicating copy to clipboard operation
react-native-snap-carousel copied to clipboard

[Android] Carousel is glitchy when snapping

Open khaitruong922 opened this issue 1 month ago • 0 comments

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

khaitruong922 avatar May 21 '24 04:05 khaitruong922