feat: add snack to use-navigation-state (#617)

* feat: add snack to use-navigation-state

* fix: change snack

* fix: add requested changes

Author: WoLewicki

docs/use-navigation-state.md

@@ -22,7 +22,7 @@ const state = useNavigationState(state => state);
 
 ## How is `useNavigationState` different from `navigation.dangerouslyGetState()`?
 
-The `navigation.dangerouslyGetState()` function also returns the current navigation state. The main difference is that the `useNavigation` hook will trigger a re-render when values change, while `navigation.dangerouslyGetState()` won't. For example, the following code will be incorrect:
+The `navigation.dangerouslyGetState()` function also returns the current navigation state. The main difference is that the `useNavigationState` hook will trigger a re-render when values change, while `navigation.dangerouslyGetState()` won't. For example, the following code will be incorrect:
 
 ```js
 function Profile() {
@@ -34,6 +34,8 @@ function Profile() {
 
 In this example, even if you push a new screen, this text won't update. If you use the hook, it'll work as expected:
 
+<samp id="use-navigation-state">
+
 ```js
 function Profile() {
   const routesLength = useNavigationState(state => state.routes.length);

website/static/examples/next/use-navigation-state.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+import {
+  NavigationNativeContainer,
+  useRoute,
+  useNavigationState,
+} from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+function useIsFirstRouteInParent() {
+  const route = useRoute();
+  const isFirstRouteInParent = useNavigationState(
+    state => state.routes[0].key === route.key
+  );
+
+  return isFirstRouteInParent;
+}
+
+function usePreviousRouteName() {
+  return useNavigationState(state =>
+    state.routes[state.index - 1]?.name
+      ? state.routes[state.index - 1].name
+      : 'None'
+  );
+}
+
+function HomeScreen({ navigation }) {
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+
+      <Button
+        title="Go to Profile"
+        onPress={() => navigation.navigate('Profile')}
+      />
+    </View>
+  );
+}
+
+function ProfileScreen({ navigation }) {
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+      <Button
+        title="Go to Settings"
+        onPress={() => navigation.navigate('Settings')}
+      />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }) {
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createStackNavigator();
+
+function MyStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+    </Stack.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationNativeContainer>
+      <MyStack />
+    </NavigationNativeContainer>
+  );
+}