Is there a way to get the swipe progress of react-native-swiper?

Question

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?

Answer 1

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