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