Document logger devtool

Author: satya164

static/assets/7.x/devtool-logger.mp4

@@ -21,6 +21,67 @@ Hooks from this package only work during development and are disabled in product
 
 The package exposes the following APIs:
 
+### `useLogger`
+
+This hook provides a logger for React Navigation. It logs the navigation state and actions to the console.
+
+<video playsInline autoPlay muted loop style={{ width: "585px" }}>
+
+  <source src="/assets/7.x/devtool-logger.mp4" />
+</video>
+
+**Usage:**
+
+To use the hook, import it and pass a `ref` to the `NavigationContainer` as its argument:
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+import * as React from 'react';
+import {
+  createStaticNavigation,
+  useNavigationContainerRef,
+} from '@react-navigation/native';
+import { useLogger } from '@react-navigation/devtools';
+
+/* content */
+
+export default function App() {
+  const navigationRef = useNavigationContainerRef();
+
+  useLogger(navigationRef);
+
+  return <Navigation ref={navigationRef} />;
+}
+```
+
+</TabItem>
+
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import * as React from 'react';
+import {
+  NavigationContainer,
+  useNavigationContainerRef,
+} from '@react-navigation/native';
+import { useLogger } from '@react-navigation/devtools';
+
+export default function App() {
+  const navigationRef = useNavigationContainerRef();
+
+  useLogger(navigationRef);
+
+  return (
+    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
+  );
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### `useReduxDevToolsExtension`
 
 This hook provides integration with [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools). It also works with [`React Native Debugger app`](https://github.com/jhen0409/react-native-debugger) which includes this extension.

versioned_docs/version-7.x/devtools.md

@@ -367,7 +367,11 @@ Previously, we added a Flipper plugin for React Navigation to make debugging nav
 
 Since the React Native team migrating away from Flipper, it doesn't make much sense for us to spend additional resources to keep supporting it. So we've removed the Flipper plugin from `@react-navigation/devtools`.
 
-As an alternative, you can use [React Navigation devtools plugin for Expo](https://docs.expo.dev/debugging/devtools-plugins/#react-navigation) if you are using [Expo](https://expo.dev).
+Alternatively, you can use the following developer tools:
+
+- [Logger](devtools.md#uselogger)
+- [Integration for Redux DevTools Extension](devtools.md#usereduxdevtoolsextension)
+- [Devtools plugin for Expo](https://docs.expo.dev/debugging/devtools-plugins/#react-navigation) if you are using [Expo](https://expo.dev).
 
 #### Various deprecated APIs are removed
 
@@ -878,3 +882,9 @@ npm install react-native-drawer-layout
 ```
 
 See [`react-native-drawer-layout`](drawer-layout.md) for usage.
+
+### `useLogger` devtool
+
+The `@react-navigation/devtools` package now exports a `useLogger` hook. It can be used to log navigation actions to the console:
+
+See [`useLogger`](devtools.md#uselogger) for usage.