Troubleshooting
This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation. These issues may or may not be related to React Navigation itself.
Before troubleshooting an issue, make sure that you have upgraded to the latest available versions of the packages. You can install the latest versions by installing the packages again (e.g. npm install package-name).
I'm getting an error "Unable to resolve module" after updating to the latest version
This might happen for 3 reasons:
Stale cache of Metro bundler
If the module points to a local file (i.e. the name of the module starts with ./), then it's probably due to stale cache. To fix this, try the following solutions.
If you're using Expo, run:
expo start -c
If you're not using Expo, run:
npx react-native start --reset-cache
If that doesn't work, you can also try the following:
rm -rf $TMPDIR/metro-bundler-cache-*
Missing peer dependency
If the module points to an npm package (i.e. the name of the module doesn't with ./), then it's probably due to a missing dependency. To fix this, install the dependency in your project:
npm
yarn
pnpm
bun
npm install name-of-the-module
yarn add name-of-the-module
pnpm add name-of-the-module
bun add name-of-the-module
Sometimes it might even be due to a corrupt installation. If clearing cache didn't work, try deleting your node_modules folder and run npm install again.
Missing extensions in metro configuration
Sometimes the error may look like this:
Error: While trying to resolve module "@react-navigation/native" from file "/path/to/src/App.js", the package "/path/to/node_modules/@react-navigation/native/package.json" was successfully found. However, this package itself specifies a "main" module field that could not be resolved ("/path/to/node_modules/@react-navigation/native/src/index.tsx"
This can happen if you have a custom configuration for metro and haven't specified ts and tsx as valid extensions. These extensions are present in the default configuration. To check if this is the issue, look for a metro.config.js file in your project and check if you have specified the sourceExts option. It should at least have the following configuration:
sourceExts: ['js', 'json', 'ts', 'tsx'];
If it's missing these extensions, add them and then clear metro cache as shown in the section above.
I'm getting "SyntaxError in @react-navigation/xxx/xxx.tsx" or "SyntaxError: /xxx/@react-navigation/xxx/xxx.tsx: Unexpected token"
This might happen if you have an old version of the metro-react-native-babel-preset package. Try upgrading it to the latest version.
- npm
- yarn
- pnpm
- bun
npm install --save-dev metro-react-native-babel-preset
yarn add --dev metro-react-native-babel-preset
pnpm add --save-dev metro-react-native-babel-preset
bun add --dev metro-react-native-babel-preset
If you have @babel/core installed, also upgrade it to latest version.
- npm
- yarn
- pnpm
- bun
npm install --save-dev @babel/core
yarn add --dev @babel/core
pnpm add --save-dev @babel/core
bun add --dev @babel/core
If upgrading the packages don't help, you can also try deleting your node_modules as well as lock the file and reinstall your dependencies.
If you use npm:
rm -rf node_modules
rm package-lock.json
npm install
If you use yarn:
rm -rf node_modules
rm yarn.lock
yarn
After upgrading or reinstalling the packages, you should also clear Metro bundler's cache following the instructions earlier in the page.
I'm getting "Module '[...]' has no exported member 'xxx' when using TypeScript
This might happen if you have an old version of TypeScript in your project. You can try upgrading it:
- npm
- yarn
- pnpm
- bun
npm install --save-dev typescript
yarn add --dev typescript
pnpm add --save-dev typescript
bun add --dev typescript
I'm getting an error "null is not an object (evaluating 'RNGestureHandlerModule.default.Direction')"
This and some similar errors might occur if you have a bare React Native project and the library react-native-gesture-handler library isn't linked.
Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
react-native unlink react-native-gesture-handler
If you're testing on iOS and use Mac, make sure you have run pod install in the ios/ folder:
cd ios
pod install
cd ..
Now rebuild the app and test on your device or simulator.