ERROR Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist. (DrawerAndroid)

[ghost]

Description

 ERROR  Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist. 

If you're trying to use a module that is not supported in Expo Go, you need to create a development build of your app. See https://docs.expo.dev/development/introduction/ for more info.
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
Error: Unable to resolve module ./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid from /Users/mbsousr/Documents/panda-parking-app/node_modules/react-native/index.js: 

None of these files exist:
  * node_modules/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.cjs|.cjs)
  * node_modules/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.cjs|.cjs)
  15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
  16 | import typeof Button from './Libraries/Components/Button';
> 17 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
     |                                         ^
  18 | import typeof FlatList from './Libraries/Lists/FlatList';
  19 | import typeof Image from './Libraries/Image/Image';
  20 | import typeof ImageBackground from './Libraries/Image/ImageBackground';
    at ModuleResolver.resolveDependency (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
    at Graph._processModule (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Graph._addDependency (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
    at async Promise.all (index 4)
    at async Graph._processModule (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/DeltaBundler/Graph.js:322:5)
    at async Graph._addDependency (/Users/mbsousr/Documents/panda-parking-app/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
Error: Unable to resolve module ./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid from /Users/mbsousr/Documents/panda-parking-app/node_modules/react-native/index.js: 

React Native Version

0.71.7

Output of npx react-native info

System: OS: macOS 14.1.1 CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz Memory: 825.24 MB / 8.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 21.2.0 path: ~/.nvm/versions/node/v21.2.0/bin/node Yarn: version: 1.22.21 path: ~/.nvm/versions/node/v21.2.0/bin/yarn npm: version: 10.2.3 path: ~/.nvm/versions/node/v21.2.0/bin/npm Watchman: version: 2023.11.20.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /Users/mbsousr/.rbenv/shims/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: Not Found Xcode: version: 15.0.1/15A507 path: /usr/bin/xcodebuild Languages: Java: version: 17.0.9 path: /usr/bin/javac Ruby: version: 2.7.6 path: /Users/mbsousr/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.7 wanted: 0.72.7 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: false newArchEnabled: false

(node:31972) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. (Use node --trace-deprecation ... to show where the warning was created)

Steps to reproduce

1. Import necessary modules and components from React, React Native, and other libraries.
   • Notable imports include SafeAreaView, GluestackUIProvider, useFonts from expo-font, SplashScreen from expo-splash-screen, and various font styles from @expo-google-fonts/inter.

2.Define State:

• Use the useState hook to manage the application's color mode state ("dark" or "light").
• Initialize the default color mode as "light".

3.Load Asynchronous Fonts:

• Use the useFonts hook from expo-font to load asynchronous fonts required for the application.
• Ensure to wait until the fonts are loaded before proceeding.

4.Prevent Automatic Hiding of Splash Screen:

• Use the SplashScreen.preventAutoHideAsync() method from expo-splash-screen to prevent automatic hiding of the splash screen.
• This allows you to perform asynchronous tasks, such as data loading, before hiding the splash screen.

5.Execute Asynchronous Tasks:

• In the useEffect block, execute necessary asynchronous tasks after initialization, such as loading data or performing other asynchronous operations.
• Wait for the completion of these tasks before proceeding.

6.Manually Hide the Splash Screen:

• Use SplashScreen.hideAsync() to manually hide the splash screen after the completion of asynchronous tasks.

7.Render Main Component:

• After completing all initializations, render the main component of the application.
• Ensure that fonts are loaded before proceeding to ensure proper rendering.

8.Provide Theme Context:

• Use GluestackUIProvider to provide the application theme based on specific configurations.
• Use ThemeContext.Provider to provide the color mode and color mode toggle function to descendant components.

9.Toggle Color Mode:

• Implement the toggleColorMode function to toggle between "dark" and "light" color modes as needed.
• Render Child Components:
• Render the child components of the application within the theme context provider and outside the top and bottom safe areas.

Snack, screenshot, or link to a repository

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.14. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[ashermja]

I have the same problem, running react-native "0.72.3". The problem seems to be specifically related to xcode 15/ Sonoma, is this a regression of this issue that was fixed for xcode 14.3? https://github.com/facebook/react-native/issues/36635

[github-actions[bot]]

:warning:	Issue is Related to Expo
:information_source:	It looks like your issue is related to Expo and not React Native core. Please open your issue in Expo's repository. If you are able to create a repro that showcases that this issue is also happening in React Native vanilla, we will be happy to re-open.

[ernestofuk]

i have the same issue, exist some solution?

[kirushi]

Facing the above issue...

Error source.uri should not be an empty string Error: Unable to resolve module ./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid from /Users/kirushi/Fetch/fetch/node_modules/react-native/index.js:

Dependencies React-native: 0.72.10 Expo: 49.0.0

[JJSLIoT]

Facing the same after RN upgrade from 71 to 72.

Error

Unable to resolve module ./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid from 
/Users/.../node_modules/react-native/index.js:

None of these files exist:
  * node_modules/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid(.rnrb.js|.native.js|.js|.rnrb.ts|.native.ts|.ts|.rnrb.jsx|.native.jsx|.jsx|.rnrb.tsx|.native.tsx|.tsx|.rnrb.mjs|.native.mjs|.mjs|.rnrb.cjs|.native.cjs|.cjs|.rnrb.htm|.native.htm|.htm|.rnrb.html|.native.html|.html|.rnrb.css|.native.css|.css|.rnrb.bmp|.native.bmp|.bmp|.rnrb.gif|.native.gif|.gif|.rnrb.png|.native.png|.png|.rnrb.jpg|.native.jpg|.jpg|.rnrb.jpeg|.native.jpeg|.jpeg|.rnrb.webp|.native.webp|.webp|.rnrb.svg|.native.svg|.svg|.rnrb.txt|.native.txt|.txt|.rnrb.md|.native.md|.md|.rnrb.json|.native.json|.json|.rnrb.wasm|.native.wasm|.wasm)
  * node_modules/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid/index(.rnrb.js|.native.js|.js|.rnrb.ts|.native.ts|.ts|.rnrb.jsx|.native.jsx|.jsx|.rnrb.tsx|.native.tsx|.tsx|.rnrb.mjs|.native.mjs|.mjs|.rnrb.cjs|.native.cjs|.cjs|.rnrb.htm|.native.htm|.htm|.rnrb.html|.native.html|.html|.rnrb.css|.native.css|.css|.rnrb.bmp|.native.bmp|.bmp|.rnrb.gif|.native.gif|.gif|.rnrb.png|.native.png|.png|.rnrb.jpg|.native.jpg|.jpg|.rnrb.jpeg|.native.jpeg|.jpeg|.rnrb.webp|.native.webp|.webp|.rnrb.svg|.native.svg|.svg|.rnrb.txt|.native.txt|.txt|.rnrb.md|.native.md|.md|.rnrb.json|.native.json|.json|.rnrb.wasm|.native.wasm|.wasm)
  115 |   // $FlowFixMe[value-as-type]
  116 |   get DrawerLayoutAndroid(): DrawerLayoutAndroid {
> 117 |     return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid');
      |                     ^
  118 |   },
  119 |   get FlatList(): FlatList {
  120 |     return require('./Libraries/Lists/FlatList');

Dependencies

react-native: 0.72.6 expo: 49.0.18

Platforms

Android and iOS both

[JJSLIoT]

Can we re-open this issue?

[renatovicencion]

any solution for this issue?, I realized that this error is displayed only on iOS, on Android this error does not appear. so if the application is used at a certain point the console compilation exits as it does not find those libraries that are from android