Reanimated Crashes in Expo SDK 51.0.11 | "TypeError: animatedRef.getTag is not a function (it is undefined)"

chadders404 commented 2 weeks ago

Description

Since upgrading to SDK 51.0.11, my apps using Reanimated crash. Below is the error:

TypeError: animatedRef.getTag is not a function (it is undefined)

Source of the error is indicated to be in useScrollViewOffset.ts line 105:9:

  if (scrollRefTag === null) {
      console.warn(
        '[Reanimated] ScrollViewOffset failed to resolve the view tag from animated ref. Did you forget to attach the ref to a component?'
      );
    } else {
      eventHandler.workletEventHandler.registerForEvents(scrollRefTag.current);
    }

I am running SDK 51.0.11 and Reanimated ~3.10.1. The apps were working fine in Expo SDK 50.0.14.

As this has happened on a couple of apps and is reproducable in a snack, I'm enclined to say this is an issue with Reanimated or the SDK.

Steps to reproduce

Be using Expo SDK 51 and Reanimated ~3.10.1
Import useScrollViewOffset and useAnimatedRef from react native reanimated

Snack or a link to a repository

https://snack.expo.dev/@chadders404/reanimated-crash-expo-sdk-51

Reanimated version

~3.10.1

React Native version

0.74.2

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Go

Architecture

None

Build type

None

Device

Real device

Device model

iPhone 11 Pro

Acknowledgements

Yes

szydlovsky commented 2 weeks ago

Hey @chadders404, yeah there were some design issues with the code of useScrollViewOffset. It should be fixed in 3.12 version though - let me know if it helps!

oddanderson commented 1 week ago

Hi sorry if this is a dumb question, as I'm still learning web/expo coming from backend. Expo is still pulling in 3.10, so it seems like 3.12 might be a ways out. Is there a way to upgrade to 3.12 using expo?

If I use npm to manually install 3.12 of react-native-animated, I get a ton of warnings that I shouldn't be doing so. Currently web deploy is broken until I can pull this fix in. This is my error, which I assume is the same:

Unexpected nativeTag: function; nativeTag=[object HTMLDivElement] 

            createBottomSheetScrollableComponent's ScrollableComponent needs to return 
            a reference that contains a nativeTag to a Native HostComponent.

            ref=component => {
        // enters when ref is set by attaching to a component

szydlovsky commented 1 week ago

@oddanderson I suggest that you create a development build instead. It lets you install any native libraries you want (so, bumping the Reanimated as well). More info on development builds can be found here: https://docs.expo.dev/develop/development-builds/introduction/

software-mansion / react-native-reanimated