docs: Small improvements from old open PRs

static/examples/5.x/stack-actions.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
 import { NavigationContainer, StackActions } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   return (
@@ -31,11 +31,11 @@ function ProfileScreen({ navigation, route }) {
       <Text>Profile!</Text>
       <Text>{route.params.user}'s profile</Text>
       <Button
-        title="Push same screen on the stack"
+        title="Pop one screen from stack"
         onPress={() => navigation.dispatch(StackActions.pop(1))}
       />
       <Button
-        title="Pop one screen from stack"
+        title="Push same screen on the stack"
         onPress={() =>
           navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
         }

static/examples/6.x/stack-actions.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
 import { NavigationContainer, StackActions } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   return (
@@ -31,11 +31,11 @@ function ProfileScreen({ navigation, route }) {
       <Text>Profile!</Text>
       <Text>{route.params.user}'s profile</Text>
       <Button
-        title="Push same screen on the stack"
+        title="Pop one screen from stack"
         onPress={() => navigation.dispatch(StackActions.pop(1))}
       />
       <Button
-        title="Pop one screen from stack"
+        title="Push same screen on the stack"
         onPress={() =>
           navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
         }

static/examples/7.x/stack-actions.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
 import { NavigationContainer, StackActions } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   return (
@@ -31,11 +31,11 @@ function ProfileScreen({ navigation, route }) {
       <Text>Profile!</Text>
       <Text>{route.params.user}'s profile</Text>
       <Button
-        title="Push same screen on the stack"
+        title="Pop one screen from stack"
         onPress={() => navigation.dispatch(StackActions.pop(1))}
       />
       <Button
-        title="Pop one screen from stack"
+        title="Push same screen on the stack"
         onPress={() =>
           navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
         }

versioned_docs/version-3.x/localization.md

@@ -100,4 +100,4 @@ class Screen extends React.Component {
 }
 ```
 
-You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help with that.
+You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://react.dev/reference/react/useContext) for help with that.

versioned_docs/version-3.x/tab-based-navigation.md

@@ -133,7 +133,7 @@ export default class IconWithBadge extends React.Component {
 }
 ```
 
-From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
+From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
 
 ```js
 const HomeIconWithBadge = (props) => {

versioned_docs/version-4.x/localization.md

@@ -100,4 +100,4 @@ class Screen extends React.Component {
 }
 ```
 
-You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help with that.
+You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://react.dev/reference/react/useContext) for help with that.

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

@@ -248,7 +248,7 @@ This is useful if you want to render a semi-transparent header or a blurred back
 
 Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.
 
-To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useHeaderHeight`:
+To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useHeaderHeight`:
 
 ```js
 import { HeaderHeightContext } from 'react-navigation-stack';

versioned_docs/version-4.x/tab-based-navigation.md

@@ -137,7 +137,7 @@ export default class IconWithBadge extends React.Component {
 }
 ```
 
-From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
+From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
 
 ```js
 const HomeIconWithBadge = (props) => {

versioned_docs/version-4.x/themes.md

@@ -245,7 +245,7 @@ You may want more control than what you're given with just the built-in themes.
 
 Building custom themes into an app with React Navigation is not too much different than a React app without it; the main differences are that you will need to use `screenProps` in order to update style properties controlled by `navigationOptions`, and when style properties are controlled in navigator configuration we'll need to take another approach. First we're going to recap how you would theme a React app without React Navigation, then we will dive deeper into these differences. Additionally, this guide assumes that you are already comfortable with React Navigation, in particular how to use and configure navigators.
 
-React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://reactjs.org/docs/context.html) for it before continuing.
+React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://react.dev/reference/react/useContext) for it before continuing.
 
 ```jsx
 import * as React from 'react';

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

@@ -247,7 +247,7 @@ style: {
 
 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`:
+To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useBottomTabBarHeight`:
 
 ```js
 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';

versioned_docs/version-5.x/configuring-links.md

@@ -446,7 +446,7 @@ It's not possible to pass params to the initial screen through the URL. So make
 
 In this case, any params in the URL are only passed to the `Profile` screen which matches the path pattern `users/:id`, and the `Feed` screen doesn't receive any params. If you want to have the same params in the `Feed` screen, you can specify a [custom `getStateFromPath` function](navigation-container.md#linkinggetstatefrompath) and copy those params.
 
-Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose them.
+Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose them.
 
 ## Matching exact paths
 

versioned_docs/version-5.x/getting-started.md

@@ -15,7 +15,7 @@ Here are some resources to help you out:
 1. [React Native Express](http://reactnativeexpress.com/) (Sections 1 to 4)
 2. [Main Concepts of React](https://reactjs.org/docs/hello-world.html)
 3. [React Hooks](https://reactjs.org/docs/hooks-intro.html)
-4. [React Context](https://reactjs.org/docs/context.html) (Advanced)
+4. [React Context](https://react.dev/reference/react/useContext) (Advanced)
 
 ## Installation
 

versioned_docs/version-5.x/hello-react-navigation.md

@@ -122,7 +122,7 @@ Sometimes we will want to specify the same options for all of the screens in the
 
 Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches:
 
-1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended).
+1. Use [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended).
 2. Use a render callback for the screen instead of specifying a `component` prop:
 
    ```js

versioned_docs/version-5.x/nesting-navigators.md

@@ -60,7 +60,7 @@ If you want to achieve this behavior, see the guide for [screen options with nes
 
 For example, any `params` passed to a screen in a nested navigator are in the `route` prop of that screen and aren't accessible from a screen in a parent or child navigator.
 
-If you need to access params of the parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose params to children.
+If you need to access params of the parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose params to children.
 
 ### Navigation actions are handled by current navigator and bubble up if couldn't be handled
 

versioned_docs/version-5.x/screen.md

@@ -130,6 +130,6 @@ Render callback to return React Element to use for the screen:
 </Stack.Screen>
 ```
 
-You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://reactjs.org/docs/context.html) for passing data instead.
+You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://react.dev/reference/react/useContext) for passing data instead.
 
 > Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues.

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

@@ -285,7 +285,7 @@ This is useful if you want to render a semi-transparent header or a blurred back
 
 Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.
 
-To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useHeaderHeight`:
+To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useHeaderHeight`:
 
 ```js
 import { HeaderHeightContext } from '@react-navigation/stack';

versioned_docs/version-5.x/tab-based-navigation.md

@@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op
 <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />
 ```
 
-From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
+From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
 
 ![Tabs with badges](/assets/navigators/tabs/tabs-badges.png)
 

versioned_docs/version-5.x/upgrading-from-4.x.md

@@ -383,7 +383,7 @@ However, using `screenProps` had some disadvantages:
 - When using a type-checker like TypeScript, it was necessary to annotate `screenProps` every time we want to use it, which wasn't type-safe or convenient.
 - You could only access `screenProps` in screens. To access them in child components, you needed to pass them down as props manually. It's very inconvenient for things like translation where we often use it in a lot of components.
 
-Due to the component based API of React Navigation 5.x, we have a much better alternative to `screenProps` which doesn't have these disadvantages: [React Context](https://reactjs.org/docs/context.html). Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API!
+Due to the component based API of React Navigation 5.x, we have a much better alternative to `screenProps` which doesn't have these disadvantages: [React Context](https://react.dev/reference/react/useContext). Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API!
 
 ## Themes
 

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

@@ -273,7 +273,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`:
+To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useBottomTabBarHeight`:
 
 ```js
 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';

versioned_docs/version-6.x/configuring-links.md

@@ -509,7 +509,7 @@ Another thing to keep in mind is that it's not possible to pass params to the in
 
 In this case, any params in the URL are only passed to the `Profile` screen which matches the path pattern `users/:id`, and the `Feed` screen doesn't receive any params. If you want to have the same params in the `Feed` screen, you can specify a [custom `getStateFromPath` function](navigation-container.md#linkinggetstatefrompath) and copy those params.
 
-Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose them.
+Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose them.
 
 ## Matching exact paths
 

versioned_docs/version-6.x/elements.md

@@ -164,7 +164,7 @@ This is useful if you want to render a semi-transparent header or a blurred back
 
 Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.
 
-To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](#useheaderheight).
+To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](#useheaderheight).
 
 #### `headerBackground`
 

versioned_docs/version-6.x/hello-react-navigation.md

@@ -130,7 +130,7 @@ Sometimes we will want to specify the same options for all of the screens in the
 
 Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches:
 
-1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended).
+1. Use [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended).
 2. Use a render callback for the screen instead of specifying a `component` prop:
 
    ```js

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

@@ -166,7 +166,7 @@ This is useful if you want to render a semi-transparent header or a blurred back
 
 Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.
 
-To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight).
+To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight).
 
 #### `headerBlurEffect`