@bam.tech/react-navigation-visualizer-dev-plugin

A Visualization Tool based on Expo DevTools Plugin for React Navigation.

Installation

$3

``bash
npx expo install @bam.tech/react-navigation-visualizer-dev-plugin
`

Usage

$3

#### Integrate react-navigation with the DevTool hook

`jsx
import { useNavigationContainerRef } from '@react-navigation/native';
import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';

export default function App() {
const navigationRef = useNavigationContainerRef();
useReactNavigationDevTools(navigationRef);

return {/ ... /};
}
`

$3

When using expo-router, integrate the DevTool in your main _layout.tsx file. You can import useNavigationContainerRef directly from expo-router and pass it to useReactNavigationDevTools:

`tsx
import { useNavigationContainerRef } from 'expo-router';
import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';

export default function RootLayout() {
const navigationRef = useNavigationContainerRef();
useReactNavigationDevTools(navigationRef);

return ;
}
`

In this case, expo-router automatically manages the navigation container, so you just need to add the DevTool setup in your layout component.

What to do with this plugin ?

$3

In the metro launcher, type Shift+M to open the dev tools menu, and select @bam.tech/react-navigation-visualizer-dev-plugin

The visualization tool is available under the Navigation Tree` section

!alt text

$3

The idea of this plugin is to show your current navigation state, and its evolution during a user's journey through the app.

Three types of elements are represented :

- The stack navigators

!alt text

- The tab navigators

!alt text

- The screens

!alt text

You can see all consecutive navigation states (recorded when the dev plugin is opened), and you can also collapse stacks if needed by clicking them.