question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Android] onMomentumBegin/ -End not being called in Animated.ScrollView

See original GitHub issue

Description

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:open
  • Created 2 years ago
  • Reactions:43
  • Comments:29 (6 by maintainers)

github_iconTop GitHub Comments

9reactions
BabuStackcommented, Dec 28, 2021

@alexco2 Even I was facing the same issue and after spending hours of debugging I found that, if we add onMomentumScrollEnd prop to the FlatList or ScrollView, then onMomentumEnd handler was triggered correctly This is what I did:

<Animated.ScrollView
  ref={ref}
  onMomentumScrollEnd={() => {}}
  {...otherProps}
/>
6reactions
alexco2commented, Apr 25, 2022

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 😃

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found