Document exported hooks for each navigator

Author: satya164

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -375,31 +375,7 @@ To show your screen under the tab bar, you can set the `position` style to absol
 >
 ```
 
-You also might need to add a bottom margin to your content if you have a absolutely positioned tab bar. React Navigation won't do it automatically.
-
-To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useBottomTabBarHeight`:
-
-```js
-import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
-
-// ...
-
-<BottomTabBarHeightContext.Consumer>
-  {tabBarHeight => (
-    /* render something */
-  )}
-</BottomTabBarHeightContext.Consumer>
-```
-
-or
-
-```js
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-
-// ...
-
-const tabBarHeight = useBottomTabBarHeight();
-```
+You also might need to add a bottom margin to your content if you have an absolutely positioned tab bar. React Navigation won't do it automatically. See [`useBottomTabBarHeight`](#usebottomtabbarheight) for more details.
 
 #### `tabBarBackground`
 
@@ -420,7 +396,7 @@ import { BlurView } from 'expo-blur';
 >
 ```
 
-When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use [`useBottomTabBarHeight`](#usebottomtabbarheight) to add a bottom padding to your content.
 
 #### `tabBarPosition`
 
@@ -581,6 +557,44 @@ Navigates to an existing screen in the tab navigator. The method accepts followi
 navigation.jumpTo('Profile', { owner: 'Michaś' });
 ```
 
+### Hooks
+
+The bottom tab navigator exports the following hooks:
+
+#### `useBottomTabBarHeight`
+
+This hook returns the height of the bottom tab bar. By default, the screen content doesn't go under the tab bar. However, if you want to make the tab bar absolutely positioned and have the content go under it (e.g. to show a blur effect), it's necessary to adjust the content to take the tab bar height into account.
+
+Example:
+
+```js
+import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+
+function MyComponent() {
+  const tabBarHeight = useBottomTabBarHeight();
+
+  return (
+    <ScrollView contentStyle={{ paddingBottom: tabBarHeight }}>
+      {/* Content */}
+    </ScrollView>
+  );
+}
+```
+
+Alternatively, you can use the `BottomTabBarHeightContext` directly if you are using a class component or need it in a reusable component that can be used outside the bottom tab navigator:
+
+```js
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
+
+// ...
+
+<BottomTabBarHeightContext.Consumer>
+  {tabBarHeight => (
+    /* render something */
+  )}
+</BottomTabBarHeightContext.Consumer>
+```
+
 ## Animations
 
 By default, switching between tabs doesn't have any animation. You can specify the `animation` option to customize the transition animation.

versioned_docs/version-7.x/material-top-tab-navigator.md

@@ -517,3 +517,31 @@ Navigates to an existing screen in the tab navigator. The method accepts followi
 ```js
 navigation.jumpTo('Profile', { name: 'Michaś' });
 ```
+
+### Hooks
+
+The material top tab navigator exports the following hooks:
+
+#### `useTabAnimation`
+
+This hook returns an object containing an animated value that represents the current position of the tabs. This can be used to animate elements based on the swipe position of the tabs, such as the tab indicator:
+
+```js
+import { Animated } from 'react-native';
+import { useTabAnimation } from '@react-navigation/material-top-tabs';
+
+function MyView() {
+  const { position } = useTabAnimation();
+
+  return (
+    <Animated.View
+      style={{
+        width: '50%',
+        height: 2,
+        backgroundColor: 'tomato',
+        transform: [{ translateX: position }],
+      }}
+    />
+  );
+}
+```

versioned_docs/version-7.x/native-stack-navigator.md

@@ -805,3 +805,33 @@ Pops all of the screens in the stack except the first one and navigates to it.
 ```js
 navigation.popToTop();
 ```
+
+### Hooks
+
+The native stack navigator exports the following hooks:
+
+#### `useAnimatedHeaderHeight`
+
+The hook returns an animated value representing the height of the header. This is similar to [`useHeaderHeight`](elements.md#useheaderheight) but returns an animated value that changed as the header height changes, e.g. when expanding or collapsing large title or search bar on iOS.
+
+It can be used to animated content along with header height changes.
+
+```js
+import { Animated } from 'react-native';
+import { useAnimatedHeaderHeight } from '@react-navigation/native-stack';
+
+const MyView = () => {
+  const headerHeight = useAnimatedHeaderHeight();
+
+  return (
+    <Animated.View
+      style={{
+        height: 100,
+        aspectRatio: 1,
+        backgroundColor: 'tomato',
+        transform: [{ translateY: headerHeight }],
+      }}
+    />
+  );
+};
+```

versioned_docs/version-7.x/stack-navigator.md

@@ -595,6 +595,28 @@ Pops all of the screens in the stack except the first one and navigates to it.
 navigation.popToTop();
 ```
 
+### Hooks
+
+The stack navigator exports the following hooks:
+
+#### `useCardAnimation`
+
+This hook returns values related to the screen's animation. It contains the following properties:
+
+- `current` - Values for the current screen:
+  - `progress` - Animated node representing the progress value of the current screen.
+- `next` - Values for the screen after this one in the stack. This can be `undefined` in case the screen animating is the last one.
+  - `progress` - Animated node representing the progress value of the next screen.
+- `closing` - Animated node representing whether the card is closing. `1` when closing, `0` if not.
+- `swiping` - Animated node representing whether the card is being swiped. `1` when swiping, `0` if not.
+- `inverted` - Animated node representing whether the card is inverted. `-1` when inverted, `1` if not.
+- `index` - The index of the card in the stack.
+- `layouts` - Layout measurements for various items we use for animation.
+  - `screen` - Layout of the whole screen. Contains `height` and `width` properties.
+- `insets` - Layout of the safe area insets. Contains `top`, `right`, `bottom` and `left` properties.
+
+See [Transparent modals](#transparent-modals) for an example of how to use this hook.
+
 ## Animations
 
 You can specify the `animation` option to customize the transition animation for screens being pushed or popped.
@@ -800,7 +822,7 @@ Stack Navigator exposes various options to configure the transition animation wh
     - `title` - Layout of the title element. Might be `undefined` when not rendering a title.
     - `leftLabel` - Layout of the back button label. Might be `undefined` when not rendering a back button label.
 
-  A config which just fades the elements looks like this:
+  A config that just fades the elements looks like this:
 
   ```js
   const forFade = ({ current, next }) => {