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 23 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
3552f83
feat: add a navigation tree window in the react-navigation plugin
thomasrebam Nov 26, 2024
7f317c0
feat: rename package to visualizer
thomasrebam Nov 28, 2024
aa9cf22
docs: change information to bamtech in the readme
thomasrebam Nov 28, 2024
29a6e66
Merge pull request #1 from thomasrebam/feat/navigation-tree-window
thomasrebam Nov 29, 2024
2a6a4a9
feat: change webui package name
thomasrebam Nov 28, 2024
954ad36
fix: change name to visualizer in the package json
thomasrebam Nov 28, 2024
c6a0c1e
Merge pull request #3 from thomasrebam/feat/navigation-tree-window
thomasrebam Nov 29, 2024
7814556
feat: add state type to the NavigationState as it is returned by acti…
thomasrebam Dec 2, 2024
cdf1116
feat: underlines selected tabs
thomasrebam Dec 2, 2024
78556e1
bump: bump version to deploy tabs handling
thomasrebam Dec 2, 2024
4fd8693
Merge pull request #4 from thomasrebam/feat/handle-tab-selection
thomasrebam Dec 2, 2024
626075b
fix: fix selected tab index
thomasrebam Dec 2, 2024
0f3cf2e
bump: bump version to deploy tabs handling fix
thomasrebam Dec 2, 2024
d574671
Merge pull request #5 from thomasrebam/fix/correct-tab-selection-index
thomasrebam Dec 2, 2024
3773781
feat: add scrolling behavior (#6)
thomasrebam Dec 3, 2024
95f6dd7
Merge pull request #1 from thomasrebam/main
thomasrebam Dec 4, 2024
74cd44c
docs: update documentation to bamlab migration and add illustration (#3)
thomasrebam Dec 4, 2024
51af870
feat: improve the scrolling behavior (#4)
thomasrebam Dec 4, 2024
3cf79d0
docs: fix type in README.md (#5)
flexbox Dec 5, 2024
b5475d2
feat: add different colors to each stack (#6)
thomasrebam Dec 5, 2024
2ee78d8
feat: add pages to the example app (#2)
thomasrebam Dec 13, 2024
a8e59b6
feat: improve stack distinction (#7)
thomasrebam Dec 13, 2024
923fab4
docs: show new features in readme (#8)
thomasrebam Dec 13, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions apps/example/src/app/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';
import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useNavigationContainerRef } from 'expo-router';
import { SplashScreen, Stack, useNavigationContainerRef } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';

export {
// Catch any errors thrown by the Layout component.
Expand Down
8 changes: 8 additions & 0 deletions apps/example/src/app/example-stack/(tabs)/_layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Tabs, usePathname } from 'expo-router';

export default function TabLayout() {
const path = usePathname();
console.log('TabLayout', path);

return <Tabs />;
}
22 changes: 22 additions & 0 deletions apps/example/src/app/example-stack/(tabs)/cards.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function Cards() {
const router = useRouter();

return (
<View>
<Text>Cards</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/a-stack/a-stack-page-1')}
text="Go to a stack page 1"
/>
<Spacer />
<Button onPress={() => router.navigate('/example-stack/(tabs)/home')} text="Go to home" />
</View>
);
}
22 changes: 22 additions & 0 deletions apps/example/src/app/example-stack/(tabs)/home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function Home() {
const router = useRouter();

return (
<View>
<Text>Home</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/a-stack/a-stack-page-1')}
text="Go to a stack page 1"
/>
<Spacer />
<Button onPress={() => router.navigate('/example-stack/(tabs)/cards')} text="Go to cards" />
</View>
);
}
5 changes: 5 additions & 0 deletions apps/example/src/app/example-stack/_layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Stack } from 'expo-router';

export default function ExampleStackLayout() {
return <Stack />;
}
5 changes: 5 additions & 0 deletions apps/example/src/app/example-stack/a-stack/_layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Stack } from 'expo-router';

export default function AStackLayout() {
return <Stack initialRouteName="a-stack-page-1" />;
}
22 changes: 22 additions & 0 deletions apps/example/src/app/example-stack/a-stack/a-stack-page-1.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function AStackPage1() {
const router = useRouter();

return (
<View>
<Text>A Stack Page 1</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/a-stack/a-stack-page-2')}
text="Go to page 2"
/>
<Spacer />
<Button onPress={() => router.replace('/example-stack/(tabs)/home')} text="Go to home" />
</View>
);
}
20 changes: 20 additions & 0 deletions apps/example/src/app/example-stack/a-stack/a-stack-page-2.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function AStackPage2() {
const router = useRouter();

return (
<View>
<Text>A Stack Page 2</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/a-stack/page-3')}
text="Go to page 3"
/>
</View>
);
}
19 changes: 19 additions & 0 deletions apps/example/src/app/example-stack/a-stack/page-3.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function Page3() {
const router = useRouter();
return (
<View>
<Text>Page 3 in the first stack</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/another-stack/another-stack-page-1')}
text="Go to second stack page 1"
/>
</View>
);
}
5 changes: 5 additions & 0 deletions apps/example/src/app/example-stack/another-stack/_layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Stack } from 'expo-router';

export default function AnotherStackLayout() {
return <Stack />;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function AnotherStackPage1() {
const router = useRouter();

return (
<View>
<Text>AStackPage1</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/another-stack/another-stack-page-2')}
text="Go to another stack page 2"
/>
</View>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useNavigation, useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function AnotherStackPage2() {
const router = useRouter();
const navigation = useNavigation();

return (
<View>
<Text>Another Stack Page 2</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/another-stack/page-3')}
text="Go to page 3"
/>
{/* <Spacer />
<Button
onPress={() => router.navigate('/example-stack/another-stack/another-stack-page-1')}
text="Navigate to page 1"
/>
<Spacer />
<Button
onPress={() => navigation.dispatch(StackActions.popTo('another-stack-page-1'))}
text="Pop to to page 1"
/>
<Spacer />
<Button
onPress={() =>
navigation.dispatch(CommonActions.navigateDeprecated('another-stack-page-1'))
}
text="Navigate deprecated to page 1"
/> */}
</View>
);
}
19 changes: 19 additions & 0 deletions apps/example/src/app/example-stack/another-stack/page-3.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function Page3() {
const router = useRouter();
return (
<View>
<Text>Page 3 in the second stack</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/another-stack/page-4')}
text="Go to page 4"
/>
</View>
);
}
32 changes: 32 additions & 0 deletions apps/example/src/app/example-stack/another-stack/page-4.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { CommonActions, StackActions } from '@react-navigation/core';
import { useNavigation, useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function Page4() {
const router = useRouter();
const navigation = useNavigation();

return (
<View>
<Text>Page 4</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/another-stack/page-3')}
text="Navigate to page 3 (but which ?)"
/>
<Spacer />
<Button
onPress={() => navigation.dispatch(StackActions.popTo('page-3'))}
text="Pop to page 3 (but which ?)"
/>
<Spacer />
<Button
onPress={() => navigation.dispatch(CommonActions.navigateDeprecated('page-3'))}
text="Navigate deprecated to page 3 (but which ?)"
/>
</View>
);
}
30 changes: 30 additions & 0 deletions apps/example/src/app/example-stack/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Button } from '@/components/ Button';
import { Spacer } from '@/components/Spacer';
import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

export default function Home() {
const router = useRouter();

return (
<View>
<Text>Home</Text>
<Button onPress={router.back} text="Go back" />
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/a-stack/a-stack-page-1')}
text="Go to a stack page 1"
/>
<Spacer />
<Button
onPress={() => router.navigate('/example-stack/(tabs)/home')}
text="Navigate to home in tabs"
/>
<Spacer />
<Button
onPress={() => router.replace('/example-stack/(tabs)/home')}
text="Replace by home in tabs"
/>
</View>
);
}
1 change: 1 addition & 0 deletions apps/example/src/app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default function TesterScreen() {
<TestCase title="Async Storage" route="/async-storage/" />
<TestCase title="React Native MMKV" route="/react-native-mmkv/" />
<TestCase title="Redux" route="/redux/" />
<TestCase title="Example stacks" route="/example-stack/" />
</View>
</SafeAreaView>
);
Expand Down
14 changes: 14 additions & 0 deletions apps/example/src/components/ Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Pressable, Text } from 'react-native';

type ButtonProps = {
text: string;
onPress: () => void;
};

export const Button = ({ onPress, text }: ButtonProps) => {
return (
<Pressable onPress={onPress} style={{ backgroundColor: 'blue', padding: 8, borderRadius: 4 }}>
<Text style={{ lineHeight: 20, color: 'white' }}>{text}</Text>
</Pressable>
);
};
5 changes: 5 additions & 0 deletions apps/example/src/components/Spacer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { View } from 'react-native';

export const Spacer = ({ size = 8 }: { size?: number }) => {
return <View style={{ height: size, width: size }} />;
};
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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();
Expand All @@ -34,14 +34,22 @@ 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 <Stack />
return <Stack />;
}
```

In this case, `expo-router` automatically manages the navigation container, so you just need to add the DevTool setup in your layout component.

## Launch in Metro

In the metro launcher, type Shift+M to open the dev tools menu, and select `@bam.tech/react-navigation-visualizer-dev-plugin`

The visualization tool is available under the `Navigation Tree` section

![alt text](./assets/visualizer_example.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading