Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add navigation visualizer to the react-navigation plugin #55

Open
wants to merge 26 commits into
base: main
Choose a base branch
from

Conversation

thomasrebam
Copy link

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 and others added 19 commits November 26, 2024 14:30
feat: add navigation stack visualizer to the react-navigation
fix: rename webui of navigation tree tab
* feat: add scrolling behavior to the navigation tree

* bump: bump version to handle scroll
migrate react-navigation-visualizer-dev-plugin to a bam.tech repo
* feat: add bamlab repo as a link to the npm package

* docs: add illustration for navigation visualizer
* feat: improve scrolling behavior - make stack start from the bottom

* bump: bump version to improve scrolling
@Kudo
Copy link
Collaborator

Kudo commented Dec 5, 2024

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.

@thomasrebam
Copy link
Author

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

* feat: use navigation visualizer

* feat: add new pages to the example app
* feat: remove top of the stacks to distinguish stacks better

* feat: add space between each color for better distinction

* feat: represent tabs by stacking pages horizontally

* feat: represent selected tab by a dotted border

* feat: add a legend to clarify the used objects
* feat: update docs with last visualizer features

* bump: bump npm version
* chore: remove unecessary styling

* feat: make stacks collapsible

* refactor: add color prop to Node container

* refactor: add color prop to Leaf Container

* refactor: add color prop to Selected Leaf Container

* refactor: add selected prop to leaf title

* refactor: extract legend color

* refactor: remove unuseful logs

* feat: center collapsed stack title

* feat: highlight hovered stacks

* feat: update colors calculation
* docs: update readme with a short description of what's in the plugin

* chore: bump plugin version
@Kudo
Copy link
Collaborator

Kudo commented Mar 11, 2025

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants