expo 51.0.7 CRASH [TypeError: animatedRef.getTag is not a function (it is undefined)]

XxQuickSilverZz commented 1 month ago

Description

My app crashes since i updated to expo@v51

my package.json: https://pastebin.com/WLbC7D4Y

With expo 49.0.13 it was working perfectly!!

  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const scrollOffset = useScrollViewOffset(scrollRef);
  const [scrollX, setScrollX] = useState(new REACT_NATIVE_ANIMATED.Value(0));

 <ScrollView ref={scrollRef} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} >
    <Animated.View
            style={[styles.image, imageAnimatedStyle]}
          />
</ScrollView>

Now i get this error with expo 51.0.7:

[TypeError: animatedRef.getTag is not a function (it is undefined)] in CompanyDetailScreen (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by CssInterop.View)

Steps to reproduce

update expo to v51
add "react-native-reanimated": "~3.10.1"
yarn

Snack or a link to a repository

https://pastebin.com/WLbC7D4Y

Reanimated version

3.10.1

React Native version

0.74.1

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

mhammerc commented 1 month ago

Hello, we have the exact same crash.

The stack trace:

TypeError: undefined is not a function
  at useEffect$argument_0(node_modules/react-native-reanimated/src/reanimated2/hook/useScrollViewOffset.ts:101:46)

The line that crash in useScrollViewOffset.ts:

  scrollRefTag.current = animatedRef.getTag();

The crash happen because the ref given to useScrollViewOffset is not "connected" to a scroll view. In the following snack, if we were to connect aref to an AnimatedScrollView, the crash would go away.

Snack reproduction: https://snack.expo.dev/@mhammerc/4d8044

mhammerc commented 1 month ago

Update:

I think this is already fixed in this commit.

https://github.com/software-mansion/react-native-reanimated/commit/11006a9909e2bed7e6ab0c5192dc5e35978eed1c

chadders404 commented 4 weeks ago

I'm also getting this issue with SDK 51.0.11. Worked fine on SDK 50.0.14.

MULERx commented 4 days ago

am also faced same issue in the SDK 51, but its fixed in 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>

software-mansion / react-native-reanimated