Skip to content

README.md

Latest commit

 

History

History
100 lines (61 loc) · 3.1 KB

README.md

File metadata and controls

100 lines (61 loc) · 3.1 KB

DevTools Plugins

  • This repo is a collection of Expo DevTools Plugins maintained on the BamLab repository
  • This repo is a fork from the expo/dev-plugin repository

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

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

Installation

Add the package to your project

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

Usage

Using with react-navigation

Integrate react-navigation with the DevTool hook
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 <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>;
}

Using with expo-router

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:

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 <Stack />;
}

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 ?

Launch in Metro

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 Stack Visualization section

alt text

What's in my stack ?

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.

Contributing

Example App

The example app is an Expo Router app that provides test cases for plugins

  • Expo Router is based on React Navigation, so you can just test @bam.tech/react-navigation-visualizer-dev-plugin from visiting different screens from the app.

How to run the example app

$ git clone https://github.com/bamlab/dev-plugins.git
$ cd dev-plugins
$ cd apps/example
$ bun run ios
$ bun run android