Closed ds8k closed 6 years ago
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',
}),
}}
/>
));
}
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!
For sure! Glad to help out.
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.