react-native-reanimated: Requiring unknown module "undefined" ( isNativeModule Function )

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 image

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

About this issue

  • Original URL
  • State: open
  • Created 7 months ago
  • Reactions: 4
  • Comments: 18 (1 by maintainers)

Most upvoted comments

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

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;

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.