feat: show the navigation stack size

Author: NuclearRedeye

src/screens/details.tsx

@@ -1,17 +1,21 @@
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
 
 export type DetailsScreenProps = {
-  message?: string;
+  depth: number;
 };
 
-export function DetailsScreen({message = "Details Screen"}: DetailsScreenProps) {
+export function DetailsScreen() {
   const navigation = useNavigation();
+  const route = useRoute();
+
+  const { depth } = route.params as DetailsScreenProps;
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>{message}</Text>
-      <Button onPress={() => navigation.push('Details')}>Go Deeper</Button>
+      <Text>You are currently {depth} screens deep</Text>
+      <Button onPress={() => navigation.push('Details', {depth: (depth + 1)})}>Go Deeper</Button>
       <Button onPress={() => navigation.goBack('Details')}>Go Back</Button>
       <Button onPress={() => navigation.popTo('Home')}>Go Home</Button>
     </View>

src/screens/home.tsx

@@ -12,7 +12,7 @@ export function HomeScreen({message = "Home Screen"}: HomeScreenProps) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>{message}</Text>
-      <Button onPress={() => navigation.push('Details')}>Go to Details</Button>
+      <Button onPress={() => navigation.push('Details', {depth: 1})}>Go to Details</Button>
     </View>
   );
 }