Developer tools
Developer tools to make debugging easier when using React Navigation.
To use the developer tools, install @react-navigation/devtools
:
- npm
- Yarn
- pnpm
npm install @react-navigation/devtools@^5.x
yarn add @react-navigation/devtools@^5.x
pnpm add @react-navigation/devtools@^5.x
API Definition
The package exposes the following APIs:
useReduxDevToolsExtension
This hook provides integration with Redux DevTools Extension. It also works with React Native Debugger app
which includes this extension.
Usage:
To use the hook, import it and pass a ref
to the NavigationContainer
as its argument:
import * as React from 'react';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { useReduxDevToolsExtension } from '@react-navigation/devtools';
export default function App() {
const navigationRef = useNavigationContainerRef();
useReduxDevToolsExtension(navigationRef);
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}
Now, you'll be able to see logs from React Navigation in Redux DevTools Extension, e.g. when you're debugging your app with React Native Debugger app.
The hook only works during development and is disabled in production. You don't need to do anything special to remove it from the production build.