feat(react-navigation-plugin): add a navigation state visualizer#119
Conversation
|
@thomasrebam is attempting to deploy a commit to the Callstack Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
thomasrebam
force-pushed
the
feat/add-navigation-tree
branch
from
f7eca41 to
11e0233
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
V3RON
left a comment
V3RON
left a comment
There was a problem hiding this comment.
Woah, this looks like a really useful tool and a great addition to this plugin 👏
I left a couple of small comments regarding potential improvements. Let me know what you think.
| type Props = { | ||
| actionHistory: ActionWithState[]; | ||
| }; |
There was a problem hiding this comment.
| type Props = { | |
| actionHistory: ActionWithState[]; | |
| }; | |
| export type NavigationTreeProps = { | |
| actionHistory: ActionWithState[]; | |
| }; |
| <div | ||
| className={`items-stretch flex flex-col rounded-sm cursor-pointer bg-transparent border-2 border-solid p-1 text-center border-${color}-600 ${ | ||
| isClosed ? '' : 'border-t-0 rounded-t-none' | ||
| } hover:bg-${color}-600 hover:bg-opacity-30`} |
There was a problem hiding this comment.
Right now, if you hover over one of the states, all nodes trigger their 'hover' states. Should we change it so that if you hover over 'BottomTabs', only it and its children are highlighted?
There was a problem hiding this comment.
Yes, sure!
I did not manage to find a nice solution with tailwind and pseudo-selectors, so I used mouse events directly, but I changed the behavior so parent nodes are not hovered if their children are.
| onClick: (e: React.MouseEvent<HTMLDivElement>) => void; | ||
| }) => { | ||
| return ( | ||
| <div |
There was a problem hiding this comment.
Let's use buttons, as divs are not meant to be clickable.
|
Hey, @V3RON |
|
Hey @thomasrebam 👋 Thanks for the contribution 🎉 |
2 participants
Add a navigation state visualizer
The goal of this feature is to improve state visualization, as JSON visualization can be unclear and does not show history evolutions. This window already exists in our fork of the react-navigation expo dev plugin.
I think representing the navigation state as a stack helps grasping the effects of navigations events, in particular native go-backs.
Features
Demo
Enregistrement.de.l.ecran.2025-10-02.a.19.31.07.mov
Future ideas
I added here the base of what was done in our plugin, but a few more things could be added, such as: