diff --git a/packages/react-navigation/.eslintrc.js b/packages/react-navigation-visualizer/.eslintrc.js
similarity index 100%
rename from packages/react-navigation/.eslintrc.js
rename to packages/react-navigation-visualizer/.eslintrc.js
diff --git a/packages/react-navigation/README.md b/packages/react-navigation-visualizer/README.md
similarity index 72%
rename from packages/react-navigation/README.md
rename to packages/react-navigation-visualizer/README.md
index 09b4e5a..dcc3601 100644
--- a/packages/react-navigation/README.md
+++ b/packages/react-navigation-visualizer/README.md
@@ -1,13 +1,13 @@
-# @dev-plugins/react-navigation
+# @bam.tech/react-navigation-visualizer-dev-plugin
-A React Navigation DevTool that can run in an Expo App
+A Visualization Tool based on Expo DevTools Plugin for React Navigation.
## Installation
### Add the package to your project
```bash
-npx expo install @dev-plugins/react-navigation
+npx expo install@bam.tech/react-navigation-visualizer-dev-plugin
```
## Usage
@@ -18,7 +18,7 @@ npx expo install @dev-plugins/react-navigation
```jsx
import { useNavigationContainerRef } from '@react-navigation/native';
-import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';
+import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';
export default function App() {
const navigationRef = useNavigationContainerRef();
@@ -34,13 +34,13 @@ When using `expo-router`, integrate the DevTool in your main `_layout.tsx` file.
```tsx
import { useNavigationContainerRef } from 'expo-router';
-import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';
+import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';
export default function RootLayout() {
const navigationRef = useNavigationContainerRef();
useReactNavigationDevTools(navigationRef);
- return
+ return ;
}
```
diff --git a/packages/react-navigation/babel.config.js b/packages/react-navigation-visualizer/babel.config.js
similarity index 100%
rename from packages/react-navigation/babel.config.js
rename to packages/react-navigation-visualizer/babel.config.js
diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.d.ts b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts
similarity index 100%
rename from packages/react-navigation/build/ReduxExtensionAdapter.d.ts
rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts
diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.d.ts.map b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts.map
similarity index 100%
rename from packages/react-navigation/build/ReduxExtensionAdapter.d.ts.map
rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts.map
diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.js b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js
similarity index 100%
rename from packages/react-navigation/build/ReduxExtensionAdapter.js
rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js
diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.js.map b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js.map
similarity index 100%
rename from packages/react-navigation/build/ReduxExtensionAdapter.js.map
rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js.map
diff --git a/packages/react-navigation/build/index.d.ts b/packages/react-navigation-visualizer/build/index.d.ts
similarity index 100%
rename from packages/react-navigation/build/index.d.ts
rename to packages/react-navigation-visualizer/build/index.d.ts
diff --git a/packages/react-navigation/build/index.d.ts.map b/packages/react-navigation-visualizer/build/index.d.ts.map
similarity index 100%
rename from packages/react-navigation/build/index.d.ts.map
rename to packages/react-navigation-visualizer/build/index.d.ts.map
diff --git a/packages/react-navigation/build/index.js b/packages/react-navigation-visualizer/build/index.js
similarity index 100%
rename from packages/react-navigation/build/index.js
rename to packages/react-navigation-visualizer/build/index.js
diff --git a/packages/react-navigation/build/index.js.map b/packages/react-navigation-visualizer/build/index.js.map
similarity index 100%
rename from packages/react-navigation/build/index.js.map
rename to packages/react-navigation-visualizer/build/index.js.map
diff --git a/packages/react-navigation/build/useReactNavigationDevTools.d.ts b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts
similarity index 100%
rename from packages/react-navigation/build/useReactNavigationDevTools.d.ts
rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts
diff --git a/packages/react-navigation/build/useReactNavigationDevTools.d.ts.map b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts.map
similarity index 100%
rename from packages/react-navigation/build/useReactNavigationDevTools.d.ts.map
rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts.map
diff --git a/packages/react-navigation/build/useReactNavigationDevTools.js b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.js
similarity index 100%
rename from packages/react-navigation/build/useReactNavigationDevTools.js
rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.js
diff --git a/packages/react-navigation/build/useReactNavigationDevTools.js.map b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.js.map
similarity index 100%
rename from packages/react-navigation/build/useReactNavigationDevTools.js.map
rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.js.map
diff --git a/packages/react-navigation/expo-module.config.json b/packages/react-navigation-visualizer/expo-module.config.json
similarity index 100%
rename from packages/react-navigation/expo-module.config.json
rename to packages/react-navigation-visualizer/expo-module.config.json
diff --git a/packages/react-navigation/package.json b/packages/react-navigation-visualizer/package.json
similarity index 73%
rename from packages/react-navigation/package.json
rename to packages/react-navigation-visualizer/package.json
index aef9cfc..1c472e3 100644
--- a/packages/react-navigation/package.json
+++ b/packages/react-navigation-visualizer/package.json
@@ -1,7 +1,7 @@
{
- "name": "@dev-plugins/react-navigation",
- "version": "0.1.0",
- "description": "Expo DevTools Plugin for React Navigation",
+ "name": "@bam.tech/react-navigation-visualizer-dev-plugin",
+ "version": "0.1.4",
+ "description": "Visualization Tool based on Expo DevTools Plugin for React Navigation",
"main": "build/index.js",
"types": "build/index.d.ts",
"sideEffects": false,
@@ -10,20 +10,20 @@
"clean": "expo-module clean",
"lint": "expo-module lint",
"test": "expo-module test",
- "prepare": "expo-module prepare && node ../../scripts/build-webui.js react-navigation",
+ "prepare": "expo-module prepare && node ../../scripts/build-webui.js react-navigation-visualizer",
"prepublishOnly": "expo-module prepublishOnly",
"expo-module": "expo-module"
},
"homepage": "https://docs.expo.dev/versions/latest/sdk/image/",
"repository": {
"type": "git",
- "url": "git+https://github.com/expo/dev-plugins.git",
- "directory": "packages/react-navigation"
+ "url": "git+https://github.com/thomasrebam/dev-plugins.git",
+ "directory": "packages/react-navigation-visualizer"
},
"keywords": [
"expo",
"devtools",
- "react-navigation"
+ "react-navigation-visualizer"
],
"files": [
"build",
diff --git a/packages/react-navigation/src/ReduxExtensionAdapter.ts b/packages/react-navigation-visualizer/src/ReduxExtensionAdapter.ts
similarity index 100%
rename from packages/react-navigation/src/ReduxExtensionAdapter.ts
rename to packages/react-navigation-visualizer/src/ReduxExtensionAdapter.ts
diff --git a/packages/react-navigation/src/index.ts b/packages/react-navigation-visualizer/src/index.ts
similarity index 100%
rename from packages/react-navigation/src/index.ts
rename to packages/react-navigation-visualizer/src/index.ts
diff --git a/packages/react-navigation/src/useReactNavigationDevTools.ts b/packages/react-navigation-visualizer/src/useReactNavigationDevTools.ts
similarity index 100%
rename from packages/react-navigation/src/useReactNavigationDevTools.ts
rename to packages/react-navigation-visualizer/src/useReactNavigationDevTools.ts
diff --git a/packages/react-navigation/tsconfig.json b/packages/react-navigation-visualizer/tsconfig.json
similarity index 100%
rename from packages/react-navigation/tsconfig.json
rename to packages/react-navigation-visualizer/tsconfig.json
diff --git a/packages/react-navigation/webui/app.json b/packages/react-navigation-visualizer/webui/app.json
similarity index 52%
rename from packages/react-navigation/webui/app.json
rename to packages/react-navigation-visualizer/webui/app.json
index 813ee76..0eac605 100644
--- a/packages/react-navigation/webui/app.json
+++ b/packages/react-navigation-visualizer/webui/app.json
@@ -4,7 +4,7 @@
"bundler": "metro"
},
"experiments": {
- "baseUrl": "/_expo/plugins/@dev-plugins/react-navigation"
+ "baseUrl": "/_expo/plugins/@bam.tech/react-navigation-visualizer-dev-plugin"
}
}
}
diff --git a/packages/react-navigation/webui/babel.config.js b/packages/react-navigation-visualizer/webui/babel.config.js
similarity index 100%
rename from packages/react-navigation/webui/babel.config.js
rename to packages/react-navigation-visualizer/webui/babel.config.js
diff --git a/packages/react-navigation/webui/index.js b/packages/react-navigation-visualizer/webui/index.js
similarity index 100%
rename from packages/react-navigation/webui/index.js
rename to packages/react-navigation-visualizer/webui/index.js
diff --git a/packages/react-navigation/webui/metro.config.js b/packages/react-navigation-visualizer/webui/metro.config.js
similarity index 100%
rename from packages/react-navigation/webui/metro.config.js
rename to packages/react-navigation-visualizer/webui/metro.config.js
diff --git a/packages/react-navigation/webui/package.json b/packages/react-navigation-visualizer/webui/package.json
similarity index 84%
rename from packages/react-navigation/webui/package.json
rename to packages/react-navigation-visualizer/webui/package.json
index ea1fb4b..2beb3bc 100644
--- a/packages/react-navigation/webui/package.json
+++ b/packages/react-navigation-visualizer/webui/package.json
@@ -1,6 +1,6 @@
{
- "name": "@dev-plugins/react-navigation-webui",
- "description": "The frontend webui for @dev-plugins/react-navigation",
+ "name": "@bam.tech/react-navigation-visualizer-dev-plugin-webui",
+ "description": "The frontend webui for @bam.tech/react-navigation-visualizer-dev-plugin",
"private": true,
"version": "0.1.0",
"main": "index.js",
diff --git a/packages/react-navigation/webui/src/App.tsx b/packages/react-navigation-visualizer/webui/src/App.tsx
similarity index 83%
rename from packages/react-navigation/webui/src/App.tsx
rename to packages/react-navigation-visualizer/webui/src/App.tsx
index 8a31478..c667a8d 100644
--- a/packages/react-navigation/webui/src/App.tsx
+++ b/packages/react-navigation-visualizer/webui/src/App.tsx
@@ -1,12 +1,12 @@
-import { Layout, Tabs, theme as antTheme, ThemeConfig } from 'antd';
import { ThemeProvider } from '@emotion/react';
import styled from '@emotion/styled';
+import { theme as antTheme, Layout, Tabs, ThemeConfig } from 'antd';
import * as React from 'react';
-import { theme } from './theme';
-
import { LinkingTester } from './LinkingTester';
import { Logs } from './Logs';
+import { NavigationTree } from './NavigationTree';
+import { theme } from './theme';
import { usePluginStore } from './usePluginStore';
declare module '@emotion/react' {
@@ -31,6 +31,9 @@ export default function App() {
Linking} key="linking">
+ Stack Visualization} key="navigationTree">
+
+
diff --git a/packages/react-navigation/webui/src/LinkingTester.tsx b/packages/react-navigation-visualizer/webui/src/LinkingTester.tsx
similarity index 100%
rename from packages/react-navigation/webui/src/LinkingTester.tsx
rename to packages/react-navigation-visualizer/webui/src/LinkingTester.tsx
diff --git a/packages/react-navigation/webui/src/Logs.tsx b/packages/react-navigation-visualizer/webui/src/Logs.tsx
similarity index 100%
rename from packages/react-navigation/webui/src/Logs.tsx
rename to packages/react-navigation-visualizer/webui/src/Logs.tsx
diff --git a/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx b/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx
new file mode 100644
index 0000000..a588c4e
--- /dev/null
+++ b/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx
@@ -0,0 +1,145 @@
+import styled from '@emotion/styled';
+import { Layout, Typography } from 'antd';
+import * as React from 'react';
+
+import { Sidebar } from './Sidebar';
+import type { NavigationState, StoreType } from './types';
+
+type Props = StoreType;
+
+export function NavigationTree({ logs }: Props) {
+ const currentNavigationItem = logs[logs.length - 1];
+ const previousNavigationItem = logs[logs.length - 2];
+
+ const currentNavigationItemState = currentNavigationItem?.state;
+ const previousNavigationItemState = previousNavigationItem?.state;
+
+ const hasCurrentItem = !!currentNavigationItem && currentNavigationItemState;
+ const hasPreviousItem = !!previousNavigationItem && previousNavigationItemState;
+
+ return (
+
+
+
+
+ Previous state
+
+ {hasPreviousItem && }
+
+
+
+ Current state
+
+ {hasCurrentItem && }
+
+
+
+
+ {hasCurrentItem ? (
+
+ ) : null}
+
+ );
+}
+
+const Container = styled.div({
+ display: 'flex',
+ overflow: 'auto',
+ flexDirection: 'row',
+ flex: 1,
+});
+
+const HalfContainer = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ overflow: 'auto',
+ justifyContent: 'space-between',
+ height: '100%',
+ flex: 1,
+});
+
+const HalfContent = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ overflow: 'auto',
+ justifyContent: 'flex-end',
+ height: '100%',
+ flex: 1,
+});
+
+const Spacer = styled.div({
+ height: 4,
+});
+
+const LeafContainer = styled.div(({ theme: antdTheme }) => ({
+ display: 'flex',
+ backgroundColor: antdTheme.token?.colorPrimary,
+ borderRadius: 4,
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: 8,
+}));
+
+const LeafTitle = styled(Typography.Text)({
+ color: 'white',
+});
+
+const Leaf = ({ title, isSelectedTab }: { title: string; isSelectedTab?: boolean }) => {
+ return (
+
+
+ {title}
+
+
+ );
+};
+
+const NodeContainer = styled.div(({ theme: antdTheme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ borderRadius: 4,
+ borderWidth: 1,
+ border: 'solid',
+ borderColor: antdTheme.token?.colorPrimary,
+ padding: 8,
+}));
+
+const NodeTitle = styled(Typography)(({ theme }) => ({
+ color: theme.token?.colorPrimary,
+ alignSelf: 'flex-start',
+}));
+
+const Node = ({ name, state }: { name: string; state: NavigationState }) => {
+ const routes = state.routes;
+ if (!routes || !routes.length) {
+ return ;
+ }
+
+ return (
+
+ {routes.toReversed().map((route, index) => (
+
+ {route.state?.routes && route.state.routes.length ? (
+
+ ) : (
+
+ )}
+
+
+ ))}
+
+ {name}
+
+ );
+};
diff --git a/packages/react-navigation/webui/src/RouteMap.tsx b/packages/react-navigation-visualizer/webui/src/RouteMap.tsx
similarity index 100%
rename from packages/react-navigation/webui/src/RouteMap.tsx
rename to packages/react-navigation-visualizer/webui/src/RouteMap.tsx
diff --git a/packages/react-navigation/webui/src/Sidebar.tsx b/packages/react-navigation-visualizer/webui/src/Sidebar.tsx
similarity index 100%
rename from packages/react-navigation/webui/src/Sidebar.tsx
rename to packages/react-navigation-visualizer/webui/src/Sidebar.tsx
diff --git a/packages/react-navigation/webui/src/Typography.tsx b/packages/react-navigation-visualizer/webui/src/Typography.tsx
similarity index 100%
rename from packages/react-navigation/webui/src/Typography.tsx
rename to packages/react-navigation-visualizer/webui/src/Typography.tsx
diff --git a/packages/react-navigation/webui/src/theme.tsx b/packages/react-navigation-visualizer/webui/src/theme.tsx
similarity index 100%
rename from packages/react-navigation/webui/src/theme.tsx
rename to packages/react-navigation-visualizer/webui/src/theme.tsx
diff --git a/packages/react-navigation/webui/src/types.ts b/packages/react-navigation-visualizer/webui/src/types.ts
similarity index 98%
rename from packages/react-navigation/webui/src/types.ts
rename to packages/react-navigation-visualizer/webui/src/types.ts
index 02dc5b1..9ad7a42 100644
--- a/packages/react-navigation/webui/src/types.ts
+++ b/packages/react-navigation-visualizer/webui/src/types.ts
@@ -9,6 +9,7 @@ export type NavigationState = {
key: string;
index: number;
routes: NavigationRoute[];
+ type: string;
};
export type NavigationAction = {
diff --git a/packages/react-navigation/webui/src/usePluginStore.ts b/packages/react-navigation-visualizer/webui/src/usePluginStore.ts
similarity index 100%
rename from packages/react-navigation/webui/src/usePluginStore.ts
rename to packages/react-navigation-visualizer/webui/src/usePluginStore.ts
diff --git a/packages/react-navigation/webui/tsconfig.json b/packages/react-navigation-visualizer/webui/tsconfig.json
similarity index 100%
rename from packages/react-navigation/webui/tsconfig.json
rename to packages/react-navigation-visualizer/webui/tsconfig.json