[Android] onMomentumBegin/ -End not being called in Animated.ScrollView
See original GitHub issueDescription
onMomentumEnd is not being called anymore since Version 2.3.0 in Animated.ScrollView. An animated FlatList or SecionList (with createAnimatedComponent) still calls onMomentumEnd. Am I doing something wrong in my code? In Version 2.2.4 it still worked.
This causes a bug in this library as well: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/221
Expected behavior
I expect onMomentumEnd to be called like in version 2.2.4 and lower.
Actual behavior & steps to reproduce
Scroll the screen of the code I provided. “onMomentumEnd” will not be printed in the console.
Snack or minimal code example
import React from 'react';
import { View } from 'react-native';
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
export default function App() {
const translationY = useSharedValue(0);
const isScrolling = useSharedValue(false);
const scrollHandler = useAnimatedScrollHandler({
onScroll: (event) => {
translationY.value = event.contentOffset.y;
},
onBeginDrag: (e) => {
isScrolling.value = true;
console.log('onBeginDrag');
},
onEndDrag: (e) => {
isScrolling.value = false;
console.log('onEndDrag');
},
onMomentumEnd: () => {
console.log('onMomentumEnd');
},
});
return (
<View style={{flex:1}} >
<Animated.ScrollView
onScroll={scrollHandler}
scrollEventThrottle={16}>
<View style={{height:250, width:300, backgroundColor:"red"}}></View>
<View style={{height:250, width:300, backgroundColor:"blue"}}></View>
<View style={{height:250, width:300, backgroundColor:"yellow"}}></View>
<View style={{height:250, width:300, backgroundColor:"purple"}}></View>
<View style={{height:250, width:300, backgroundColor:"green"}}></View>
</Animated.ScrollView>
</View>
);
}
Package versions
- React Native: 0.64.3
- React Native Reanimated: 2.3.0
- NodeJS: 16.6.2
- Xcode: - Just tested on android
- Java & Gradle: I tested in expo SDK 44 beta
Affected platforms
- Android
- iOS
- Web
Issue Analytics
- State:
- Created 2 years ago
- Reactions:43
- Comments:29 (6 by maintainers)
Top Results From Across the Web
useAnimatedScrollHandler | React Native Reanimated
This is a convenience hook that returns an event handler reference which can be used with React Native's scrollable components.
Read more >Animated.ScrollView is not scrolling horizontally, only on ...
I created to scroll multi-pages using Animated.ScrollView. It is working properly on iOS, but it got stuck on Android.
Read more >Multiple Onscroll Events On Scrollview React Native? - ADocLib
It seems that once onScroll handles an event like onMomentumBegin the ... in scroll end it is working perfect but when I scroll...
Read more >ScrollView - React Native
When true, the scroll view bounces when it reaches the end of the content if ... On Android this is not supported and...
Read more >Troubleshooting | React Native Bottom Sheet - GitHub Pages
Adding horizontal FlatList or ScrollView is not working properly on Android. Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@alexco2 Even I was facing the same issue and after spending hours of debugging I found that, if we add
onMomentumScrollEndprop to the FlatList or ScrollView, thenonMomentumEndhandler was triggered correctly This is what I did:Hello @kmagiera @piaskowyk @Szymon20000 @jkadamczyk, this issue is now the third most interacted issue (regarding thumbs up) in rea. Could you give us an update on the current state? Is there anything we could do to support you in solving this issue? Thanks 😃