feat: add pages to the example app (#2)

* feat: use navigation visualizer

* feat: add new pages to the example app

Author: thomasrebam

apps/example/src/app/_layout.tsx

@@ -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.

apps/example/src/app/example-stack/(tabs)/_layout.tsx

@@ -0,0 +1,8 @@
+import { Tabs, usePathname } from 'expo-router';
+
+export default function TabLayout() {
+  const path = usePathname();
+  console.log('TabLayout', path);
+
+  return <Tabs />;
+}

apps/example/src/app/example-stack/(tabs)/cards.tsx

@@ -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>
+  );
+}

apps/example/src/app/example-stack/(tabs)/home.tsx

@@ -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>
+  );
+}

apps/example/src/app/example-stack/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from 'expo-router';
+
+export default function ExampleStackLayout() {
+  return <Stack />;
+}

apps/example/src/app/example-stack/a-stack/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from 'expo-router';
+
+export default function AStackLayout() {
+  return <Stack initialRouteName="a-stack-page-1" />;
+}

apps/example/src/app/example-stack/a-stack/a-stack-page-1.tsx

@@ -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>
+  );
+}

apps/example/src/app/example-stack/a-stack/a-stack-page-2.tsx

@@ -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>
+  );
+}

apps/example/src/app/example-stack/a-stack/page-3.tsx

@@ -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>
+  );
+}

apps/example/src/app/example-stack/another-stack/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from 'expo-router';
+
+export default function AnotherStackLayout() {
+  return <Stack />;
+}