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

[chadders404]

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

1. Be using Expo SDK 51 and Reanimated ~3.10.1
2. 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]

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]

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]

@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/

[MULERx]

this error occurs in the react-native-reanimated v3.10.1 so, this error will fix if you upgrade your react-native-reanimated to the latest v3.13.0

[MULERx]

for now expo 51 not compatible with Reanimated 3.12 or more, but the above error is fixed this way

 // Initialize hooks at the top level
const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const scrollOffset = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler(event => {
    scrollOffset.value = event.contentOffset.y;
  });
  
  <Animated.ScrollView
        ref={scrollRef}
        onScroll={scrollHandler} > 
        .................................
   </Animated.ScrollView>    
   

[prescarlton]

@MULERx using Expo 52, this fixed it for me as well. Thank you!