How to use with react-native-web

[kopax]

Hi, I use your module in a react-native-app, and I presume I need to mock it when I want to use it with react-native-web, do you guys have an install procedure for web ?

I have this error in jest:

x:3:1)

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    TypeError: (0 , _reactNative.requireNativeComponent) is not a function

      at Object.<anonymous> (node_modules/react-native-safe-area-context/lib/commonjs/NativeSafeAreaProvider.native.tsx:4:16)
      at Object.<anonymous> (node_modules/react-native-safe-area-context/lib/commonjs/SafeAreaContext.tsx:3:1)

[radelcom]

Hi, any updates on this. I recently created a new react-native(with react-native-web )project with NX monorepo setup. It was working with the template project NX provided. However, after adding react-navigation, react-native-safe-area-context and others required for navigation, I started seeing issues when running web.

it works fine on mobile, just wondering if I am missing something in the react-native-web side to get it to work properly?

[belaziv]

same here :(

I have a react native application that i'm trying to use on web but get the following error: Could not load react-native-web/Libraries/Utilities/codegenNativeComponent (imported by node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js)

Here is the answer of react-native-web: https://github.com/necolas/react-native-web/issues/2292#issuecomment-1129340357

[howlettt]

I ran into this error when trying to use Vite with this library and react-native-web

Could not read from file: react-native-web\Libraries\Utilities\codegenNativeComponent

Turned out to be a issue with importing, it wasn't importing the *.web.js files, I added the .web extensions to my Vite config and now it works:

const extensions = [
  ".web.tsx",
  ".tsx",
  ".web.ts",
  ".ts",
  ".web.jsx",
  ".jsx",
  ".web.js",
  ".js",
  ".css",
  ".json",
];

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
    },
  },
  resolve: {
    extensions: extensions,
  },
});

[imWildCat]

@howlettt thank you! My life saver!

[danilrafiqi]

thanks, its works