react-native-snap-carousel
react-native-snap-carousel copied to clipboard
[Android] Carousel is glitchy when snapping
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}
/>