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
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 peer dependency. To fix this, install the dependency in your project:
npm install 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"
This might happen if you have an old version of the metro-react-native-babel-preset
package. The easiest way to fix it is to delete your lock file and reinstall your dependencies.
If you use npm
:
rm package-lock.json
npm install
If you use yarn
:
rm yarn.lock
yarn
I'm getting an error "null is not an object (evaluating 'RNGestureHandlerModule.default.Direction')"
This and some similar errors might occur if you didn't link the react-native-gesture-handler
library.
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.
Pressing buttons don't do anything
Make sure you're not connected to Chrome Debugger. When connected to Chrome Debugger, you might encounter various issues related to timing, such as button presses and animations not working correctly.
View
Nothing is visible on the screen after adding a If you wrap the container in a View
, make sure the View
stretches to fill the container using flex: 1
:
import * as React from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<View style={{ flex: 1 }}>
<NavigationContainer>{/* ... */}</NavigationContainer>
</View>
);
}
I get the warning "We found non-serializable values in the navigation state"
This can happen if you are passing non-serializable values such as class instances, functions etc. in params. React Navigation warns you in this case because this can break other functionality such state persistence, deep linking etc.
Example of common use cases for passing functions in params are the following:
- To pass a callback to use in a header button. This can be achieved using
navigation.setOptions
instead. See the guide for header buttons for examples. - To pass a callback to the next screen which it can call to pass some data back. You can usually achieve it using
navigate
instead. See the guide for params for examples. - To pass complex data to another screen. Instead of passing the data
params
, you can store that complex data somewhere else (like a global store), and pass an id instead. Then the screen can get the data from the global store using the id.
If you don't use state persistence or deep link to the screen which accepts functions in params, then you can ignore the warning. To ignore it, you can use YellowBox.ignoreWarnings
.
Example:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings([
'We found non-serializable values in the navigation state',
]);