feat: add navigation visualizer to the react-navigation plugin #55
Conversation
feat: add navigation stack visualizer to the react-navigation
fix: rename webui of navigation tree tab
feat: handle tab selection
fix: correct tab selection index
* 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
|
that's amazing! |
|
Hey Kudo, thanks ! |
* 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
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 |
|
Hey Kudo, np, this sounds good to me! |
* feat: bump expo sdk 53 (expo#66) SDK 53 has a breaking change to devtools client transport. We have to bump the version for dev-plugins packages - update packages to expo sdk 53 - fix typescript errors and lint errors - apply workaround for antd: expo/expo#36551 (comment) * fix: fix prepare-package script to run with bun * chore: remove dependency to react-navigation to let expo-router hanlde it in example app * feat: bump expo to last version * chore: bump npm version --------- Co-authored-by: Kudo Chien <[email protected]>
| path.resolve(workspaceRoot, 'node_modules'), | ||
| ]; | ||
| config.resolver.disableHierarchicalLookup = true; | ||
| // Workaround for antd: https://github.com/expo/expo/discussions/36551#discussioncomment-13015890 |
There was a problem hiding this comment.
Shouldn't be needed anymore with [email protected]: expo/expo#36551 (reply in thread)
There was a problem hiding this comment.
Yes you're right! I'll do the update now
As said, I close this PR as this PR for Readme modification is open |
4 participants
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:
Identified next steps