dev-plugins icon indicating copy to clipboard operation
dev-plugins copied to clipboard

feat: add navigation visualizer to the react-navigation plugin

Open thomasrebam opened this issue 1 year ago • 4 comments

Why

The goal is to help developers debug their navigation state with an easy to understand representation.

How

I added a new tab in the react-navigation tool, based on what was already done in the two other tabs. The navigation state is retrieved from the plugin's store, recursively browsed to represent each stack, screen, and tab. I temporarily renamed the package to be able to deploy it on our side.

What

The window goes as follows, showing two consecutive navigation states:

Capture d’écran 2024-12-04 à 19 01 20

Identified next steps

  • The UI could be improved depending on what is identified as a need by other developers
  • A capture tool could be added to record the evolution of the navigation stack through a whole user journey in the app

thomasrebam avatar Dec 04 '24 18:12 thomasrebam

that's amazing! the pr has some changes to move the package to @bam.tech/react-navigation-visualizer-dev-plugin. would you like to take over the react navigation plugin from Theodo? i think we are open and welcome for people to maintain plugins.

Kudo avatar Dec 05 '24 16:12 Kudo

Hey Kudo, thanks ! The idea was not initially to override the expo dev plugins react-navigation package, I just changed it temporarily in order to publish it while waiting to be merged here But we sure can maintain the react-navigation plugin from bam.tech, if that is okay for you of course

thomasrebam avatar Dec 06 '24 09:12 thomasrebam

Hey Kudo, thanks ! The idea was not initially to override the expo dev plugins react-navigation package, I just changed it temporarily in order to publish it while waiting to be merged here But we sure can maintain the react-navigation plugin from bam.tech, if that is okay for you of course

i'm sorry that i missed this. yes we are welcome for you to maintain the plugin. please help to create a pr to update README. when the readme and your package are both ready, i will run npm deprecate to deprecate current package and recommend your package. does the plan sound good to you?

Kudo avatar Mar 11 '25 16:03 Kudo

Hey Kudo, np, this sounds good to me! I am closing this PR and I'll open a new one for the README

thomasrebam avatar Mar 27 '25 17:03 thomasrebam

Hey Kudo, np, this sounds good to me! I am closing this PR and I'll open a new one for the README

As said, I close this PR as this PR for Readme modification is open

thomasrebam avatar May 25 '25 16:05 thomasrebam