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

Hey @kyle-ssg, any chance you are using @gorhom’s bottom-sheet, too?

Error trace:

This error is located at:
in FlatList (created by AnimatedComponent(FlatList))
in AnimatedComponent(FlatList)
in Unknown (created by NativeViewGestureHandler)
in NativeViewGestureHandler (created by BottomSheetFlatList)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by BottomSheetDraggableViewComponent)
in BottomSheetDraggableViewComponent (created by BottomSheetFlatList)
in BottomSheetFlatList (created by BottomSheetFlatList)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by BottomSheetDraggableViewComponent)
in BottomSheetDraggableViewComponent (created by BottomSheet)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by BottomSheet)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by BottomSheet)
in RCTView (created by View)
in View (created by BottomSheetContainerComponent)
in BottomSheetContainerComponent (created by BottomSheet)
in BottomSheetGestureHandlersProvider (created by BottomSheet)
in BottomSheet (created by BottomSheet)
in AttachmentPicker (created by OverlayProvider)
in ThemeProvider (created by OverlayProvider)
in ImageGalleryProvider (created by OverlayProvider)
in AttachmentPickerProvider (created by OverlayProvider)
in MessageOverlayProvider (created by OverlayProvider)
in TranslationProvider (created by OverlayProvider)
in OverlayProvider (created by App)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider
in Unknown
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in NewArchStream(RootComponent), js engine: hermes

@tomekzaw

1. yes, I do (android)
2. Yes, I do: Running "myapp" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
3. I couldn’t replicate it due to the number of dependencies I have right now. I will try again tonight

If someone is running into similar issue (for me it was property ‘version’ of undefined) my solution was to modify properly metro.config.js. I had react-native-svg-transformer included in project as well and you need to follow the new way to integrate it on it’s official github page.

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

The root cause of the issue is the fact that Reanimated uses Fabric mode while the app still runs on Paper (old renderer):

As you can see, there’s no "fabric":true in the logs, meaning that your app still runs on the old architecture.

Based on the value of newArchEnabled property, Reanimated correctly detects that Fabric is enabled and sets global._IS_FABRIC to true which causes Reanimated to use Fabric implementation (e.g. to obtain ShadowNodeWrapper from stateNode field, which is undefined on Paper).

The problem is that for some reason React Native doesn’t enable Fabric. This may be because your app is totally out-of-sync with React Native 0.69.5 template. In particular, the Android app still runs on Paper because the following method is missing:

    @Override
    protected ReactRootView createRootView() {
      ReactRootView reactRootView = new ReactRootView(getContext());
      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
      return reactRootView;
    }

Additionally, many of the third-party libraries that you use are not Fabric-compatible yet, for instance:

• react-native-linear-gradient
• react-native-modal-datetime-picker
• react-native-keyboard-aware-scroll-view
• react-native-webview

I’ve replaced MainActivity.java in your project with the one from RN 0.69.5 app template (see here), changed the Java package and app name. I also removed all other third-party libraries from package.json and other Android-specific files. The app now runs on Fabric and the issue is gone:

Closing this issue as it’s not a bug in Reanimated, but a config issue on your side.

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

@prince-sugarfit nope, we don’t support this currently (and honestly we don’t plan to). edit: I’m assuming you mean turboModules = true & fabric = false

@khushal87 facing the same issue when playing around with @gorhom’s bottom-sheet

Same problem