0

I would like to have an event like onScroll on the ScrollView but onSwipe on the Swiper. And in this callback I would like to get the "swipe progress" (e.g. swiped 50% to the second item). With all the supported callbacks I can do something when the swipe starts or ends but I also want all the steps in between. How could I do this?

Christoph Hummler
  • 971
  • 2
  • 7
  • 20

1 Answers1

2

To get the scrolled position of the current view

Swiper component is a ScrollView and you can use its native props with Swiper as well, for your case use onScroll prop to get where the scroll is and the percentage swipped.

const viewWidth = Dimensions.get('window').width;

...

<Swiper
   scrollEventThrottle={16}
   onScroll={(e) =>
     const scrolledPercentage =(e.nativeEvent.contentOffset.x / (viewWidth * (this.currentIndex + 1)));
       }
>
...
</Swiper>

.

To get the progress of your passed views

Just get the current index with onIndexChanged props and then calculate your progress with the count of your Views inside of the swiper

<Swiper 
  style={styles.wrapper} 
  showsButtons={true} 
  onIndexChanged={(index) => {

   let progress= index/totalNumberOfView
   let progressInPercentage = Math.floor(progress*100)

   this.setState({
    progress,
    progressInPercentage
   })
  }
>
mcnk
  • 1,690
  • 3
  • 20
  • 29
  • With swipe progress I meant the progress from one view to the next and not to which view out of all views I swipe. Calculating the progress of all views is easy with the onIndexChanged prop, but not the thing I was looking for... – Christoph Hummler May 25 '20 at 18:57
  • Oh I see what you meant sorry for misunderstanding. I have updated the answer to your case. – mcnk May 26 '20 at 07:43