[Android] Carousel is glitchy when snapping

[khaitruong922]

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.

Screen.Recording.2024-05-21.at.11.56.21.mov

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