React-native-swiper: Android: Supported ScrollResponder events not work

[Arkanine]

Supported ScrollResponder events except onMomentumScrollEnd not work on Android.

[DavoCg]

Anybody have an idea why these ScrollResponder doesn't work on Android? (onScroll for exemple)

[DavoCg]

I find out why : for Android the module use ViewPagerAndroid (for example onScroll become onPageScroll etc)

[dennishansen]

This is a serious flaw with this package. There is no way to bind an onScroll event to an animated variable (or anything for that matter) on android.
Please build support.

[kkgelu]

Can confirm onScroll is not working on Android.

[delgiudices]

@dennishansen You can however use onPageScroll to bind to animated events.

One example is how I did it:

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

// On render 
<Swiper
          onScroll={this.handleScroll} // ios
          onPageScroll={this.handlePageScroll} // android
          ....

// handleScroll
handleScroll = Animated.event([
  { nativeEvent: { contentOffset: { x: this.scrollPosition } } },
]);


// handlePageScroll to call handleScroll with computed values
handlePageScroll = (e: any) => {
  const { offset, position } = e.nativeEvent
  const contentOffset = offset * screenWidth + (position * screenWidth);
  this.handleScroll({
    nativeEvent: {
      contentOffset: { x: contentOffset }
    }
  });
}

Hope this helps

[ivnnv]

@dennishansen You can however use onPageScroll to bind to animated events.

One example is how I did it:

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

// On render 
<Swiper
          onScroll={this.handleScroll} // ios
          onPageScroll={this.handlePageScroll} // android
          ....

// handleScroll
handleScroll = Animated.event([
  { nativeEvent: { contentOffset: { x: this.scrollPosition } } },
]);


// handlePageScroll to call handleScroll with computed values
handlePageScroll = (e: any) => {
  const { offset, position } = e.nativeEvent
  const contentOffset = offset * screenWidth + (position * screenWidth);
  this.handleScroll({
    nativeEvent: {
      contentOffset: { x: contentOffset }
    }
  });
}

Hope this helps

I can confirm this fix the issue on android.
Definitely this should be implemented in the component to have just an unified onScroll method, but from now this does the trick.

Gracias @delgiudices !

[Loewe1000]

Needed hours to find this! Thank you!
But I have a problem with this solution:

If I put the Animated.event inline like this:
<Swiper onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: this.state.left } } }]})...
then it's working, but if I assign a function like in your example like this:
<Swiper onScroll={this.handleScroll}...
handleScroll = Animated.event( [{ nativeEvent: { contentOffset: { x: this.state.left } } }])
it won't update the this.state.left variable.

But if I add a async listener like this the value shows up in the console:
handleScroll = Animated.event( [{ nativeEvent: { contentOffset: { x: this.state.left } } }], { listener: event => { console.log(event.nativeEvent.contentOffset.x); //console.log(this.state.left); //const offsetY = event.nativeEvent.contentOffset.y; // do something special } } );

Any Idea?