React Native Web + React Native Navigation #2767

taronsarkisyan · 2025-03-07T16:53:37Z

taronsarkisyan
Mar 7, 2025

Is there an existing issue for this?

I have searched the existing issues

Describe the issue

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 (ESBuild, Webpack 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

Console output

`✘ [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 (/var/www/node/node_modules/esbuild/lib/main.js:946:25)
at (/var/www/node/node_modules/esbuild/lib/main.js:1355:9)`

Expected behavior

React Native Navigation works on vanilla React Native on Web 🙂 👍🏻

Steps to reproduce

package	version
@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

Test case

https://github.com/necolas/react-native-web

Additional comments

No response

taronsarkisyan · 2025-03-07T16:58:05Z

taronsarkisyan
Mar 7, 2025
Author

Additional information from React Native Navigation
react-navigation/react-navigation#12474

Additional information from ESBuild
evanw/esbuild#4108

0 replies

dushyanttatva · 2025-04-23T12:05:47Z

dushyanttatva
Apr 23, 2025

@taronsarkisyan
Did your issues get resolved?
I am facing similar issues.

2 replies

shikha-ba May 17, 2025

I'm also facing same issue can you please specify what to use

taronsarkisyan May 18, 2025
Author

For now, I’ve implemented a custom navigation for the web.
It’s probably temporary.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

React Native Web + React Native Navigation #2767

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

React Native Web + React Native Navigation #2767

Uh oh!

taronsarkisyan Mar 7, 2025

Is there an existing issue for this?

Describe the issue

Description

Steps to reproduce

React Native Version

Affected Platforms

Console output

Expected behavior

Steps to reproduce

Test case

Additional comments

Replies: 2 comments · 2 replies

Uh oh!

taronsarkisyan Mar 7, 2025 Author

Uh oh!

dushyanttatva Apr 23, 2025

Uh oh!

shikha-ba May 17, 2025

Uh oh!

taronsarkisyan May 18, 2025 Author

taronsarkisyan
Mar 7, 2025

Replies: 2 comments 2 replies

taronsarkisyan
Mar 7, 2025
Author

dushyanttatva
Apr 23, 2025

taronsarkisyan May 18, 2025
Author