Requiring unknown module "undefined" ( isNativeModule Function )

[SaatwikRishi]

Description

I recently updated my react native version from 0.68.5 to 0.72.7 and updated react-navigation drawer to 6.6.6, now whenever i am trying to open the drawer, the animation is very sluggish and taking a lot of time to complete with a lot of lag also i am getting this error

I found a temporary fix by replacing import { PropsAllowlists } from '../../propsAllowlists'; to import * as List from '../../propsAllowlists';

and changing the function from function isNativeProp(propName: string): boolean { return !!PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST[propName]; }

to

function isNativeProp(propName: string): boolean { return !!List.PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST[propName]; }

but is there any other way to fix this?

RN Info:

System:
  OS: macOS 14.1.2
  CPU: (8) arm64 Apple M1
  Memory: 99.77 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: /opt/homebrew/opt/node@18/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.3
    path: /opt/homebrew/opt/node@18/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.13.0
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /Users/bahubully/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Steps to reproduce

1. Open drawer
2. And issue is there

Snack or a link to a repository

N/A

Reanimated version

3.6.1

React Native version

0.72.7

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

Samsung Galaxy S22+ (Physical Device ), Pixel 6A (Emulator )

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[Latropos]

@SaatwikRishi Hi! Please reset cache each time you start metro yarn start --reset-cache and tell us what version of react-navigation drawer you was previously using.

[SaatwikRishi]

@Latropos, tried that already, previously i was on v6.4.1

[evilchis94]

Had the exactly the same issue, had to downgrade to react-native-reanimated 2.17.0 but now I face this problem: https://github.com/software-mansion/react-native-reanimated/issues/4408

React Native v0.72.7 React Native Reanimated v2.17.0

com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by "/data/app/~~CjNIRn1YSNehUt2byya3Bg==/com.acsyt.rooma-T2nkcLDEt9wF0K0No3dLNg==/base.apk!/lib/arm64-v8a/libreanimated.so"..., js engine: hermes, stack: callNativeSyncHook@1:106247 nonPromiseMethodWrapper@1:103288 NativeReanimated@1:708369 anonymous@1:701637 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:746320 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:710167 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:696855 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:695448 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1867255 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1866097 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1865089 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:996223 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:986422 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:966518 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:80017 loadModuleImplementation@1:73625 guardedLoadModule@1:73137 metroRequire@1:72808 global@1:72364 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188) at com.facebook.jni.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) at java.lang.Thread.run(Thread.java:1012)

Please, help Thanks!

[SaatwikRishi]

Had the exactly the same issue, had to downgrade to react-native-reanimated 2.17.0 but now I face this problem: #4408

React Native v0.72.7 React Native Reanimated v2.17.0

com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by "/data/app/~~CjNIRn1YSNehUt2byya3Bg==/com.acsyt.rooma-T2nkcLDEt9wF0K0No3dLNg==/base.apk!/lib/arm64-v8a/libreanimated.so"..., js engine: hermes, stack: callNativeSyncHook@1:106247 nonPromiseMethodWrapper@1:103288 NativeReanimated@1:708369 anonymous@1:701637 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:746320 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:710167 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:696855 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:695448 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1867255 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1866097 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1865089 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:996223 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:986422 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:966518 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:80017 loadModuleImplementation@1:73625 guardedLoadModule@1:73137 metroRequire@1:72808 global@1:72364 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188) at com.facebook.jni.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) at java.lang.Thread.run(Thread.java:1012)

Please, help Thanks!

0.72 is not compatible with 2.xx, try using the temp fix I have mentioned above

[evilchis94]

Had the exactly the same issue, had to downgrade to react-native-reanimated 2.17.0 but now I face this problem: #4408 React Native v0.72.7 React Native Reanimated v2.17.0 com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by "/data/app/~~CjNIRn1YSNehUt2byya3Bg==/com.acsyt.rooma-T2nkcLDEt9wF0K0No3dLNg==/base.apk!/lib/arm64-v8a/libreanimated.so"..., js engine: hermes, stack: callNativeSyncHook@1:106247 nonPromiseMethodWrapper@1:103288 NativeReanimated@1:708369 anonymous@1:701637 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:746320 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:710167 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:696855 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:695448 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1867255 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1866097 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1865089 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:996223 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:986422 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:966518 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:80017 loadModuleImplementation@1:73625 guardedLoadModule@1:73137 metroRequire@1:72808 global@1:72364 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188) at com.facebook.jni.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) at java.lang.Thread.run(Thread.java:1012) Please, help Thanks!

0.72 is not compatible with 2.xx, try using the temp fix I have mentioned above

It worked for debug mode, but not for release. I'm getting the same undefined is not a function, js engine: hermes

[luketgriffith]

i have this error as well - even though the PropsAllowlist seems to be clearly defined, it would crash every time. I ended up moving the contents of that file (propsAllowLists.ts) directly into the index.ts file, and that worked for some reason. Created a patch to work around it for now

[aadityapaliwal94]

Same issue with me in v3.6.1

@luketgriffith Yes, it worked after your suggestions.

Can we have a fix from the lib side?

[Ryabchikus]

Same here with error in reanimated v3.6.1 and RN 0.72.7 I can fork the repository and fix it for my project, but it doesn't look good

[lluis-sancho]

Same with 0.71.6 and reanimated 3.6.1

[marcofuentes05]

Same here, trying to update RN 0.71.2 -> 0.73.2 using reanimated 3.6.1

[Stewart-Needham]

Just working through an upgrade and encountered this issue. luketgriffith's workaround overcame the issue. RN 0.73.2 react-native-reanimated 3.6.1 @react-navigation/drawer 6.6.6

[MaryKilduff68]

Our project is also seeing this issue, SaatwikRishi temporary fix worked for us, but we also found this.... What we did note is we don't see this error when the debugger is disabled. Appears something in relation to the debugger and this module in RNreanimated was causing this error because its trying to automatically call Flipper which we don't have installed and for some reason I do not understand yet this interacts with isNativeProp in isNativeModuleFunction. Adding to react-native.config dependencies: { ...(process.env.NO_FLIPPER // When set, skip flipper includes for iOS archive builds (release buidls) ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), }, seems to have solved this issue. Note sure it will solve your error but thought I'd share. There may be something going on with RNreanimated and the debugger.

[eidan66]

i have this error as well - even though the PropsAllowlist seems to be clearly defined, it would crash every time. I ended up moving the contents of that file (propsAllowLists.ts) directly into the index.ts file, and that worked for some reason. Created a patch to work around it for now

Can you share the patch file, please?

[pandu-supriyono]

i have this error as well - even though the PropsAllowlist seems to be clearly defined, it would crash every time. I ended up moving the contents of that file (propsAllowLists.ts) directly into the index.ts file, and that worked for some reason. Created a patch to work around it for now

Can you share the patch file, please?

Hope this helps

diff --git a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts
index 1e89ea1..557b19f 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts
@@ -3,7 +3,132 @@ import JSReanimated from './JSReanimated';
 import type { StyleProps } from '../commonTypes';
 import type { AnimatedStyle } from '../helperTypes';
 import { isWeb } from '../PlatformChecker';
-import { PropsAllowlists } from '../../propsAllowlists';
+
+type AllowlistsHolder = {
+  UI_THREAD_PROPS_WHITELIST: Record<string, boolean>;
+  NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean>;
+};
+
+const PropsAllowlists: AllowlistsHolder = {
+  /**
+   * Styles allowed to be direcly updated in UI thread
+   */
+  UI_THREAD_PROPS_WHITELIST: {
+    opacity: true,
+    transform: true,
+    /* colors */
+    backgroundColor: true,
+    borderRightColor: true,
+    borderBottomColor: true,
+    borderColor: true,
+    borderEndColor: true,
+    borderLeftColor: true,
+    borderStartColor: true,
+    borderTopColor: true,
+    /* ios styles */
+    shadowOpacity: true,
+    shadowRadius: true,
+    /* legacy android transform properties */
+    scaleX: true,
+    scaleY: true,
+    translateX: true,
+    translateY: true,
+  },
+  /**
+   * Whitelist of view props that can be updated in native thread via UIManagerModule
+   */
+  NATIVE_THREAD_PROPS_WHITELIST: {
+    borderBottomWidth: true,
+    borderEndWidth: true,
+    borderLeftWidth: true,
+    borderRightWidth: true,
+    borderStartWidth: true,
+    borderTopWidth: true,
+    borderWidth: true,
+    bottom: true,
+    flex: true,
+    flexGrow: true,
+    flexShrink: true,
+    height: true,
+    left: true,
+    margin: true,
+    marginBottom: true,
+    marginEnd: true,
+    marginHorizontal: true,
+    marginLeft: true,
+    marginRight: true,
+    marginStart: true,
+    marginTop: true,
+    marginVertical: true,
+    maxHeight: true,
+    maxWidth: true,
+    minHeight: true,
+    minWidth: true,
+    padding: true,
+    paddingBottom: true,
+    paddingEnd: true,
+    paddingHorizontal: true,
+    paddingLeft: true,
+    paddingRight: true,
+    paddingStart: true,
+    paddingTop: true,
+    paddingVertical: true,
+    right: true,
+    start: true,
+    top: true,
+    width: true,
+    zIndex: true,
+    borderBottomEndRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderBottomStartRadius: true,
+    borderRadius: true,
+    borderTopEndRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderTopStartRadius: true,
+    elevation: true,
+    fontSize: true,
+    lineHeight: true,
+    textShadowRadius: true,
+    textShadowOffset: true,
+    letterSpacing: true,
+    aspectRatio: true,
+    columnGap: true, // iOS only
+    end: true, // number or string
+    flexBasis: true, // number or string
+    gap: true,
+    rowGap: true,
+    /* strings */
+    display: true,
+    backfaceVisibility: true,
+    overflow: true,
+    resizeMode: true,
+    fontStyle: true,
+    fontWeight: true,
+    textAlign: true,
+    textDecorationLine: true,
+    fontFamily: true,
+    textAlignVertical: true,
+    fontVariant: true,
+    textDecorationStyle: true,
+    textTransform: true,
+    writingDirection: true,
+    alignContent: true,
+    alignItems: true,
+    alignSelf: true,
+    direction: true, // iOS only
+    flexDirection: true,
+    flexWrap: true,
+    justifyContent: true,
+    position: true,
+    /* text color */
+    color: true,
+    tintColor: true,
+    shadowColor: true,
+    placeholderTextColor: true,
+  },
+};

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let createReactDOMStyle: (style: any) => any;

[Srh07]

I'm facing the same issue after upgrading. The fix of SaatwikRishi seems to work. (importing propsAllowlists differently)

Hoping for a permanent fix soon.

versions: "react-native": "0.72.11", "@react-navigation/drawer": "^6.6.11", "react-native-reanimated": "^3.7.2",

[rohinipf]

We just upgraded to the following versions and are experiencing the exact same issue. Will we be seeing a permanent fix soon as this issue has been ongoing for a while now?

"react-native": "0.73.5", "@react-navigation/drawer": "^6.6.11", "react-native-reanimated": "^3.7.2",

[agraham-wonde]

Also experiencing issue with this, is there a better fix than modifying a dependency?

"@react-navigation/bottom-tabs": "^6.5.7",  
    "@react-navigation/native": "^6.1.6",  
    "@react-navigation/stack": "^6.3.16",  
    "react-native": "0.73.6",  
    "react-native-reanimated": "~3.6.2",  

[anhquan291]

Also facing the same issue with the latest versions!

[BloodyMonkey]

Same problem with 3.10.1, patch seems to fix it