meliorence / meliorence/react-native-snap-carousel

how to get index of the item, when pagingEnabled

Open
#927 0 comments 0 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

I want to use pagingEnabled option in Carousel, since it is working as expected and is not giving any performance issue in android.
Without using that prop, their is slight delay in manually scrolling the items placed horizontally , but on iOS it working fine.

This is what the initial implementation was.

<Carousel
        onSnapToItem={(slideIndex: number) => {
         setSlideIndex(slideIndex);
        }}
       data={data}
       renderItem={renderSliderItem}
       sliderWidth={carouselWidth}
       itemWidth={carouselWidth}
       loop={true}
       slideStyle={{ width: carouselWidth }}
       autoplay={autoPlay}
       autoplayDelay={scrollInterval}
       autoplayInterval={scrollInterval}
       useScrollView
       enableSnap={true}
       shouldOptimizeUpdates={true}
       loopClonesPerSide={5}
       enableMomentum={true}
       decelerationRate={0.9}
       activeSlideAlignment="center"
       removeClippedSubviews={true}
       inactiveSlideScale={1}
       inactiveSlideOpacity={1}
       inactiveSlideShift={1}
       lockScrollWhileSnapping={true}
       />

But it not working. so added changed it to following

<Carousel
        // onSnapToItem={(slideIndex: number) => {
        //   setSlideIndex(slideIndex);
        // }}
        data={data}
        renderItem={renderSliderItem}
        sliderWidth={carouselWidth}
        itemWidth={carouselWidth}
        loop={true}
        slideStyle={{ width: carouselWidth }}
        autoplay={autoPlay}
        autoplayDelay={scrollInterval}
        autoplayInterval={scrollInterval}
        useScrollView
        enableSnap={true}
        shouldOptimizeUpdates={true}
        loopClonesPerSide={5}
        enableMomentum={true}
        decelerationRate={0.9}
        activeSlideAlignment="center"
        removeClippedSubviews={true}
        inactiveSlideScale={1}
        inactiveSlideOpacity={1}
        inactiveSlideShift={1}
        activeSlideOffset={0.5}
        lockScrollWhileSnapping={true}
        pagingEnabled
        onMomentumScrollEnd={onScrollEnd}
        />
   But onScrollEnd function is not giving correct index. 
      
let onScrollEnd = (e) => {
    let pageNumber = Math.min(
      Math.max(Math.floor(e?.nativeEvent?.contentOffset?.y / winWidth + 0.5) + 1, 0),
      data?.length
    );
    console.log(pageNumber);
   
  };

Please suggest. Stuck here.

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 reviewing the Carousel configuration using pagingEnabled and onMomentumScrollEnd, then inspect the onScrollEnd calculation based on nativeEvent.contentOffset.y and winWidth. Compare the reported index with the carousel's actual item position and determine what behavior is expected. Done means the callback consistently reports the correct item index on Android.

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
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.