[3.9.0] useAnimatedScrollHandler does not fire events from FlashList onScroll

[efstathiosntonas]

Description

Events are not being captured by useAnimatedScrollHandler from FlashList@1.6.4 onScroll prop at least on react-native@0.73.7 on Paper.

Steps to reproduce

1. Install 3.9.0
2. Add onScroll handler on an Animated FlashList
3. useAnimatedScrollHandler won't listen to events

By replacing FlashList with FlatList works with no issues.

Let me know if you need a repro, I guess you already got FlashList setup/tests on your setups.

Snack or a link to a repository

nope

Reanimated version

3.9.0

React Native version

0.73.7

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[NigelBreslaw]

Here is a reproduction https://snack.expo.dev/@nigelbreslaw/ra-flashlist-issue

[fadi-quader-mox]

I can reproduce this issue on 3.9.0 release

[MDG-RHawkins]

Seeing same issue using:

"react-native": "0.71.15",
"react-native-reanimated": "^3.3.0",
"@shopify/flash-list": "^1.4.3",

However we only noticed the issue at first on Android as it was causing scrolling to not work at all. For iOS the scroll still functioned but the custom animation did not fire. In our case as the animation was only visible in a small number of scenarios it was not picked up in QA initially.

[felixaa]

Same issue here. useAnimatedScrollHandler is not firing when using

const AnimatedFlashList = Animated.createAnimatedComponent(FlashList)

[szydlovsky]

Hi everyone! We have identified the issue and can tell where the problem lies - but the potential fix has brought up many more questions than we thought and we are currently discussing what to do. Stay tuned ™️

[szydlovsky]

Hello again - the fix will probably be merged in quite a while since polish May holidays start soon. But do not worry, if you need the fix badly, you can install Reanimated from @szydlovsky/rework-animatedComponent-tags branch.

[ElSeniorMikael]

@szydlovsky is the version 3.10.0 fixing the problem with useAnimatedScrollhandler not firing ?

[szydlovsky]

@ElSeniorMikael no - the release 3.10.0 had a different purpose: #5963 (comment). The PR with fix will probably be reviewed next week. Until then you can install Reanimated the way I mentioned above.

[emzet93]

Here is patch created from @szydlovsky PR. Can be used with patch-package:

react-native-reanimated+3.10.0.patch

[quocluongha]

I also experience this issue in the latest version (3.11.0)

[khayym]

I encountered the same issue on version 3.11.0, however, it worked fine on version 3.8.1

[szydlovsky]

Hey everyone! As the fix got merged it should be available in the next nightly build at around 2AM CEST time - see npm page. It will also be there in the next stable version/patched version.

[efstathiosntonas]

hey guys, sorry for being a party pooper but I encountered an issue with the entire screen being detached when displaying an overlay after applying the patch. It's like the entire tree is gone, even the status bar is being hidden on both iOS and Android.

rn 0.73.8, reanimated 3.11.0 with the patch for 3.10.0 mentioned above, gesture-handler 2.16.2

I cannot share the code I'm using since it's rarther complex and it's a private repo. Let me know if we can communicate in another way. It seems that it does not like things being inside a ternary. If i remove the patch everything goes back to normal but ofcourse no scroll events on Flashlist.

The main concept is this:

  const panStyle = useAnimatedStyle<ViewStyle>(() => ({
    transform: [
      {
        translateY: translateY.value
      },
      {
        scale: scale.value
      }
    ]
  }));


  <Overlay>
  {children}
   {overlay === "whatever" ?
     <Animated.View pointerEvents="auto" style={styles.absoluteFill}>
        <Animated.View style={styles.absoluteFill}>
          <View style={styles.flex}>
            <TapGestureHandler
              maxDist={32}
              onHandlerStateChange={({ nativeEvent: { state } }) => {
                if (state === State.END) {
                  setOverlay("none");
                }
              }}
            >
              <Animated.View style={[styles.flex, panStyle]}>
              {some_other_stuff}
              </Animated.View>
  ...all other closing tags
  : null}
  </Overlay>

[szydlovsky]

@efstathiosntonas Hi! Which patch did you use? This one is imperfect and I'd rather suggest latest nightly version - there was some stuff missing in the patch.

[szydlovsky]

Alternatively, there is a "final patch" as well: link

[efstathiosntonas]

let me give it a shot. I used the 3.10.0, I missed the 3.11.0 one.

[efstathiosntonas]

@szydlovsky after applying patch 3.11.0 life got back to normal 😅. Thank you!

[szydlovsky]

@efstathiosntonas That's a relief 😅

[losh11]

Unfortunately useAnimatedScrollHandler doesn't seem to be firing for me with 3.11.0. I downgraded to 3.8.1 and it works. Would appreicate any assistance getting this to work.

const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
  const translationY = useSharedValue(0);
  const animatedHeaderStyle = useAnimatedStyle(() => {
    return {
      opacity: interpolate(translationY.value, [0, 100], [1, 0]),
    };
  });

const scrollHandler = useAnimatedScrollHandler(event => {
  translationY.value = event.contentOffset.y;
});

Standard stuff right?

[szydlovsky]

@losh11 Have you even tried reading the discussion above? The fix will be present, perhaps, in 3.12 version. Until then, you can either install latest nightly build or manually install a patch.