feat: add pages to the example app

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 />;
+}

apps/example/src/app/example-stack/another-stack/another-stack-page-1.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 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>
+  );
+}

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

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

apps/example/src/app/example-stack/another-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 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>
+  );
+}

apps/example/src/app/example-stack/another-stack/page-4.tsx

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

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

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

apps/example/src/app/index.tsx

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

apps/example/src/components/ Button.tsx

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

apps/example/src/components/Spacer.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+export const Spacer = ({ size = 8 }: { size?: number }) => {
+  return <View style={{ height: size, width: size }} />;
+};