Search code examples
typescriptreact-nativemetro-bundler

How to use react native's platform-specific extensions with typescript?

The problem:

I have a react native custom hook with platform specific code, which I need to import based on the platform. If I import it like import useWifi from 'hooks/use-wifi.android';, everything works fine (on android).

What I've tried:

Following rn's instructions for platform specific code, I have the following file structure

...
hooks
  ...
  use-wifi.android.ts
  use-wifi.ios.ts
...

However, when I try to import it like import useWifi from 'hooks/use-wifi';, typescript type check does not pass, and I get this error in metro:

error: Error: Unable to resolve module `hooks/use-wifi` from `src/screens/home/index.tsx`: hooks/use-wifi could not be found within the project.

I've added a use-wifi.d.ts file with

export * from './use-wifi.android';
export * from './use-wifi.ios';

This allows tsc to pass, but metro still fails to bundle.

I guess I could have a single hooks/use-wifi.ts file and make the code split there, but I'd rather do it this way if possible.

Solution

  • I ran into the same issue and I was able to fix by adding this config to the tsconfig.json inside "compilerOptions"

    "moduleSuffixes": [".ios", ".android", ".native", ""],