react-nativeexposwiper.jsreact-native-swiper

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


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?


Solution

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