3.0.0-rc.2 Android - TypeError: Cannot read property 'stateNode' of undefined

Description

I’m attempting to use Fabric with 3.0.0-rc.2. iOS works fine however on Android I get the following attempting to render an Animated.View.

 ERROR  TypeError: Cannot read property 'stateNode' of undefined

This error is located at:
    in AnimatedComponent(View) (at createAnimatedComponent.tsx:533)

Steps to reproduce

Render an <Animated.View/>

Snack or a link to a repository

https://github.com/kyle-ssg/reanimated-reproduction

Reanimated version

3.0.0-rc.2

React Native version

0.69.5 (I can confirm this also happens on RN 0.70.rc-4)

Platforms

Android

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[kyle-ssg]

Hmm, I was but I could replicate this by rendering a plain reanimated view in an empty app too. See https://github.com/kyle-ssg/reanimated-reproduction/blob/main/mobile/app/App.tsx#L5

[kyle-ssg]

Since yesterday I got my setup working (iOS and android) with quite a few dependencies, including @gorhom’s bottom sheet, though from this I learnt I won’t switch to the new architecture for a while, seems too risky and some really important modules aren’t ready.

A few things:

• If you’re coming from a project that has gone through many version upgrades, https://github.com/software-mansion/react-native-reanimated/tree/main/FabricExample is an excellent example to look at to compare with your own, in particular the AppDelegate.mm and build.gradle’s / MainApplication / MainActivity
• There are lots of red herring errors due to cache when opting in and out, removing iOS/Android build folders and clearing all the caches will save you from troubleshooting.

Here’s a list of dependencies that currently work for me

     react: 18.1.0 => 18.1.0 
    react-native: 0.70.6 => 0.70.6 

        "@gorhom/bottom-sheet": "4.4.5",
 "react-native-mmkv-storage": "^0.7.6",
        "react-native-gesture-handler": "2.8.0",
        "react-native-reanimated": "3.0.0-rc.3",
         "react-native-safe-area-context": "^4.4.1",
         "react-native-svg": "^13.3.0",
         "react-native-date-picker": "^4.2.6",

A quick note on the above. In order to work, @react-native-community/datetimepicker requires this in react-native-config.js

    '@react-native-community/datetimepicker': {
      platforms: {
        android: {
          androidMkPath: null,
          cmakeListsPath: null,
          componentDescriptors: null,
          libraryName: null,
        },
      },
    },

These don’t work

• react-native-linear-gradient <2.6.2 (it won’t crash the app but it won’t display). It looks like this is a replacement though haven’t tried it yet https://github.com/fyndx/react-native-gradient
• react-native-lottie: This will crash the app on attempting to render an animation view, it looks like there’s a promising PR https://github.com/lottie-react-native/lottie-react-native/pull/910
• react-native-modal-datetime-picker: playing around with it, I feel like this can be replaced with the bottomsheet + @react-native-community/datetimepicker
• react-native-webview: I imagine like Lottie this would be quite a big deal, this PR looks promising https://github.com/react-native-webview/react-native-webview/pull/2686
• react-native-screens: From what I could see, there seems to be an issue on Android only https://github.com/software-mansion/react-native-screens/issues/158