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

kyle-ssg · 2022-09-01T12:21:33Z

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

The text was updated successfully, but these errors were encountered:

Chenbao2021 · 2022-09-21T12:09:38Z

Same problem

khushal87 · 2022-09-21T13:17:06Z

Facing the same problem with 0.70.1 while opting in the new arch with 3.0.0-rc.2.

khushal87 · 2022-09-21T13:19:05Z

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

kyle-ssg · 2022-09-21T17:50:42Z

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

keshav-raj · 2022-09-24T11:52:25Z

Facing the same issue on new Archtecture

keshav-raj · 2022-09-26T09:25:03Z

@kyle-ssg Did you find any workaround am also facing the same issue. If I have <Animated. View /> it's failing

anirudhdream11 · 2022-09-29T06:26:17Z

Any solution till now?
I am facing same issue for Android only with new architecture on RN 0.70.1, However ios looks fine.

thanggggg1 · 2022-10-08T02:55:09Z

Any solution till now?
I am facing same issue for Android only with new architecture on RN 0.70.1, However ios looks fine.

Did you find the solution

ugurdalkiran · 2022-11-08T13:04:00Z

The same problem continues.

kyle-ssg · 2022-11-15T11:39:33Z

Yeah just to confirm, haven't found a workaround for this.

anirudhdream11 · 2022-11-15T12:13:49Z

Any solution till now?
I am facing same issue for Android only with new architecture on RN 0.70.1, However ios looks fine.

Did you find the solution

It was worked for me when I upgraded reanimated to "3.0.0-rc.3"

Combination of below dependencies was worked for me :
"react-native": "0.70.1",
"react-native-gradle-plugin": "0.70.1",
"react-native-reanimated": "3.0.0-rc.3",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "3.17.0",

tomekzaw · 2022-11-15T12:55:13Z

Hey @kyle-ssg, thanks for submitting this issue and marking other issues as duplicate.

Based on the repro you have provided, I was able to successfully reproduce the issue on app launch.

We will investigate this error further.

tomekzaw · 2022-11-16T14:33:23Z

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.

ugurdalkiran · 2022-11-16T15:19:16Z

With Fabric enabled, the signed APK app crashes on first launch. That's why I disable Fabric.

fgagneten · 2022-11-19T01:00:23Z

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

tomekzaw · 2022-11-19T08:23:35Z

@ugurdalkiran @fgagneten

Do you have Fabric (new architecture) enabled?
If yes, do you have {"fabric":true} in Metro bundler console?
Can you replicate the issue on a fresh React Native app initialized with npx react-native init MyApp --version 0.x.y?

kyle-ssg · 2022-11-19T16:54:44Z

@tomekzaw Thanks so much for the explaination and the "fabric":true tip!

fgagneten · 2022-11-19T17:35:06Z

@tomekzaw

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

kyle-ssg · 2022-11-20T09:54:12Z

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 feat: initial support for new architecture (fabric) lottie-react-native/lottie-react-native#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 feat: New arch react-native-webview/react-native-webview#2686
react-native-screens: From what I could see, there seems to be an issue on Android only Attempt attach child that is not of type RNScreen react-native-screens#158

khushal87 · 2023-05-29T09:38:03Z

Hey @kyle-ssg do you recommend not upgrading to new arch with the bottom-sheet version 4.4.5?

prince-sugarfit · 2023-07-25T14:43:25Z

Is there any way I can use it with newArchitecture = true & fabric = false?

tomekzaw · 2023-07-25T14:52:05Z

@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

fgagneten · 2023-07-25T15:09:05Z

Is there any workaround to fix this issue? (I always get this issue using Gorhom + BottomSheetVirtuslizedList).

Only crash with Fabric = true

LadislavBohm · 2023-10-27T10:12:35Z

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.

hssdiv · 2024-02-02T17:29:53Z

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.

Thanks for the tip, had that in expo-app and I simply needed to set sourceExts the way official documentation says it should be set (same way as assetExts)
https://docs.expo.dev/guides/customizing-metro/

TassainRasool · 2024-04-25T18:05:02Z

react native version == 0.68.5
on updating the reanimated from 2.17.0 (RNReanimated (2.17.0)) to any higher version I am facing many issues with it.
some common issues are showing undefined methods which are working fine with the 1.17.0 version.

any suggestions or sol?

kyle-ssg added the Needs review Issue is ready to be reviewed by a maintainer label Sep 1, 2022

github-actions bot added Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided labels Sep 1, 2022

tomekzaw added the 🏰 Reanimated 3 label Sep 1, 2022

kyle-ssg mentioned this issue Nov 15, 2022

React Native CLI project not working with newArchitecture when added reanimated library to package.json #3718

Closed

tomekzaw added Reproducible 🎉 and removed Needs review Issue is ready to be reviewed by a maintainer labels Nov 16, 2022

tomekzaw closed this as completed Nov 16, 2022

AfrazHussain mentioned this issue Mar 22, 2023

chore: updated reanimated to v3 gorhom/react-native-bottom-sheet#1324

Merged

e-younan mentioned this issue Mar 30, 2023

cannot read property stateNode of undefined. codeherence/react-native-header#9

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kyle-ssg commented Sep 1, 2022 •

edited

Chenbao2021 commented Sep 21, 2022

khushal87 commented Sep 21, 2022 •

edited

khushal87 commented Sep 21, 2022 •

edited

kyle-ssg commented Sep 21, 2022 •

edited

keshav-raj commented Sep 24, 2022

keshav-raj commented Sep 26, 2022 •

edited

anirudhdream11 commented Sep 29, 2022 •

edited

thanggggg1 commented Oct 8, 2022

ugurdalkiran commented Nov 8, 2022

kyle-ssg commented Nov 15, 2022

anirudhdream11 commented Nov 15, 2022

tomekzaw commented Nov 15, 2022

tomekzaw commented Nov 16, 2022 •

edited

ugurdalkiran commented Nov 16, 2022

fgagneten commented Nov 19, 2022

tomekzaw commented Nov 19, 2022

kyle-ssg commented Nov 19, 2022

fgagneten commented Nov 19, 2022

kyle-ssg commented Nov 20, 2022 •

edited

khushal87 commented May 29, 2023

prince-sugarfit commented Jul 25, 2023

tomekzaw commented Jul 25, 2023 •

edited

fgagneten commented Jul 25, 2023

LadislavBohm commented Oct 27, 2023

hssdiv commented Feb 2, 2024

TassainRasool commented Apr 25, 2024

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

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

Comments

kyle-ssg commented Sep 1, 2022 • edited

Description

Steps to reproduce

Snack or a link to a repository

Reanimated version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

Chenbao2021 commented Sep 21, 2022

khushal87 commented Sep 21, 2022 • edited

khushal87 commented Sep 21, 2022 • edited

kyle-ssg commented Sep 21, 2022 • edited

keshav-raj commented Sep 24, 2022

keshav-raj commented Sep 26, 2022 • edited

anirudhdream11 commented Sep 29, 2022 • edited

thanggggg1 commented Oct 8, 2022

ugurdalkiran commented Nov 8, 2022

kyle-ssg commented Nov 15, 2022

anirudhdream11 commented Nov 15, 2022

tomekzaw commented Nov 15, 2022

tomekzaw commented Nov 16, 2022 • edited

ugurdalkiran commented Nov 16, 2022

fgagneten commented Nov 19, 2022

tomekzaw commented Nov 19, 2022

kyle-ssg commented Nov 19, 2022

fgagneten commented Nov 19, 2022

kyle-ssg commented Nov 20, 2022 • edited

khushal87 commented May 29, 2023

prince-sugarfit commented Jul 25, 2023

tomekzaw commented Jul 25, 2023 • edited

fgagneten commented Jul 25, 2023

LadislavBohm commented Oct 27, 2023

hssdiv commented Feb 2, 2024

TassainRasool commented Apr 25, 2024

kyle-ssg commented Sep 1, 2022 •

edited

khushal87 commented Sep 21, 2022 •

edited

khushal87 commented Sep 21, 2022 •

edited

kyle-ssg commented Sep 21, 2022 •

edited

keshav-raj commented Sep 26, 2022 •

edited

anirudhdream11 commented Sep 29, 2022 •

edited

tomekzaw commented Nov 16, 2022 •

edited

kyle-ssg commented Nov 20, 2022 •

edited

tomekzaw commented Jul 25, 2023 •

edited