React Native + React Native Navigation for Web without Expo #49884

taronsarkisyan · 2025-03-07T13:21:36Z

Description

Greetings, everyone.

I can't use the Expo framework due to project requirements.

Is it possible to use React Navigation in a vanilla React Native project that has React Native for Web installed?

The documentation states that this is possible,
but it doesn't explain how exactly:

https://reactnavigation.org/docs/web-support/

Can you provide a minimal example?

An example of React Native Navigation that works without Expo on the Web (Webpack, ESBuild or something else..)

Thanks.

Steps to reproduce

Install vanilla React Native.
Install React Native for Web and React Native Navigation libraries.
Run this in the browser.

I tried to bundle using ESBuild:

...
alias: {
'react-native': 'react-native-web',
},
...

and removed Flow types using this library:
https://www.npmjs.com/package/esbuild-plugin-flow

React Native Version

0.78.0

Affected Platforms

Runtime - Web

package	version
esbuild.	0.25.0.
@react-navigation/native	7.0.15
@react-navigation/bottom-tabs	7.2.1
@react-navigation/native-stack	7.2.1
react-native-screens	4.9.1
react-native-safe-area-context	5.3.0
react-native	0.78.0
react-native-web	0.19.13
node	22.14.0
yarn	1.22.22

Stacktrace or Logs

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js:1:35:
      1 │ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenFooterNativeComponent.js:7:61:
      7 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenContentWrapperNativeComponent.js:7:61:
      7 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenContainerNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaProvider.js:1:35:
      1 │ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenStackNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenStackHeaderConfigNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenStackHeaderSubviewNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenNavigationContainerNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/FullWindowOverlayNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/ReactNative/AppContainer" (originally "react-native/Libraries/ReactNative/AppContainer")

    node_modules/react-native-screens/lib/commonjs/components/DebugContainer.js:9:51:
      9 │ var _AppContainer = _interopRequireDefault(require("react-native/Libraries/ReactNative/AppContainer"));
        ╵                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/ReactNative/AppContainer" was remapped to
  "react-native-web/Libraries/ReactNative/AppContainer" using the alias feature, which then couldn't
  be resolved. Keep in mind that import path aliases are resolved in the current working directory.
  
  You can mark the path "react-native-web/Libraries/ReactNative/AppContainer" as external to exclude
  it from the bundle, which will remove this error and leave the unresolved path in the bundle. You
  can also surround this "require" call with a try/catch block to handle this failure at run-time
  instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/SearchBarNativeComponent.js:9:61:
      9 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeCommands" (originally "react-native/Libraries/Utilities/codegenNativeCommands")

    node_modules/react-native-screens/lib/commonjs/fabric/SearchBarNativeComponent.js:10:60:
      10 │ var _codegenNativeCommands = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeCommands"));
         ╵                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeCommands" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeCommands" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeCommands" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ModalScreenNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

    node_modules/react-native-screens/lib/commonjs/fabric/ScreenNativeComponent.js:8:61:
      8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
        ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
  "react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
  couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
  directory.
  
  You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

1472 |     let { file, line, column } = e.location;
1473 |     let pluginText = e.pluginName ? `[plugin: ${e.pluginName}] ` : "";
1474 |     return `
1475 | ${file}:${line}:${column}: ERROR: ${pluginText}${e.text}`;
1476 |   }).join("");
1477 |   let error = new Error(text);
                     ^
error: Build failed with 15 errors:
node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaProvider.js:1:35: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js:1:35: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
node_modules/react-native-screens/lib/commonjs/components/DebugContainer.js:9:51: ERROR: Could not resolve "react-native-web/Libraries/ReactNative/AppContainer" (originally "react-native/Libraries/ReactNative/AppContainer")
node_modules/react-native-screens/lib/commonjs/fabric/FullWindowOverlayNativeComponent.js:8:61: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
node_modules/react-native-screens/lib/commonjs/fabric/ModalScreenNativeComponent.js:8:61: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
...
      at failureErrorWithLog (/var/www/node/node_modules/esbuild/lib/main.js:1477:15)
      at <anonymous> (/var/www/node/node_modules/esbuild/lib/main.js:946:25)
      at <anonymous> (/var/www/node/node_modules/esbuild/lib/main.js:1355:9)

Reproducer

https://github.com/facebook/react-native

Screenshots and Videos

No response

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

react-native-bot · 2025-03-07T13:22:00Z

Warning

Missing reproducer: 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/upgrade related: a project using our Reproducer Template
Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

brentvatne · 2025-03-07T17:48:39Z

hi there! what are your project requirements that limit you from using expo for this? it could be that you are misunderstanding what expo is, so i can help clarify that if so

cipolleschi · 2025-03-10T09:19:56Z

Also, this is not a question for the React Native core repository. It's better if you open the issue in the React navigation repo

react-native-bot · 2025-03-10T09:20:18Z

Note

Not a bug report: This issue looks like a question. We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux.

taronsarkisyan added the Needs: Triage 🔍 label Mar 7, 2025

react-native-bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Mar 7, 2025

react-native-bot removed the Needs: Triage 🔍 label Mar 7, 2025

cipolleschi closed this as completed Mar 10, 2025

cipolleschi added the Type: Question Issues that are actually questions and not bug reports. label Mar 10, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native + React Native Navigation for Web without Expo #49884

React Native + React Native Navigation for Web without Expo #49884

taronsarkisyan commented Mar 7, 2025 •

edited

Loading

react-native-bot commented Mar 7, 2025

brentvatne commented Mar 7, 2025

cipolleschi commented Mar 10, 2025

react-native-bot commented Mar 10, 2025

React Native + React Native Navigation for Web without Expo #49884

React Native + React Native Navigation for Web without Expo #49884

Comments

taronsarkisyan commented Mar 7, 2025 • edited Loading

Description

Steps to reproduce

React Native Version

Affected Platforms

Stacktrace or Logs

Reproducer

Screenshots and Videos

react-native-bot commented Mar 7, 2025

brentvatne commented Mar 7, 2025

cipolleschi commented Mar 10, 2025

react-native-bot commented Mar 10, 2025

taronsarkisyan commented Mar 7, 2025 •

edited

Loading