[3.9.0] useAnimatedScrollHandler does not fire events from FlashList onScroll about react-native-reanimated

[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 ™️

[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)

[efstathiosntonas]

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

[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.

[NigelBreslaw]

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

[felixaa]

Same issue here. useAnimatedScrollHandler is not firing when using

const AnimatedFlashList = Animated.createAnimatedComponent(FlashList)

[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.

[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.

[efstathiosntonas]

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

[szydlovsky]

@efstathiosntonas That's a relief 😅

[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.

[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 ?

[khayym]

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

[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]

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

[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.