Any way to change how soon `onMomentumScrollEnd` fires?

[ds8k]

Is there a different event to listen for, or is it possible to change it so onMomentumScrollEnd fires sooner? Right now it fires seemingly after the page is done swiping. I'm implementing a dots page indicator and currently it works, but the dots updated way after the page has been swiped. It's not a great user experience and was hoping I'm missing something obvious.

[zachgibson]

Hey @ds8k, onMomentumScrollEnd fires after scrolling completely stops. I’ve run into this situation before, but you can fix it by leveraging animatedValue to supply your own Animated.Value, then use that along with indices to change opacity or whatever on your indicator dots.

e.g.

{
  PAGES.map((slide, index) => (
    // Generate Dot for each Page
    <Animated.View
      style={{
        width: 7,
        height: 7,
        marginHorizontal: 4.5,
        backgroundColor: 'white',
        borderRadius: 3.5,
        opacity: myAnimatedValue.interpolate({
          inputRange: [
            index * (pageWidth + dividerWidth),
            (index + 1) * (pageWidth + dividerWidth),
          ],
          outputRange: [1, 0],
          extrapolate: 'clamp',
        }),
      }}
    />
  ));
}

[ds8k]

Oh wow, thanks for the fast response! I got it working perfectly using your example. Only had to make one tweak to have the active dot reflect the active page:

opacity: this.animatedValue.interpolate({
  inputRange: [
    (index - 1) * width,
    index * width,
    (index + 1) * width,
  ],
  outputRange: [0.33, 1, 0.33],
})

Thanks again!

[zachgibson]

For sure! Glad to help out.