meliorence / meliorence/react-native-snap-carousel
[Android] Carousel is glitchy when snapping
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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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