();
+
+ const html = ReactDOMServer.renderToString(
+
+ {element}
+
+ );
+
+ const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());
+
+ const options = ref.current?.getCurrentOptions();
+
+ const document = `
+
+
+ ${options.title}
+
+
+ ${html}
+
+`;
+
+ ctx.body = document;
+});
+```
+
+Make sure that you have specified a `title` option for your screens:
+
+
+
+
+```js
+const Stack = createNativeStackNavigator({
+ screens: {
+ Home: {
+ screen: HomeScreen,
+ options: {
+ // highlight-next-line
+ title: 'My App',
+ },
+ },
+ Profile: {
+ screen: ProfileScreen,
+ options: ({ route }) => ({
+ // highlight-next-line
+ title: `${route.params.name}'s Profile`,
+ }),
+ },
+ },
+});
+```
+
+
+
+
+```js
+
+ ({
+ // highlight-next-line
+ title: `${route.params.name}'s Profile`,
+ })}
+ />
+
+```
+
+
+
+
+## Handling 404 or other status codes
+
+When [rendering a screen for an invalid URL](configuring-links.md#handling-unmatched-routes-or-404), we should also return a `404` status code from the server.
+
+First, we need to create a context where we'll attach the status code. To do this, place the following code in a separate file that we will be importing on both the server and client:
+
+```js
+import * as React from 'react';
+
+const StatusCodeContext = React.createContext();
+
+export default StatusCodeContext;
+```
+
+Then, we need to use the context in our `NotFound` screen. Here, we add a `code` property with the value of `404` to signal that the screen was not found:
+
+```js
+function NotFound() {
+ const status = React.useContext(StatusCodeContext);
+
+ if (status) {
+ staus.code = 404;
+ }
+
+ return (
+
+ Oops! This URL doesn't exist.
+
+ );
+}
+```
+
+You could also attach additional information in this object if you need to.
+
+Next, we need to create a status object to pass in the context on our server. By default, we'll set the `code` to `200`. Then pass the object in `StatusCodeContext.Provider` which should wrap the element with `ServerContainer`:
+
+```js
+// Create a status object
+const status = { code: 200 };
+
+const html = ReactDOMServer.renderToString(
+ // Pass the status object via context
+
+
+ {element}
+
+
+);
+
+// After rendering, get the status code and use it for server's response
+ctx.status = status.code;
+```
+
+After we render the app with `ReactDOMServer.renderToString`, the `code` property of the `status` object will be updated to be `404` if the `NotFound` screen was rendered.
+
+You can follow a similar approach for other status codes too, for example, `401` for unauthorized etc.
+
+## Summary
+
+- Use the `location` prop on `ServerContainer` to render correct screens based on the incoming request.
+- Attach a `ref` to the `ServerContainer` get options for the current screen.
+- Use context to attach more information such as status code.
diff --git a/versioned_docs/version-8.x/shared-element-transitions.md b/versioned_docs/version-8.x/shared-element-transitions.md
new file mode 100644
index 00000000000..813b90f499e
--- /dev/null
+++ b/versioned_docs/version-8.x/shared-element-transitions.md
@@ -0,0 +1,229 @@
+---
+id: shared-element-transitions
+title: Animating elements between screens
+sidebar_label: Shared element transitions
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+This guide covers how to animate elements between screens. This feature is known as a [Shared Element Transition](https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview/) and it's implemented in the [`@react-navigation/native-stack`](native-stack-navigator.md) with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/).
+
+:::warning
+
+As of writing this guide, Shared Element Transitions are considered an experimental feature not recommended for production use.
+
+Shared Element Transitions are currently only supported on **old React Native architecture** (Paper).
+
+:::
+
+
+
+
+## Pre-requisites
+
+Before continuing this guide make sure your app meets these criteria:
+
+- You are using [`@react-navigation/native-stack`](native-stack-navigator.md). The Shared Element Transitions feature isn't supported in JS-based [`@react-navigation/stack`](stack-navigator.md).
+- You have [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) **v3.0.0 or higher** installed and configured.
+
+## Minimal example
+
+To create a shared transition:
+
+1. Use `Animated` components imported from `react-native-reanimated`.
+2. Assign the same `sharedTransitionTag` to elements on different screens.
+3. Navigate between screens. The transition will start automatically.
+
+
+
+
+```js name="Shared transition"
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+ useNavigation,
+ createStaticNavigation,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
+
+import Animated from 'react-native-reanimated';
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ navigation.navigate('Details')}>
+ Go to Details
+
+
+ );
+}
+
+function DetailsScreen() {
+ const navigation = useNavigation('Details');
+
+ return (
+
+ navigation.goBack()}>Go back
+
+ );
+}
+
+// highlight-start
+const RootStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Details: DetailsScreen,
+ },
+});
+// highlight-end
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+
+
+```js name="Shared transition"
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
+
+import Animated from 'react-native-reanimated';
+
+// highlight-next-line
+const Stack = createNativeStackNavigator();
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ navigation.navigate('Details')}>
+ Go to Details
+
+
+ );
+}
+
+function DetailsScreen() {
+ const navigation = useNavigation('Details');
+
+ return (
+
+ navigation.goBack()}>Go back
+
+ );
+}
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ },
+});
+```
+
+
+
+
+`sharedTransitionTag` is a string that has to be unique in the context of a single screen, but has to match elements between screens. This prop allows Reanimated to identify and animate the elements, similarly to the [`key`](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) property, which tells React which element in the list is which.
+
+## Customizing the transition
+
+By default, the transition animates the `width`, `height`, `originX`, `originY` and `transform` properties using `withTiming` with a 500 ms duration. You can easily customize `width`, `height`, `originX`, and `originY` props. Customizing `transform` is also possible but it's far beyond the scope of this guide.
+
+:::warning
+
+Custom SharedTransition API is not finalized and might change in a future release.
+
+:::
+
+To customize the transition you need to pass all the properties besides `transform`.
+
+```jsx
+import { SharedTransition } from 'react-native-reanimated';
+
+const customTransition = SharedTransition.custom((values) => {
+ 'worklet';
+ return {
+ height: withSpring(values.targetHeight),
+ width: withSpring(values.targetWidth),
+ originX: withSpring(values.targetOriginX),
+ originY: withSpring(values.targetOriginY),
+ };
+});
+
+function HomeScreen() {
+ return (
+
+ Home!
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push Profile on the stack
+
+ {
+ // codeblock-focus-start
+ navigation.dispatch(
+ StackActions.replace('Profile', { user: 'Wojtek' })
+ );
+ // codeblock-focus-end
+ }}
+ >
+ Replace with Profile
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ const navigation = useNavigation();
+ return (
+
+ Profile!
+ {route.params.user}'s profile
+ navigation.dispatch(StackActions.pop(1))}>
+ Pop one screen from stack
+
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push same screen on the stack
+
+ navigation.dispatch(StackActions.popToTop())}>
+ Pop to top
+
+
+ );
+}
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+ Home!
+ {
+ // codeblock-focus-start
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ // codeblock-focus-end
+ }}
+ >
+ Push Profile on the stack
+
+ {
+ navigation.dispatch(
+ StackActions.replace('Profile', { user: 'Wojtek' })
+ );
+ }}
+ >
+ Replace with Profile
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ const navigation = useNavigation();
+ return (
+
+ Profile!
+ {route.params.user}'s profile
+ navigation.dispatch(StackActions.pop(1))}>
+ Pop one screen from stack
+
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push same screen on the stack
+
+ navigation.dispatch(StackActions.popToTop())}>
+ Pop to top
+
+
+ );
+}
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+ Home!
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push Profile on the stack
+
+ {
+ navigation.dispatch(
+ StackActions.replace('Profile', { user: 'Wojtek' })
+ );
+ }}
+ >
+ Replace with Profile
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ const navigation = useNavigation();
+ return (
+
+ Profile!
+ {route.params.user}'s profile
+ {
+ // codeblock-focus-start
+ navigation.dispatch(StackActions.pop(1));
+ // codeblock-focus-end
+ }}
+ >
+ Pop one screen from stack
+
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push same screen on the stack
+
+ navigation.dispatch(StackActions.popToTop())}>
+ Pop to top
+
+
+ );
+}
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+ Home!
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push Profile on the stack
+
+ {
+ navigation.dispatch(StackActions.push('Settings'));
+ }}
+ >
+ Push Settings on the stack
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ const navigation = useNavigation();
+ return (
+
+ Profile!
+ {route?.params?.user || 'Guest'}'s profile
+ {
+ navigation.dispatch(StackActions.push('Settings'));
+ }}
+ >
+ Push Settings on the stack
+
+ {
+ // codeblock-focus-start
+ navigation.dispatch(StackActions.popTo('Profile', { user: 'jane' }));
+ // codeblock-focus-end
+ }}
+ >
+ Pop to Profile with params
+
+
+ );
+}
+
+function SettingsScreen() {
+ const navigation = useNavigation();
+ return (
+
+ Settings!
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push Profile on the stack
+
+ {
+ navigation.dispatch(StackActions.popTo('Profile', { user: 'jane' }));
+ }}
+ >
+ Pop to Profile with params
+
+
+ );
+}
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+ Home!
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push Profile on the stack
+
+ {
+ navigation.dispatch(
+ StackActions.replace('Profile', { user: 'Wojtek' })
+ );
+ }}
+ >
+ Replace with Profile
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ const navigation = useNavigation();
+ return (
+
+ Profile!
+ {route.params.user}'s profile
+ navigation.dispatch(StackActions.pop(1))}>
+ Pop one screen from stack
+
+ {
+ navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));
+ }}
+ >
+ Push same screen on the stack
+
+ {
+ // codeblock-focus-start
+ navigation.dispatch(StackActions.popToTop());
+ // codeblock-focus-end
+ }}
+ >
+ Pop to top
+
+
+ );
+}
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+
+
+
+
+
+One thing to keep in mind is that while `@react-navigation/stack` is extremely customizable, it's implemented in JavaScript. While it runs animations and gestures using natively, the performance may not be as fast as a native implementation. This may not be an issue for a lot of apps, but if you're experiencing performance issues during navigation, consider using [`@react-navigation/native-stack`](native-stack-navigator.md) instead - which uses native navigation primitives.
+
+## Installation
+
+To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/stack):
+
+```bash npm2yarn
+npm install @react-navigation/stack
+```
+
+The navigator depends on [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) for gestures and optionally [`@react-native-masked-view/masked-view`](https://github.com/react-native-masked-view/masked-view) for [UIKit style animations for the header](#headerstyleinterpolator).
+
+
+
+
+If you have a Expo managed project, in your project directory, run:
+
+```bash
+npx expo install react-native-gesture-handler @react-native-masked-view/masked-view
+```
+
+
+
+
+If you have a bare React Native project, in your project directory, run:
+
+```bash npm2yarn
+npm install react-native-gesture-handler @react-native-masked-view/masked-view
+```
+
+
+
+
+If you're on a Mac and developing for iOS, you also need to install [pods](https://cocoapods.org/) to complete the linking.
+
+```bash
+npx pod-install ios
+```
+
+## Usage
+
+To use this navigator, import it from `@react-navigation/stack`:
+
+```js name="Stack Navigator" snack static2dynamic
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import {
+ createStaticNavigation,
+ useNavigation,
+} from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
+// codeblock-focus-start
+import { createStackNavigator } from '@react-navigation/stack';
+
+// codeblock-focus-end
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ return (
+
+ Profile Screen
+
+ );
+}
+
+// codeblock-focus-start
+const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(MyStack);
+
+export default function App() {
+ return {/* Header content */}
+);
+```
+
+#### `headerMode`
+
+Specifies how the header should be rendered:
+
+- `float` - The header is rendered above the screen and animates independently of the screen. This is default on iOS for non-modals.
+- `screen` - The header is rendered as part of the screen and animates together with the screen. This is default on other platforms.
+
+#### `headerShown`
+
+Whether to show or hide the header for the screen. The header is shown by default. Setting this to `false` hides the header.
+
+#### `headerBackAllowFontScaling`
+
+Whether back button title font should scale to respect Text Size accessibility settings. Defaults to false.
+
+#### `headerBackAccessibilityLabel`
+
+Accessibility label for the header back button.
+
+#### `headerBackImage`
+
+Function which returns a React Element to display custom image in header's back button. When a function is used, it receives the `tintColor` in it's argument object. Defaults to Image component with back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android).
+
+#### `headerBackTitle`
+
+Title string used by the back button on iOS. Defaults to the previous scene's title. Use `headerBackButtonDisplayMode` to customize the behavior.
+
+#### `headerTruncatedBackTitle`
+
+Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
+
+#### `headerBackButtonDisplayMode`
+
+How the back button displays icon and title.
+
+Supported values:
+
+- `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon).
+- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon).
+- `minimal`: Always displays only the icon without a title.
+
+Defaults to `default` on iOS, and `minimal` on Android.
+
+#### `headerBackTitleStyle`
+
+Style object for the back title.
+
+### Events
+
+The navigator can [emit events](navigation-events.md) on certain actions. Supported events are:
+
+#### `transitionStart`
+
+This event is fired when the transition animation starts for the current screen.
+
+Event data:
+
+- `e.data.closing` - Boolean indicating whether the screen is being opened or closed.
+
+Example:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('transitionStart', (e) => {
+ // Do something
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+#### `transitionEnd`
+
+This event is fired when the transition animation ends for the current screen.
+
+Event data:
+
+- `e.data.closing` - Boolean indicating whether the screen was opened or closed.
+
+Example:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('transitionEnd', (e) => {
+ // Do something
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+#### `gestureStart`
+
+This event is fired when the swipe gesture starts for the current screen.
+
+Example:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('gestureStart', (e) => {
+ // Do something
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+#### `gestureEnd`
+
+This event is fired when the swipe gesture ends for the current screen. e.g. a screen was successfully dismissed.
+
+Example:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('gestureEnd', (e) => {
+ // Do something
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+#### `gestureCancel`
+
+This event is fired when the swipe gesture is cancelled for the current screen. e.g. a screen wasn't dismissed by the gesture.
+
+Example:
+
+```js
+React.useEffect(() => {
+ const unsubscribe = navigation.addListener('gestureCancel', (e) => {
+ // Do something
+ });
+
+ return unsubscribe;
+}, [navigation]);
+```
+
+### Helpers
+
+The stack navigator adds the following methods to the navigation object:
+
+#### `replace`
+
+Replaces the current screen with a new screen in the stack. The method accepts the following arguments:
+
+- `name` - _string_ - Name of the route to push onto the stack.
+- `params` - _object_ - Screen params to pass to the destination route.
+
+```js
+navigation.replace('Profile', { owner: 'Michaś' });
+```
+
+#### `push`
+
+Pushes a new screen to the top of the stack and navigate to it. The method accepts the following arguments:
+
+- `name` - _string_ - Name of the route to push onto the stack.
+- `params` - _object_ - Screen params to pass to the destination route.
+
+```js
+navigation.push('Profile', { owner: 'Michaś' });
+```
+
+#### `pop`
+
+Pops the current screen from the stack and navigates back to the previous screen. It takes one optional argument (`count`), which allows you to specify how many screens to pop back by.
+
+```js
+navigation.pop();
+```
+
+#### `popTo`
+
+Navigates back to a previous screen in the stack by popping screens after it. The method accepts the following arguments:
+
+- `name` - _string_ - Name of the route to navigate to.
+- `params` - _object_ - Screen params to pass to the destination route.
+- `options` - Options object containing the following properties:
+ - `merge` - _boolean_ - Whether params should be merged with the existing route params, or replace them (when navigating to an existing screen). Defaults to `false`.
+
+If a matching screen is not found in the stack, this will pop the current screen and add a new screen with the specified name and params.
+
+```js
+navigation.popTo('Profile', { owner: 'Michaś' });
+```
+
+#### `popToTop`
+
+Pops all of the screens in the stack except the first one and navigates to it.
+
+```js
+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.
+
+Supported values for `animation` are:
+
+- `default` - Default animation based on the platform and OS version.
+- `fade` - Simple fade animation for dialogs.
+- `fade_from_bottom` - Standard Android-style fade-in from the bottom for Android Oreo.
+- `fade_from_right` - Standard Android-style fade-in from the right for Android 14.
+- `reveal_from_bottom` - Standard Android-style reveal from the bottom for Android Pie.
+- `scale_from_center` - Scale animation from the center.
+- `slide_from_right` - Standard iOS-style slide in from the right.
+- `slide_from_left` - Similar to `slide_from_right`, but the screen will slide in from the left.
+- `slide_from_bottom` - Slide animation from the bottom for modals and bottom sheets.
+- `none` - The screens are pushed or popped immediately without any animation.
+
+By default, Android and iOS use the `default` animation and other platforms use `none`.
+
+If you need more control over the animation, you can customize individual parts of the animation using the various animation-related options:
+
+### Animation related options
+
+Stack Navigator exposes various options to configure the transition animation when a screen is added or removed. These transition animations can be customized on a per-screen basis by specifying the options in the `options` prop for each screen.
+
+- `gestureDirection` - The direction of swipe gestures:
+ - `horizontal` - The gesture to close the screen will start from the left, and from the right in RTL. For animations, screen will slide from the right with `SlideFromRightIOS`, and from the left in RTL.
+ - `horizontal-inverted` - The gesture to close the screen will start from the right, and from the left in RTL. For animations, screen will slide from the left with `SlideFromRightIOS`, and from the right in RTL as the direction is inverted.
+ - `vertical` - The gesture to close the screen will start from the top. For animations, screen will slide from the bottom.
+ - `vertical-inverted` - The gesture to close the screen will start from the bottom. For animations, screen will slide from the top.
+
+ You may want to specify a matching horizontal/vertical animation along with `gestureDirection` as well. For the animations included in the library, if you set `gestureDirection` to one of the inverted ones, it'll also flip the animation direction.
+
+- `transitionSpec` - An object which specifies the animation type (`timing` or `spring`) and their options (such as `duration` for `timing`). It takes 2 properties:
+ - `open` - Configuration for the transition when adding a screen
+ - `close` - Configuration for the transition when removing a screen.
+
+ Each of the object should specify 2 properties:
+ - `animation` - The animation function to use for the animation. Supported values are `timing` and `spring`.
+ - `config` - The configuration object for the timing function. For `timing`, it can be `duration` and `easing`. For `spring`, it can be `stiffness`, `damping`, `mass`, `overshootClamping`, `restDisplacementThreshold` and `restSpeedThreshold`.
+
+ A config which uses spring animation looks like this:
+
+ ```js
+ const config = {
+ animation: 'spring',
+ config: {
+ stiffness: 1000,
+ damping: 500,
+ mass: 3,
+ overshootClamping: true,
+ restDisplacementThreshold: 0.01,
+ restSpeedThreshold: 0.01,
+ },
+ };
+ ```
+
+ We can pass this config in the `transitionSpec` option:
+
+ ```js name="Custom Transition Config" snack static2dynamic
+ import * as React from 'react';
+ import { Text, View } from 'react-native';
+ import {
+ createStaticNavigation,
+ useNavigation,
+ } from '@react-navigation/native';
+ import { Button } from '@react-navigation/elements';
+ import { createStackNavigator } from '@react-navigation/stack';
+
+ function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+ }
+
+ function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+ }
+
+ // codeblock-focus-start
+ const config = {
+ animation: 'spring',
+ config: {
+ stiffness: 1000,
+ damping: 500,
+ mass: 3,
+ overshootClamping: true,
+ restDisplacementThreshold: 0.01,
+ restSpeedThreshold: 0.01,
+ },
+ };
+
+ const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: {
+ screen: ProfileScreen,
+ options: {
+ transitionSpec: {
+ open: config,
+ close: config,
+ },
+ },
+ },
+ },
+ });
+ // codeblock-focus-end
+
+ const Navigation = createStaticNavigation(MyStack);
+
+ export default function App() {
+ return
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+ }
+
+ function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+ }
+
+ // codeblock-focus-start
+ const forFade = ({ current }) => ({
+ cardStyle: {
+ opacity: current.progress,
+ },
+ });
+
+ const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: {
+ screen: ProfileScreen,
+ options: {
+ cardStyleInterpolator: forFade,
+ },
+ },
+ },
+ });
+ // codeblock-focus-end
+
+ const Navigation = createStaticNavigation(MyStack);
+
+ export default function App() {
+ return
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+ }
+
+ function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+ }
+
+ // codeblock-focus-start
+ const forFade = ({ current, next }) => {
+ const opacity = Animated.add(
+ current.progress,
+ next ? next.progress : 0
+ ).interpolate({
+ inputRange: [0, 1, 2],
+ outputRange: [0, 1, 0],
+ });
+
+ return {
+ leftButtonStyle: { opacity },
+ rightButtonStyle: { opacity },
+ titleStyle: { opacity },
+ backgroundStyle: { opacity },
+ };
+ };
+
+ const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: {
+ screen: ProfileScreen,
+ options: {
+ headerStyleInterpolator: forFade,
+ },
+ },
+ },
+ });
+ // codeblock-focus-end
+
+ const Navigation = createStaticNavigation(MyStack);
+
+ export default function App() {
+ return
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+}
+
+// codeblock-focus-start
+const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: {
+ screen: ProfileScreen,
+ options: {
+ title: 'Profile',
+ cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
+ },
+ },
+ },
+});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(MyStack);
+
+export default function App() {
+ return
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+}
+
+// codeblock-focus-start
+const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: {
+ screen: ProfileScreen,
+ options: {
+ title: 'Profile',
+ headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+ },
+ },
+ },
+});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(MyStack);
+
+export default function App() {
+ return
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+}
+
+// codeblock-focus-start
+const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: {
+ screen: ProfileScreen,
+ options: {
+ title: 'Profile',
+ ...TransitionPresets.ModalSlideFromBottomIOS,
+ },
+ },
+ },
+});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(MyStack);
+
+export default function App() {
+ return
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+}
+
+// codeblock-focus-start
+const MyStack = createStackNavigator({
+ initialRouteName: 'Home',
+ screenOptions: {
+ headerShown: false,
+ ...TransitionPresets.ModalPresentationIOS,
+ },
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(MyStack);
+
+export default function App() {
+ return
+
+```
+
+Now, when you navigate to the `Modal` screen, it'll have a transparent background and the `Home` screen will be visible underneath.
+
+In addition to `presentation`, you might want to optionally specify few more things to get a modal dialog like behavior:
+
+- Disable the header with `headerShown: false`
+- Enable the overlay with `cardOverlayEnabled: true` (you can't tap the overlay to close the screen this way, see below for alternatives)
+
+If you want to further customize how the dialog animates, or want to close the screen when tapping the overlay etc., you can use the `useCardAnimation` hook to customize elements inside your screen.
+
+Example:
+
+```js
+import { Animated, View, Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme, useNavigation } from '@react-navigation/native';
+import { useCardAnimation } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
+
+function ModalScreen() {
+ const navigation = useNavigation('Modal');
+ const { colors } = useTheme();
+ const { current } = useCardAnimation();
+
+ return (
+
+
+
+ Mise en place is a French term that literally means “put in place.” It
+ also refers to a way cooks in professional kitchens and restaurants
+ set up their work stations—first by gathering all ingredients for a
+ recipes, partially preparing them (like measuring out and chopping),
+ and setting them all near each other. Setting up mise en place before
+ cooking is another top tip for home cooks, as it seriously helps with
+ organization. It’ll pretty much guarantee you never forget to add an
+ ingredient and save you time from running back and forth from the
+ pantry ten times.
+
+
+ Okay
+
+
+
+ );
+}
+```
+
+Here we animate the scale of the dialog, and also add an overlay to close the dialog.
diff --git a/versioned_docs/version-8.x/state-persistence.md b/versioned_docs/version-8.x/state-persistence.md
new file mode 100755
index 00000000000..a2a5c6ab499
--- /dev/null
+++ b/versioned_docs/version-8.x/state-persistence.md
@@ -0,0 +1,314 @@
+---
+id: state-persistence
+title: State persistence
+sidebar_label: State persistence
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+You might want to save the user's location in the app, so that they are immediately returned to the same location after the app is restarted.
+
+This is especially valuable during development because it allows the developer to stay on the same screen when they refresh the app.
+
+## Usage
+
+To be able to persist the [navigation state](navigation-state.md), we can use the `onStateChange` and `initialState` props of the container.
+
+- `onStateChange` - This prop notifies us of any state changes. We can persist the state in this callback.
+- `initialState` - This prop allows us to pass an initial state to use for [navigation state](navigation-state.md). We can pass the restored state in this prop.
+
+
+
+
+```js name="Persisting the navigation state" snack dependencies=@react-native-async-storage/async-storage
+import * as React from 'react';
+// codeblock-focus-start
+import { Platform, View, Linking } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+ useNavigation,
+ createStaticNavigation,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { Button } from '@react-navigation/elements';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function A() {
+ return
+ navigation.navigate('C')}>Go to C
+
+ );
+}
+
+function C() {
+ const navigation = useNavigation('C');
+
+ return (
+
+ navigation.navigate('D')}>Go to D
+
+ );
+}
+
+function D() {
+ return
+ AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
+ }
+ />
+ );
+}
+// codeblock-focus-end
+```
+
+
+
+
+```js name="Persisting the navigation state" snack dependencies=@react-native-async-storage/async-storage
+import * as React from 'react';
+// codeblock-focus-start
+import { Platform, View, Linking } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+// codeblock-focus-end
+import { Button } from '@react-navigation/elements';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Tab = createBottomTabNavigator();
+const HomeStack = createNativeStackNavigator();
+const SettingsStack = createNativeStackNavigator();
+
+function A() {
+ return
+ navigation.navigate('C')}>Go to C
+
+ );
+}
+
+function C() {
+ const navigation = useNavigation('C');
+
+ return (
+
+ navigation.navigate('D')}>Go to D
+
+ );
+}
+
+function D() {
+ return
+
+ );
+}
+
+function SettingsStackScreen() {
+ return (
+
+
+ );
+}
+
+function RootTabs() {
+ return (
+
+
+ );
+}
+
+// codeblock-focus-start
+
+const PERSISTENCE_KEY = 'NAVIGATION_STATE_V1';
+
+export default function App() {
+ const [isReady, setIsReady] = React.useState(Platform.OS === 'web'); // Don't persist state on web since it's based on URL
+ const [initialState, setInitialState] = React.useState();
+
+ React.useEffect(() => {
+ const restoreState = async () => {
+ try {
+ const initialUrl = await Linking.getInitialURL();
+
+ if (initialUrl == null) {
+ // Only restore state if there's no deep link
+ const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
+ const state = savedStateString
+ ? JSON.parse(savedStateString)
+ : undefined;
+
+ if (state !== undefined) {
+ setInitialState(state);
+ }
+ }
+ } finally {
+ setIsReady(true);
+ }
+ };
+
+ if (!isReady) {
+ restoreState();
+ }
+ }, [isReady]);
+
+ if (!isReady) {
+ return null;
+ }
+
+ return (
+
+ AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
+ }
+ >
+
+ );
+}
+// codeblock-focus-end
+```
+
+
+
+
+:::warning
+
+It is recommended to use an [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app and clear the persisted state if an error occurs. This will ensure that the app doesn't get stuck in an error state if a screen crashes.
+
+:::
+
+### Development Mode
+
+This feature is particularly useful in development mode. You can enable it selectively using the following approach:
+
+```js
+const [isReady, setIsReady] = React.useState(__DEV__ ? false : true);
+```
+
+While it can be used for production as well, use it with caution as it can make the app unusable if the app is crashing on a particular screen - as the user will still be on the same screen after restarting. So if you are using it in production, make sure to clear the persisted state if an error occurs.
+
+### Loading View
+
+Because the state is restored asynchronously, the app must render an empty/loading view for a moment before we have the initial state. To handle this, we can return a loading view when `isReady` is `false`:
+
+```js
+if (!isReady) {
+ return
+
+
+```js name="Different status bar" snack
+import * as React from 'react';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
+import {
+ createStaticNavigation,
+ useNavigation,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function Screen1() {
+ const navigation = useNavigation('Screen1');
+ const insets = useSafeAreaInsets();
+
+ return (
+
+ // highlight-start
+ Light Screen
+ navigation.navigate('Screen2')}>
+ Next screen
+
+
+ );
+}
+
+function Screen2() {
+ const navigation = useNavigation('Screen2');
+ const insets = useSafeAreaInsets();
+
+ return (
+
+ // highlight-start
+ Dark Screen
+ navigation.navigate('Screen1')}>
+ Next screen
+
+
+ );
+}
+
+const RootStack = createNativeStackNavigator({
+ screenOptions: {
+ headerShown: false,
+ },
+ screens: {
+ Screen1: Screen1,
+ Screen2: Screen2,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+
+
+
+```js name="Different status bar" snack
+import * as React from 'react';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
+import {
+ SafeAreaProvider,
+ useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+function Screen1() {
+ const navigation = useNavigation('Screen1');
+ const insets = useSafeAreaInsets();
+
+ return (
+
+ // highlight-start
+ Light Screen
+ navigation.navigate('Screen2')}>
+ Next screen
+
+
+ );
+}
+
+function Screen2() {
+ const navigation = useNavigation('Screen2');
+ const insets = useSafeAreaInsets();
+
+ return (
+
+ // highlight-start
+ Dark Screen
+ navigation.navigate('Screen1')}>
+ Next screen
+
+
+ );
+}
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+});
+```
+
+
+
+
+
+
+
+
+
+
+## Tabs and Drawer
+
+If you're using a tab or drawer navigator, it's a bit more complex because all of the screens in the navigator might be rendered at once and kept rendered - that means that the last `StatusBar` config you set will be used (likely on the final tab of your tab navigator, not what the user is seeing).
+
+To fix this, we'll have to do make the status bar component aware of screen focus and render it only when the screen is focused. We can achieve this by using the [`useIsFocused` hook](use-is-focused.md) and creating a wrapper component:
+
+```js
+import * as React from 'react';
+import { StatusBar } from 'react-native';
+import { useIsFocused } from '@react-navigation/native';
+
+function FocusAwareStatusBar(props) {
+ const isFocused = useIsFocused();
+
+ return isFocused ?
+
+
+```js name="Different status bar based on tabs" snack
+import * as React from 'react';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
+import { useIsFocused } from '@react-navigation/native';
+import {
+ createStaticNavigation,
+ useNavigation,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function FocusAwareStatusBar(props) {
+ const isFocused = useIsFocused();
+
+ return isFocused ?
+ Light Screen
+ navigation.navigate('Screen2')}>
+ Next screen
+
+
+ );
+}
+
+function Screen2() {
+ const navigation = useNavigation('Screen2');
+ const insets = useSafeAreaInsets();
+
+ return (
+
+ Dark Screen
+ navigation.navigate('Screen1')}>
+ Next screen
+
+
+ );
+}
+// codeblock-focus-end
+
+const RootStack = createNativeStackNavigator({
+ screenOptions: {
+ headerShown: false,
+ },
+ screens: {
+ Screen1: Screen1,
+ Screen2: Screen2,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+
+
+```js name="Different status bar based on tabs" snack
+import * as React from 'react';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
+import { useIsFocused } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
+import {
+ SafeAreaProvider,
+ useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+function FocusAwareStatusBar(props) {
+ const isFocused = useIsFocused();
+
+ return isFocused ?
+ Light Screen
+ navigation.navigate('Screen2')}>
+ Next screen
+
+
+ );
+}
+
+function Screen2() {
+ const navigation = useNavigation('Screen2');
+ const insets = useSafeAreaInsets();
+
+ return (
+
+ Dark Screen
+ navigation.navigate('Screen1')}>
+ Next screen
+
+
+ );
+}
+// codeblock-focus-end
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+});
+```
+
+
+
+
+Although not necessary, you can use the `FocusAwareStatusBar` component in the screens of the native stack navigator as well.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/versioned_docs/version-8.x/tab-actions.md b/versioned_docs/version-8.x/tab-actions.md
new file mode 100755
index 00000000000..0944a0ec620
--- /dev/null
+++ b/versioned_docs/version-8.x/tab-actions.md
@@ -0,0 +1,75 @@
+---
+id: tab-actions
+title: TabActions reference
+sidebar_label: TabActions
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+`TabActions` is an object containing methods for generating actions specific to tab-based navigators. Its methods expand upon the actions available in [`CommonActions`](navigation-actions.md).
+
+The following actions are supported:
+
+## jumpTo
+
+The `jumpTo` action can be used to jump to an existing route in the tab navigator.
+
+- `name` - _string_ - Name of the route to jump to.
+- `params` - _object_ - Screen params to pass to the destination route.
+
+```js name="Tab Actions - jumpTo" snack static2dynamic
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+ TabActions,
+} from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+// codeblock-focus-start
+function HomeScreen() {
+ const navigation = useNavigation();
+ // highlight-next-line
+ const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+ {
+ // highlight-next-line
+ navigation.dispatch(jumpToAction);
+ }}
+ >
+ Jump to Profile
+
+
+ );
+}
+// codeblock-focus-end
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+const MyTabs = createBottomTabNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(MyTabs);
+
+export default function App() {
+ return
+
+
+This package doesn't integrate with React Navigation. If you want to integrate the tab view with React Navigation's navigation system, e.g. want to show screens in the tab bar and be able to navigate between them using `navigation.navigate` etc, use [Material Top Tab Navigator](material-top-tab-navigator.md) instead.
+
+## Installation
+
+To use this package, open a Terminal in the project root and run:
+
+```bash npm2yarn
+npm install react-native-tab-view
+```
+
+The library depends on [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view) for rendering the pages.
+
+
+
+
+If you have a Expo managed project, in your project directory, run:
+
+```bash
+npx expo install react-native-pager-view
+```
+
+
+
+
+If you have a bare React Native project, in your project directory, run:
+
+```bash npm2yarn
+npm install react-native-pager-view
+```
+
+
+
+
+If you're on a Mac and developing for iOS, you also need to install [pods](https://cocoapods.org/) to complete the linking.
+
+```bash
+npx pod-install ios
+```
+
+## Quick start
+
+```js name="React Native Tab View" snack
+// codeblock-focus-start
+import * as React from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { TabView, SceneMap } from 'react-native-tab-view';
+
+// codeblock-focus-end
+const FirstRoute = () => (
+ null}
+ ...
+/>
+```
+
+##### `tabBarPosition`
+
+Position of the tab bar in the tab view. Possible values are `'top'` and `'bottom'`. Defaults to `'top'`.
+
+##### `lazy`
+
+Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes.
+
+By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of unfocused scenes until the user sees them. To enable lazy rendering for a particular scene, return `true` from `lazy` for that `route`:
+
+```js
+ route.name === 'Albums'}
+ ...
+/>
+```
+
+When you enable lazy rendering for a screen, it will usually take some time to render when it comes into focus. You can use the `renderLazyPlaceholder` prop to customize what the user sees during this short period.
+
+You can also pass a boolean to enable lazy for all of the scenes:
+
+```js
+ {
+ if (route.key === 'home') {
+ preventDefault();
+
+ // Do something else
+ }
+ }}
+ ...
+/>
+```
+
+##### `onTabLongPress`
+
+Function to execute on tab long press, use for things like showing a menu with more options
+
+##### `activeColor`
+
+Custom color for icon and label in the active tab.
+
+##### `inactiveColor`
+
+Custom color for icon and label in the inactive tab.
+
+##### `pressColor`
+
+Color for material ripple (Android >= 5.0 only).
+
+##### `pressOpacity`
+
+Opacity for pressed tab (iOS and Android < 5.0 only).
+
+##### `scrollEnabled`
+
+Boolean indicating whether to make the tab bar scrollable.
+
+If you set `scrollEnabled` to `true`, you should also specify a `width` in `tabStyle` to improve the initial render.
+
+##### `bounces`
+
+Boolean indicating whether the tab bar bounces when scrolling.
+
+##### `tabStyle`
+
+Style to apply to the individual tab items in the tab bar.
+
+By default, all tab items take up the same pre-calculated width based on the width of the container. If you want them to take their original width, you can specify `width: 'auto'` in `tabStyle`.
+
+##### `indicatorStyle`
+
+Style to apply to the active indicator.
+
+##### `indicatorContainerStyle`
+
+Style to apply to the container view for the indicator.
+
+##### `contentContainerStyle`
+
+Style to apply to the inner container for tabs.
+
+##### `style` (`TabBar`)
+
+Style to apply to the tab bar container.
+
+##### `gap`
+
+Spacing between the tab items.
+
+##### `testID` (`TabBar`)
+
+Test ID for the tab bar. Can be used for scrolling the tab bar in tests
+
+#### Options
+
+Options describe how each tab should be configured. There are 2 ways to specify options:
+
+- `commonOptions`: Options that apply to all tabs.
+- `options`: Options that apply to specific tabs. It has the route key as the key and the object with options.
+
+Example:
+
+```js
+ (
+ {labelText ?? route.name}
+);
+```
+
+##### `labelStyle`
+
+Style to apply to the tab item label.
+
+##### `icon`
+
+A function that returns a custom React Element to be used as an icon. The function receives an object with the following properties:
+
+- `route` - The route object for the tab.
+- `focused` - Whether the icon is for the focused state.
+- `color` - The color of the icon.
+- `size` - The size of the icon.
+
+```js
+icon: ({ route, focused, color }) => (
+
+
+ );
+ default:
+ return null;
+ }
+};
+```
+
+Do the following:
+
+```js
+const renderScene = ({ route }) => {
+ switch (route.key) {
+ case 'home':
+ return
+
+ );
+ }
+}
+```
+
+Or, wrapped in `React.memo` if you're using function components:
+
+```js
+function HomeComponent() {
+ return (
+
+
+ );
+}
+
+export default React.memo(HomeComponent);
+```
+
+### Avoid one frame delay
+
+We need to measure the width of the container and hence need to wait before rendering some elements on the screen. If you know the initial width upfront, you can pass it in and we won't need to wait for measuring it. Most of the time, it's just the window width.
+
+For example, pass the following `initialLayout` to `TabView`:
+
+```js
+const initialLayout = {
+ height: 0,
+ width: Dimensions.get('window').width,
+};
+```
+
+The tab view will still react to changes in the dimension and adjust accordingly to accommodate things like orientation change.
+
+### Optimize large number of routes
+
+If you've a large number of routes, especially images, it can slow the animation down a lot. You can instead render a limited number of routes.
+
+For example, do the following to render only 2 routes on each side:
+
+```js
+const renderScene = ({ route }) => {
+ if (Math.abs(index - routes.indexOf(route)) > 2) {
+ return /jest/setup.js"]
+}
+```
+
+Jest will run the files specified in `setupFilesAfterEnv` before running your tests, so it's a good place to put your global mocks.
+
+
+Mocking `react-native-screens`
+
+This shouldn't be necessary in most cases. However, if you find yourself in a need to mock `react-native-screens` component for some reason, you should do it by adding following code in `jest/setup.js` file:
+
+```js
+// Include this section for mocking react-native-screens
+jest.mock('react-native-screens', () => {
+ // Require actual module instead of a mock
+ let screens = jest.requireActual('react-native-screens');
+
+ // All exports in react-native-screens are getters
+ // We cannot use spread for cloning as it will call the getters
+ // So we need to clone it with Object.create
+ screens = Object.create(
+ Object.getPrototypeOf(screens),
+ Object.getOwnPropertyDescriptors(screens)
+ );
+
+ // Add mock of the component you need
+ // Here is the example of mocking the Screen component as a View
+ Object.defineProperty(screens, 'Screen', {
+ value: require('react-native').View,
+ });
+
+ return screens;
+});
+```
+
+
+
+If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.
+
+## Fake timers
+
+When writing tests containing navigation with animations, you need to wait until the animations finish. In such cases, we recommend using [`Fake Timers`](https://jestjs.io/docs/timer-mocks) to simulate the passage of time in your tests. This can be done by adding the following line at the beginning of your test file:
+
+```js
+jest.useFakeTimers();
+```
+
+Fake timers replace real implementation of the native timer functions (e.g. `setTimeout()`, `setInterval()` etc,) with a custom implementation that uses a fake clock. This lets you instantly skip animations and reduce the time needed to run your tests by calling methods such as `jest.runAllTimers()`.
+
+Often, component state is updated after an animation completes. To avoid getting an error in such cases, wrap `jest.runAllTimers()` in `act`:
+
+```js
+import { act } from 'react-test-renderer';
+
+// ...
+
+act(() => jest.runAllTimers());
+```
+
+See the examples below for more details on how to use fake timers in tests involving navigation.
+
+## Navigation and visibility
+
+In React Navigation, the previous screen is not unmounted when navigating to a new screen. This means that the previous screen is still present in the component tree, but it's not visible.
+
+When writing tests, you should assert that the expected component is visible or hidden instead of checking if it's rendered or not. React Native Testing Library provides a `toBeVisible` matcher that can be used to check if an element is visible to the user.
+
+```js
+expect(screen.getByText('Settings screen')).toBeVisible();
+```
+
+This is in contrast to the `toBeOnTheScreen` matcher, which checks if the element is rendered in the component tree. This matcher is not recommended when writing tests involving navigation.
+
+By default, the queries from React Native Testing Library (e.g. `getByRole`, `getByText`, `getByLabelText` etc.) [only return visible elements](https://callstack.github.io/react-native-testing-library/docs/api/queries#includehiddenelements-option). So you don't need to do anything special. However, if you're using a different library for your tests, you'll need to account for this behavior.
+
+## Example tests
+
+We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) to write your tests.
+
+In this guide, we will go through some example scenarios and show you how to write tests for them using Jest and React Native Testing Library:
+
+### Navigation between tabs
+
+In this example, we have a bottom tab navigator with two tabs: Home and Settings. We will write a test that asserts that we can navigate between these tabs by pressing the tab bar buttons.
+
+
+
+
+```js title="MyTabs.js"
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, View } from 'react-native';
+
+const HomeScreen = () => {
+ return (
+
+ Home screen
+
+ );
+};
+
+const SettingsScreen = () => {
+ return (
+
+ Settings screen
+
+ );
+};
+
+export const MyTabs = createBottomTabNavigator({
+ screens: {
+ Home: HomeScreen,
+ Settings: SettingsScreen,
+ },
+});
+```
+
+
+
+
+```js title="MyTabs.js"
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, View } from 'react-native';
+
+const HomeScreen = () => {
+ return (
+
+ Home screen
+
+ );
+};
+
+const SettingsScreen = () => {
+ return (
+
+ Settings screen
+
+ );
+};
+
+const Tab = createBottomTabNavigator();
+
+export const MyTabs = () => {
+ return (
+
+
+ );
+};
+```
+
+
+
+
+
+
+
+```js title="MyTabs.test.js"
+import { expect, jest, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { act, render, screen, userEvent } from '@testing-library/react-native';
+
+import { MyTabs } from './MyTabs';
+
+jest.useFakeTimers();
+
+test('navigates to settings by tab bar button press', async () => {
+ const user = userEvent.setup();
+
+ const Navigation = createStaticNavigation(MyTabs);
+
+ render(
+
+
+```js title="MyTabs.test.js"
+import { expect, jest, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { act, render, screen, userEvent } from '@testing-library/react-native';
+
+import { MyTabs } from './MyTabs';
+
+jest.useFakeTimers();
+
+test('navigates to settings by tab bar button press', async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+ );
+
+ const button = screen.getByLabelText('Settings, tab, 2 of 2');
+
+ await user.press(button);
+
+ act(() => jest.runAllTimers());
+
+ expect(screen.getByText('Settings screen')).toBeVisible();
+});
+```
+
+
+
+
+In the above test, we:
+
+- Render the `MyTabs` navigator within a [NavigationContainer](navigation-container.md) in our test.
+- Get the tab bar button using the `getByLabelText` query that matches its accessibility label.
+- Press the button using `userEvent.press(button)` to simulate a user interaction.
+- Run all timers using `jest.runAllTimers()` to skip animations (e.g. animations in the `Pressable` for the button).
+- Assert that the `Settings screen` is visible after the navigation.
+
+### Reacting to a navigation event
+
+In this example, we have a stack navigator with two screens: Home and Surprise. We will write a test that asserts that the text "Surprise!" is displayed after navigating to the Surprise screen.
+
+
+
+
+```js title="MyStack.js"
+import { useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Button, Text, View } from 'react-native';
+import { useEffect, useState } from 'react';
+
+const HomeScreen = () => {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home screen
+ navigation.navigate('Surprise')}
+ title="Click here!"
+ />
+
+ );
+};
+
+const SurpriseScreen = () => {
+ const navigation = useNavigation('Surprise');
+
+ const [textVisible, setTextVisible] = useState(false);
+
+ useEffect(() => {
+ navigation.addListener('transitionEnd', () => setTextVisible(true));
+ }, [navigation]);
+
+ return (
+
+ {textVisible ? Surprise! : ''}
+
+ );
+};
+
+export const MyStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Surprise: SurpriseScreen,
+ },
+});
+```
+
+
+
+
+```js title="MyStack.js"
+import { useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useEffect, useState } from 'react';
+import { Button, Text, View } from 'react-native';
+
+const HomeScreen = () => {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home screen
+ navigation.navigate('Surprise')}
+ title="Click here!"
+ />
+
+ );
+};
+
+const SurpriseScreen = () => {
+ const navigation = useNavigation('Surprise');
+
+ const [textVisible, setTextVisible] = useState(false);
+
+ useEffect(() => {
+ navigation.addListener('transitionEnd', () => setTextVisible(true));
+ }, [navigation]);
+
+ return (
+
+ {textVisible ? Surprise! : ''}
+
+ );
+};
+
+const Stack = createStackNavigator();
+
+export const MyStack = () => {
+ return (
+
+
+ );
+};
+```
+
+
+
+
+
+
+
+```js title="MyStack.test.js"
+import { expect, jest, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { act, render, screen, userEvent } from '@testing-library/react-native';
+
+import { MyStack } from './MyStack';
+
+jest.useFakeTimers();
+
+test('shows surprise text after navigating to surprise screen', async () => {
+ const user = userEvent.setup();
+
+ const Navigation = createStaticNavigation(MyStack);
+
+ render(
+
+
+```js title="MyStack.test.js"
+import { expect, jest, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { act, render, screen, userEvent } from '@testing-library/react-native';
+
+import { MyStack } from './MyStack';
+
+jest.useFakeTimers();
+
+test('shows surprise text after navigating to surprise screen', async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+ );
+
+ await user.press(screen.getByLabelText('Click here!'));
+
+ act(() => jest.runAllTimers());
+
+ expect(screen.getByText('Surprise!')).toBeVisible();
+});
+```
+
+
+
+
+In the above test, we:
+
+- Render the `MyStack` navigator within a [NavigationContainer](navigation-container.md) in our test.
+- Get the button using the `getByLabelText` query that matches its title.
+- Press the button using `userEvent.press(button)` to simulate a user interaction.
+- Run all timers using `jest.runAllTimers()` to skip animations (e.g. navigation animation between screens).
+- Assert that the `Surprise!` text is visible after the transition to the Surprise screen is complete.
+
+### Fetching data with `useFocusEffect`
+
+In this example, we have a bottom tab navigator with two tabs: Home and Pokemon. We will write a test that asserts the data fetching logic on focus in the Pokemon screen.
+
+
+
+
+```js title="MyTabs.js"
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback, useState } from 'react';
+import { Text, View } from 'react-native';
+
+function HomeScreen() {
+ return (
+
+ Home screen
+
+ );
+}
+
+const url = 'https://pokeapi.co/api/v2/pokemon/ditto';
+
+function PokemonScreen() {
+ const [profileData, setProfileData] = useState({ status: 'loading' });
+
+ useFocusEffect(
+ useCallback(() => {
+ if (profileData.status === 'success') {
+ return;
+ }
+
+ setProfileData({ status: 'loading' });
+
+ const controller = new AbortController();
+
+ const fetchUser = async () => {
+ try {
+ const response = await fetch(url, { signal: controller.signal });
+ const data = await response.json();
+
+ setProfileData({ status: 'success', data: data });
+ } catch (error) {
+ setProfileData({ status: 'error' });
+ }
+ };
+
+ fetchUser();
+
+ return () => {
+ controller.abort();
+ };
+ }, [profileData.status])
+ );
+
+ if (profileData.status === 'loading') {
+ return (
+
+ Loading...
+
+ );
+ }
+
+ if (profileData.status === 'error') {
+ return (
+
+ An error occurred!
+
+ );
+ }
+
+ return (
+
+ {profileData.data.name}
+
+ );
+}
+
+export const MyTabs = createBottomTabNavigator({
+ screens: {
+ Home: HomeScreen,
+ Pokemon: PokemonScreen,
+ },
+});
+```
+
+
+
+
+```js title="MyTabs.js"
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback, useState } from 'react';
+import { Text, View } from 'react-native';
+
+function HomeScreen() {
+ return (
+
+ Home screen
+
+ );
+}
+
+const url = 'https://pokeapi.co/api/v2/pokemon/ditto';
+
+function PokemonInfoScreen() {
+ const [profileData, setProfileData] = useState({ status: 'loading' });
+
+ useFocusEffect(
+ useCallback(() => {
+ if (profileData.status === 'success') {
+ return;
+ }
+
+ setProfileData({ status: 'loading' });
+
+ const controller = new AbortController();
+
+ const fetchUser = async () => {
+ try {
+ const response = await fetch(url, { signal: controller.signal });
+ const data = await response.json();
+
+ setProfileData({ status: 'success', data: data });
+ } catch (error) {
+ setProfileData({ status: 'error' });
+ }
+ };
+
+ fetchUser();
+
+ return () => {
+ controller.abort();
+ };
+ }, [profileData.status])
+ );
+
+ if (profileData.status === 'loading') {
+ return (
+
+ Loading...
+
+ );
+ }
+
+ if (profileData.status === 'error') {
+ return (
+
+ An error occurred!
+
+ );
+ }
+
+ return (
+
+ {profileData.data.name}
+
+ );
+}
+
+const Tab = createBottomTabNavigator();
+
+export function MyTabs() {
+ return (
+
+
+ );
+}
+```
+
+
+
+
+To make the test deterministic and isolate it from the real backend, you can mock the network requests with a library such as [Mock Service Worker](https://mswjs.io/):
+
+```js title="msw-handlers.js"
+import { delay, http, HttpResponse } from 'msw';
+
+export const handlers = [
+ http.get('https://pokeapi.co/api/v2/pokemon/ditto', async () => {
+ await delay(1000);
+
+ return HttpResponse.json({
+ id: 132,
+ name: 'ditto',
+ });
+ }),
+];
+```
+
+Here we setup a handler that mocks responses from the API (for this example we're using [PokéAPI](https://pokeapi.co/)). Additionally, we `delay` the response by 1000ms to simulate a network request delay.
+
+Then, we write a Node.js integration module to use the Mock Service Worker in our tests:
+
+```js title="msw-node.js"
+import { setupServer } from 'msw/node';
+import { handlers } from './msw-handlers';
+
+const server = setupServer(...handlers);
+```
+
+Refer to the documentation of the library to learn more about setting it up in your project - [Getting started](https://mswjs.io/docs/getting-started), [React Native integration](https://mswjs.io/docs/integrations/react-native).
+
+
+
+
+```js title="MyTabs.test.js"
+import './msw-node';
+
+import { expect, jest, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { act, render, screen, userEvent } from '@testing-library/react-native';
+
+import { MyTabs } from './MyTabs';
+
+jest.useFakeTimers();
+
+test('loads data on Pokemon info screen after focus', async () => {
+ const user = userEvent.setup();
+
+ const Navigation = createStaticNavigation(MyTabs);
+
+ render(
+
+
+```js title="MyTabs.test.js"
+import './msw-node';
+
+import { expect, jest, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { act, render, screen, userEvent } from '@testing-library/react-native';
+
+import { MyTabs } from './MyTabs';
+
+jest.useFakeTimers();
+
+test('loads data on Pokemon info screen after focus', async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+ );
+
+ const homeTabButton = screen.getByLabelText('Home, tab, 1 of 2');
+ const profileTabButton = screen.getByLabelText('Profile, tab, 2 of 2');
+
+ await user.press(profileTabButton);
+
+ expect(screen.getByText('Loading...')).toBeVisible();
+
+ await act(() => jest.runAllTimers());
+
+ expect(screen.getByText('ditto')).toBeVisible();
+
+ await user.press(homeTabButton);
+
+ await act(() => jest.runAllTimers());
+
+ await user.press(profileTabButton);
+
+ expect(screen.queryByText('Loading...')).not.toBeVisible();
+ expect(screen.getByText('ditto')).toBeVisible();
+});
+```
+
+
+
+
+In the above test, we:
+
+- Assert that the `Loading...` text is visible while the data is being fetched.
+- Run all timers using `jest.runAllTimers()` to skip delays in the network request.
+- Assert that the `ditto` text is visible after the data is fetched.
+- Press the home tab button to navigate to the home screen.
+- Run all timers using `jest.runAllTimers()` to skip animations (e.g. animations in the `Pressable` for the button).
+- Press the profile tab button to navigate back to the Pokemon screen.
+- Ensure that cached data is shown by asserting that the `Loading...` text is not visible and the `ditto` text is visible.
+
+:::note
+
+In a production app, we recommend using a library like [React Query](https://tanstack.com/query/) to handle data fetching and caching. The above example is for demonstration purposes only.
+
+:::
+
+### Re-usable components
+
+To make it easier to test components that don't depend on the navigation structure, we can create a light-weight test navigator:
+
+```js title="TestStackNavigator.js"
+import { useNavigationBuilder, StackRouter } from '@react-navigation/native';
+
+function TestStackNavigator(props) {
+ const { state, descriptors, NavigationContent } = useNavigationBuilder(
+ StackRouter,
+ props
+ );
+
+ return (
+
+ {state.routes.map((route, index) => {
+ return (
+
+ {descriptors[route.key].render()}
+
+ );
+ })}
+
+ );
+}
+
+export function createTestStackNavigator(config) {
+ return createNavigatorFactory(TestStackNavigator)(config);
+}
+```
+
+This lets us test React Navigation specific logic such as `useFocusEffect` without needing to set up a full navigator.
+
+We can use this test navigator in our tests like this:
+
+
+
+
+```js title="MyComponent.test.js"
+import { act, render, screen } from '@testing-library/react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createTestStackNavigator } from './TestStackNavigator';
+import { MyComponent } from './MyComponent';
+
+test('does not show modal when not focused', () => {
+ const TestStack = createTestStackNavigator({
+ screens: {
+ A: MyComponent,
+ B: () => null,
+ },
+ });
+
+ const Navigation = createStaticNavigation(TestStack);
+
+ render(
+
+
+
+```js title="MyComponent.test.js"
+import { act, render, screen } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createTestStackNavigator } from './TestStackNavigator';
+import { MyComponent } from './MyComponent';
+
+test('does not show modal when not focused', () => {
+ const Stack = createTestStackNavigator();
+
+ const TestStack = () => (
+
+ null} />
+
+ );
+
+ render(
+
+
+ );
+
+ expect(screen.queryByText('Modal')).not.toBeVisible();
+});
+
+test('shows modal when focused', () => {
+ const Stack = createTestStackNavigator();
+
+ const TestStack = () => (
+
+ null} />
+
+ );
+
+ render(
+
+
+ );
+
+ expect(screen.getByText('Modal')).toBeVisible();
+});
+```
+
+
+
+
+Here we create a test stack navigator using the `createTestStackNavigator` function. We then render the `MyComponent` component within the test navigator and assert that the modal is shown or hidden based on the focus state.
+
+The `initialState` prop is used to set the initial state of the navigator, i.e. which screens are rendered in the stack and which one is focused. See [navigation state](navigation-state.md) for more information on the structure of the state object.
+
+You can also pass a [`ref`](navigation-container.md#ref) to programmatically navigate in your tests.
+
+The test navigator is a simplified version of the stack navigator, but it's still a real navigator and behaves like one. This means that you can use it to test any other navigation logic.
+
+See [Custom navigators](custom-navigators.md) for more information on how to write custom navigators if you want adjust the behavior of the test navigator or add more functionality.
+
+## Best practices
+
+Generally, we recommend avoiding mocking React Navigation. Mocking can help you isolate the component you're testing, but when testing components with navigation logic, mocking means that your tests don't test for the navigation logic.
+
+- Mocking APIs such as `useFocusEffect` means you're not testing the focus logic in your component.
+- Mocking `navigation` prop or `useNavigation` means that the `navigation` object may not have the same shape as the real one.
+- Asserting `navigation.navigate` calls means you only test that the function was called, not that the call was correct based on the navigation structure.
+- etc.
+
+Avoiding mocks means additional work when writing tests, but it also means:
+
+- Refactors that don't change the logic won't break the tests, e.g. changing `navigation` prop to `useNavigation`, using a different navigation action that does the same thing, etc.
+- Library upgrades or refactor that actually change the behavior will correctly break the tests, surfacing actual regressions.
+
+Tests should break when there's a regression, not due to a refactor. Otherwise it leads to additional work to fix the tests, making it harder to know when a regression is introduced.
diff --git a/versioned_docs/version-8.x/themes.md b/versioned_docs/version-8.x/themes.md
new file mode 100755
index 00000000000..e9ced1c571a
--- /dev/null
+++ b/versioned_docs/version-8.x/themes.md
@@ -0,0 +1,853 @@
+---
+id: themes
+title: Themes
+sidebar_label: Themes
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Themes allow you to change the colors and fonts of various components provided by React Navigation. You can use themes to:
+
+- Customize the colors and fonts to match your brand
+- Provide light and dark themes based on the time of the day or user preference
+
+## Basic usage
+
+To pass a custom theme, you can pass the `theme` prop to the navigation container.
+
+
+
+
+```js name="Simple theme" snack
+// codeblock-focus-start
+import * as React from 'react';
+import {
+ useNavigation,
+ createStaticNavigation,
+ DefaultTheme,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { View, Text } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
+
+// codeblock-focus-start
+
+const MyTheme = {
+ ...DefaultTheme,
+ colors: {
+ ...DefaultTheme.colors,
+ background: 'rgb(140, 201, 125)',
+ primary: 'rgb(255, 45, 85)',
+ },
+};
+// codeblock-focus-end
+
+function SettingsScreen({ route }) {
+ const navigation = useNavigation('Settings');
+ const { user } = route.params;
+
+ return (
+
+ Settings Screen
+ userParam: {JSON.stringify(user)}
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ return (
+
+ Profile Screen
+
+ );
+}
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Panel', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const PanelStack = createNativeStackNavigator({
+ screens: {
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+
+const Drawer = createDrawerNavigator({
+ initialRouteName: 'Panel',
+ screens: {
+ Home: HomeScreen,
+ Panel: PanelStack,
+ },
+});
+
+// codeblock-focus-start
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+ // highlight-next-line
+ return
+
+
+```js name="Simple theme" snack
+// codeblock-focus-start
+import * as React from 'react';
+import {
+ NavigationContainer,
+ DefaultTheme,
+ useNavigation,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { View, Text } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
+
+// codeblock-focus-start
+
+const MyTheme = {
+ ...DefaultTheme,
+ colors: {
+ ...DefaultTheme.colors,
+ background: 'rgb(140, 201, 125)',
+ primary: 'rgb(255, 45, 85)',
+ },
+};
+// codeblock-focus-end
+
+function SettingsScreen({ route }) {
+ const navigation = useNavigation('Settings');
+ const { user } = route.params;
+
+ return (
+
+ Settings Screen
+ userParam: {JSON.stringify(user)}
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+
+ );
+}
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Root', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const Drawer = createDrawerNavigator();
+const Stack = createNativeStackNavigator();
+
+function Root() {
+ return (
+
+
+ );
+}
+
+// codeblock-focus-start
+
+export default function App() {
+ return (
+ // highlight-next-line
+
+
+
+
+ );
+}
+// codeblock-focus-start
+```
+
+
+
+
+You can change the theme prop dynamically and all the components will automatically update to reflect the new theme. If you haven't provided a `theme` prop, the default theme will be used.
+
+## Properties
+
+A theme is a JS object containing a list of colors to use. It contains the following properties:
+
+- `dark` (`boolean`): Whether this is a dark theme or a light theme
+- `colors` (`object`): Various colors used by react navigation components:
+ - `primary` (`string`): The primary color of the app used to tint various elements. Usually you'll want to use your brand color for this.
+ - `background` (`string`): The color of various backgrounds, such as the background color for the screens.
+ - `card` (`string`): The background color of card-like elements, such as headers, tab bars etc.
+ - `text` (`string`): The text color of various elements.
+ - `border` (`string`): The color of borders, e.g. header border, tab bar border etc.
+ - `notification` (`string`): The color of notifications and badge (e.g. badge in bottom tabs).
+- `fonts` (`object`): Various fonts used by react navigation components:
+ - `regular` (`object`): Style object for the primary font used in the app.
+ - `medium` (`object`): Style object for the semi-bold variant of the primary font.
+ - `bold` (`object`): Style object for the bold variant of the primary font.
+ - `heavy` (`object`): Style object for the extra-bold variant of the primary font.
+
+The style objects for fonts contain the following properties:
+
+- `fontFamily` (`string`): The name of the font family (or font stack on Web) to use, e.g. `Roboto` or `Helvetica Neue`. The system fonts are used by default.
+- `fontWeight` (`string`): The font weight to use. Valid values are `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.
+
+When creating a custom theme, you will need to provide all of these properties.
+
+Example theme:
+
+```js
+const WEB_FONT_STACK =
+ 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+
+const MyTheme = {
+ dark: false,
+ colors: {
+ primary: 'rgb(255, 45, 85)',
+ background: 'rgb(242, 242, 242)',
+ card: 'rgb(255, 255, 255)',
+ text: 'rgb(28, 28, 30)',
+ border: 'rgb(199, 199, 204)',
+ notification: 'rgb(255, 69, 58)',
+ },
+ fonts: Platform.select({
+ web: {
+ regular: {
+ fontFamily: WEB_FONT_STACK,
+ fontWeight: '400',
+ },
+ medium: {
+ fontFamily: WEB_FONT_STACK,
+ fontWeight: '500',
+ },
+ bold: {
+ fontFamily: WEB_FONT_STACK,
+ fontWeight: '600',
+ },
+ heavy: {
+ fontFamily: WEB_FONT_STACK,
+ fontWeight: '700',
+ },
+ },
+ ios: {
+ regular: {
+ fontFamily: 'System',
+ fontWeight: '400',
+ },
+ medium: {
+ fontFamily: 'System',
+ fontWeight: '500',
+ },
+ bold: {
+ fontFamily: 'System',
+ fontWeight: '600',
+ },
+ heavy: {
+ fontFamily: 'System',
+ fontWeight: '700',
+ },
+ },
+ default: {
+ regular: {
+ fontFamily: 'sans-serif',
+ fontWeight: 'normal',
+ },
+ medium: {
+ fontFamily: 'sans-serif-medium',
+ fontWeight: 'normal',
+ },
+ bold: {
+ fontFamily: 'sans-serif',
+ fontWeight: '600',
+ },
+ heavy: {
+ fontFamily: 'sans-serif',
+ fontWeight: '700',
+ },
+ },
+ }),
+};
+```
+
+Providing a theme will take care of styling of all the official navigators. React Navigation also provides several tools to help you make your customizations of those navigators and the screens within the navigators can use the theme too.
+
+## Using platform colors
+
+Theme colors support `ColorValue` type, which means you can use `PlatformColor`, `DynamicColorIOS` on native, and CSS custom properties on Web for more flexibility.
+
+Example theme using `PlatformColor`:
+
+```js
+import { Platform, PlatformColor } from 'react-native';
+import { DefaultTheme } from '@react-navigation/native';
+
+const MyTheme = {
+ ...DefaultTheme,
+ colors: Platform.select({
+ ios: () => ({
+ primary: PlatformColor('systemRed'),
+ background: PlatformColor('systemGroupedBackground'),
+ card: PlatformColor('tertiarySystemBackground'),
+ text: PlatformColor('label'),
+ border: PlatformColor('separator'),
+ notification: PlatformColor('systemRed'),
+ }),
+ android: () => ({
+ primary: PlatformColor('@android:color/system_primary_light'),
+ background: PlatformColor(
+ '@android:color/system_surface_container_light'
+ ),
+ card: PlatformColor('@android:color/system_background_light'),
+ text: PlatformColor('@android:color/system_on_surface_light'),
+ border: PlatformColor('@android:color/system_outline_variant_light'),
+ notification: PlatformColor('@android:color/holo_red_light'),
+ }),
+ default: () => DefaultTheme.colors,
+ })(),
+};
+```
+
+This allows your app's navigation UI to automatically adapt to system theme changes and use native colors.
+
+:::note
+
+When using dynamic colors like `PlatformColor` or `DynamicColorIOS`, React Navigation cannot automatically adjust colors in some scenarios (e.g., adjusting the text color based on background color). In these cases, it will fall back to pre-defined colors according to the theme.
+
+:::
+
+## Built-in themes
+
+As operating systems add built-in support for light and dark modes, supporting dark mode is less about keeping hip to trends and more about conforming to the average user expectations for how apps should work. In order to provide support for light and dark mode in a way that is reasonably consistent with the OS defaults, these themes are built in to React Navigation.
+
+You can import the default and dark themes like so:
+
+```js
+import { DefaultTheme, DarkTheme } from '@react-navigation/native';
+```
+
+## Keeping the native theme in sync
+
+If you're changing the theme in the app, native UI elements such as Alert, ActionSheet etc. won't reflect the new theme. You can do the following to keep the native theme in sync:
+
+```js
+React.useEffect(() => {
+ const colorScheme = theme.dark ? 'dark' : 'light';
+
+ if (Platform.OS === 'web') {
+ document.documentElement.style.colorScheme = colorScheme;
+ } else {
+ Appearance.setColorScheme(colorScheme);
+ }
+}, [theme.dark]);
+```
+
+Alternatively, you can use the [`useColorScheme`](#using-the-operating-system-preferences) hook to get the current native color scheme and update the theme accordingly.
+
+## Using the operating system preferences
+
+On iOS 13+ and Android 10+, you can get user's preferred color scheme (`'dark'` or `'light'`) with the ([`useColorScheme` hook](https://reactnative.dev/docs/usecolorscheme)).
+
+
+
+
+```js name="Operating system color theme" snack
+import * as React from 'react';
+// codeblock-focus-start
+import {
+ useNavigation,
+ createStaticNavigation,
+ DefaultTheme,
+ DarkTheme,
+ useTheme,
+} from '@react-navigation/native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
+
+function SettingsScreen({ route }) {
+ const navigation = useNavigation('Settings');
+ const { user } = route.params;
+ const { colors } = useTheme();
+
+ return (
+
+ Settings Screen
+
+ userParam: {JSON.stringify(user)}
+
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const { colors } = useTheme();
+
+ return (
+
+ Profile Screen
+
+ );
+}
+
+function MyButton() {
+ const { colors } = useTheme();
+
+ return (
+
+ Button!
+
+ );
+}
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+ const { colors } = useTheme();
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Root', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const PanelStack = createNativeStackNavigator({
+ screens: {
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+
+const Drawer = createDrawerNavigator({
+ initialRouteName: 'Panel',
+ screens: {
+ Home: HomeScreen,
+ Panel: PanelStack,
+ },
+});
+
+// codeblock-focus-start
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+ // highlight-next-line
+ const scheme = useColorScheme();
+
+ // highlight-next-line
+ return
+
+
+```js name="Operating system color theme" snack
+import * as React from 'react';
+// codeblock-focus-start
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
+import {
+ NavigationContainer,
+ DefaultTheme,
+ DarkTheme,
+ useTheme,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
+
+function SettingsScreen({ route, navigation }) {
+ const { user } = route.params;
+ const { colors } = useTheme();
+
+ return (
+
+ Settings Screen
+
+ userParam: {JSON.stringify(user)}
+
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const { colors } = useTheme();
+
+ return (
+
+ Profile Screen
+
+ );
+}
+
+function MyButton() {
+ const { colors } = useTheme();
+
+ return (
+
+ Button!
+
+ );
+}
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+ const { colors } = useTheme();
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Root', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const Drawer = createDrawerNavigator();
+const Stack = createNativeStackNavigator();
+
+function Root() {
+ return (
+
+
+ );
+}
+
+// codeblock-focus-start
+
+export default function App() {
+ // highlight-next-line
+ const scheme = useColorScheme();
+
+ return (
+ // highlight-next-line
+
+
+
+
+ );
+}
+// codeblock-focus-end
+```
+
+
+
+
+## Using the current theme in your own components
+
+To gain access to the theme in any component that is rendered inside the navigation container:, you can use the `useTheme` hook. It returns the theme object:
+
+
+
+
+```js name="System themes" snack
+import * as React from 'react';
+// codeblock-focus-start
+import {
+ useNavigation,
+ createStaticNavigation,
+ DefaultTheme,
+ DarkTheme,
+ useTheme,
+} from '@react-navigation/native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
+
+function SettingsScreen({ route }) {
+ const navigation = useNavigation('Settings');
+ const { user } = route.params;
+ const { colors } = useTheme();
+
+ return (
+
+ Settings Screen
+
+ userParam: {JSON.stringify(user)}
+
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const { colors } = useTheme();
+
+ return (
+
+ Profile Screen
+
+ );
+}
+
+// codeblock-focus-start
+
+function MyButton() {
+ // highlight-next-line
+ const { colors } = useTheme();
+
+ return (
+
+ Button!
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+ const { colors } = useTheme();
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Root', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const PanelStack = createNativeStackNavigator({
+ screens: {
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+
+const Drawer = createDrawerNavigator({
+ initialRouteName: 'Panel',
+ screens: {
+ Home: HomeScreen,
+ Panel: PanelStack,
+ },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+ const scheme = useColorScheme();
+
+ return
+
+
+```js name="System themes" snack
+import * as React from 'react';
+// codeblock-focus-start
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
+import {
+ NavigationContainer,
+ DefaultTheme,
+ DarkTheme,
+ useTheme,
+ useNavigation,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+function SettingsScreen({ route, navigation }) {
+ const { colors } = useTheme();
+ const { user } = route.params;
+
+ return (
+
+ Settings Screen
+
+ userParam: {JSON.stringify(user)}
+
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const { colors } = useTheme();
+
+ return (
+
+ Profile Screen
+
+ );
+}
+
+// codeblock-focus-start
+
+function MyButton() {
+ // highlight-next-line
+ const { colors } = useTheme();
+
+ return (
+
+ Button!
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+ const { colors } = useTheme();
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Root', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const Drawer = createDrawerNavigator();
+const Stack = createNativeStackNavigator();
+
+function Root() {
+ return (
+
+
+ );
+}
+
+export default function App() {
+ const scheme = useColorScheme();
+
+ return (
+
+
+
+
+ );
+}
+```
+
+
+
diff --git a/versioned_docs/version-8.x/troubleshooting.md b/versioned_docs/version-8.x/troubleshooting.md
new file mode 100755
index 00000000000..1186ea690eb
--- /dev/null
+++ b/versioned_docs/version-8.x/troubleshooting.md
@@ -0,0 +1,491 @@
+---
+id: troubleshooting
+title: Troubleshooting
+sidebar_label: Troubleshooting
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation. These issues may or may not be related to React Navigation itself.
+
+Before troubleshooting an issue, make sure that you have upgraded to **the latest available versions** of the packages. You can install the latest versions by installing the packages again (e.g. `npm install package-name`).
+
+## I'm getting an error "Unable to resolve module" after updating to the latest version
+
+This might happen for 3 reasons:
+
+### Stale cache of Metro bundler
+
+If the module points to a local file (i.e. the name of the module starts with `./`), then it's probably due to stale cache. To fix this, try the following solutions.
+
+If you're using Expo, run:
+
+```bash
+expo start -c
+```
+
+If you're not using Expo, run:
+
+```bash
+npx react-native start --reset-cache
+```
+
+If that doesn't work, you can also try the following:
+
+```bash
+rm -rf $TMPDIR/metro-bundler-cache-*
+```
+
+### Missing peer dependency
+
+If the module points to an npm package (i.e. the name of the module doesn't with `./`), then it's probably due to a missing dependency. To fix this, install the dependency in your project:
+
+```bash npm2yarn
+npm install name-of-the-module
+```
+
+Sometimes it might even be due to a corrupt installation. If clearing cache didn't work, try deleting your `node_modules` folder and run `npm install` again.
+
+### Missing extensions in metro configuration
+
+Sometimes the error may look like this:
+
+```bash
+Error: While trying to resolve module "@react-navigation/native" from file "/path/to/src/App.js", the package "/path/to/node_modules/@react-navigation/native/package.json" was successfully found. However, this package itself specifies a "main" module field that could not be resolved ("/path/to/node_modules/@react-navigation/native/src/index.tsx"
+```
+
+This can happen if you have a custom configuration for metro and haven't specified `ts` and `tsx` as valid extensions. These extensions are present in the default configuration. To check if this is the issue, look for a `metro.config.js` file in your project and check if you have specified the [`sourceExts`](https://facebook.github.io/metro/docs/en/configuration#sourceexts) option. It should at least have the following configuration:
+
+```js
+sourceExts: ['js', 'json', 'ts', 'tsx'];
+```
+
+If it's missing these extensions, add them and then clear metro cache as shown in the section above.
+
+## I'm getting "SyntaxError in @react-navigation/xxx/xxx.tsx" or "SyntaxError: /xxx/@react-navigation/xxx/xxx.tsx: Unexpected token"
+
+This might happen if you have an old version of the `@react-native/babel-preset` package. Try upgrading it to the latest version.
+
+```bash npm2yarn
+npm install --save-dev @react-native/babel-preset
+```
+
+If you have `@babel/core` installed, also upgrade it to latest version.
+
+```bash npm2yarn
+npm install --save-dev @babel/core
+```
+
+If upgrading the packages don't help, you can also try deleting your `node_modules` and then the lock the file and reinstall your dependencies.
+
+If you use `npm`:
+
+```bash
+rm -rf node_modules
+rm package-lock.json
+npm install
+```
+
+If you use `yarn`:
+
+```bash
+rm -rf node_modules
+rm yarn.lock
+yarn
+```
+
+:::warning
+
+Deleting the lockfile is generally not recommended as it may upgrade your dependencies to versions that haven't been tested with your project. So only use this as a last resort.
+
+:::
+
+After upgrading or reinstalling the packages, you should also clear Metro bundler's cache following the instructions earlier in the page.
+
+## I'm getting "Module '[...]' has no exported member 'xxx' when using TypeScript
+
+This might happen if you have an old version of TypeScript in your project. You can try upgrading it:
+
+```bash npm2yarn
+npm install --save-dev typescript
+```
+
+## I'm getting an error "null is not an object (evaluating 'RNGestureHandlerModule.default.Direction')"
+
+This and some similar errors might occur if you have a bare React Native project and the library [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) library isn't linked.
+
+Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
+
+```bash
+react-native unlink react-native-gesture-handler
+```
+
+If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
+
+```bash
+cd ios
+pod install
+cd ..
+```
+
+Now rebuild the app and test on your device or simulator.
+
+## I'm getting an error "requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager"
+
+This and some similar errors might occur if you have a bare React Native project and the library [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context) library isn't linked.
+
+Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
+
+```bash
+react-native unlink react-native-safe-area-context
+```
+
+If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
+
+```bash
+cd ios
+pod install
+cd ..
+```
+
+Now rebuild the app and test on your device or simulator.
+
+## I'm getting an error "Tried to register two views with the same name RNCSafeAreaProvider"
+
+This might occur if you have multiple versions of [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context) installed.
+
+If you're using Expo managed workflow, it's likely that you have installed an incompatible version. To install the correct version, run:
+
+```bash
+npx expo install react-native-safe-area-context
+```
+
+If it didn't fix the error or you're not using Expo managed workflow, you'll need to check which package depends on a different version of `react-native-safe-area-context`.
+
+If you use `yarn`, run:
+
+```bash
+yarn why react-native-safe-area-context
+```
+
+If you use `npm`, run:
+
+```bash
+npm ls react-native-safe-area-context
+```
+
+This will tell you if a package you use has a dependency on `react-native-safe-area-context`. If it's a third-party package, you should open an issue on the relevant repo's issue tracker explaining the problem. Generally for libraries, dependencies containing native code should be defined in `peerDependencies` instead of `dependencies` to avoid such issues.
+
+If it's already in `peerDependencies` and not in `dependencies`, and you use `npm`, it might be because of incompatible version range defined for the package. The author of the library will need to relax the version range in such cases to allow a wider range of versions to be installed.
+
+If you use `yarn`, you can also temporarily override the version being installed using `resolutions`. Add the following in your `package.json`:
+
+```json
+"resolutions": {
+ "react-native-safe-area-context": ""
+}
+```
+
+And then run:
+
+```bash
+yarn
+```
+
+If you're on iOS and not using Expo managed workflow, also run:
+
+```bash
+cd ios
+pod install
+cd ..
+```
+
+Now rebuild the app and test on your device or simulator.
+
+## Nothing is visible on the screen after adding a `View`
+
+If you wrap the container in a `View`, make sure the `View` stretches to fill the container using `flex: 1`:
+
+
+
+
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+
+/* ... */
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return (
+ // highlight-next-line
+
+
+ );
+}
+```
+
+
+
+
+```js
+import * as React from 'react';
+import { View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+
+export default function App() {
+ return (
+ // highlight-next-line
+
+ {/* ... */}
+
+ );
+}
+```
+
+
+
+
+## I get the warning "Non-serializable values were found in the navigation state"
+
+This can happen if you are passing non-serializable values such as class instances, functions etc. in params. React Navigation warns you in this case because this can break other functionality such [state persistence](state-persistence.md), [deep linking](deep-linking.md), [web support](web-support.md) etc.
+
+Example of some use cases for passing functions in params are the following:
+
+- To pass a callback to use in a header button. This can be achieved using `navigation.setOptions` instead. See the [guide for header buttons](header-buttons.md#header-interaction-with-its-screen-component) for examples.
+- To pass a callback to the next screen which it can call to pass some data back. You can usually achieve it using `popTo` instead. See [passing params to a previous screen](params.md#passing-params-to-a-previous-screen) for examples.
+- To pass complex data to another screen. Instead of passing the data `params`, you can store that complex data somewhere else (like a global store), and pass an id instead. Then the screen can get the data from the global store using the id. See [what should be in params](params.md#what-should-be-in-params).
+- Pass data, callbacks etc. from a parent to child screens. You can either use React Context, or pass a children callback to pass these down instead of using params. See [passing additional props](hello-react-navigation.md#passing-additional-props).
+
+We don't generally recommend passing functions in params. But if you don't use state persistence, deep links, or use React Navigation on Web, then you can choose to ignore it. To ignore the warning, you can use `LogBox.ignoreLogs`.
+
+Example:
+
+```js
+import { LogBox } from 'react-native';
+
+LogBox.ignoreLogs([
+ 'Non-serializable values were found in the navigation state',
+]);
+```
+
+## I'm getting "Invalid hook call. Hooks can only be called inside of the body of a function component"
+
+This can happen when you pass a React component to an option that accepts a function returning a react element. For example, the [`headerTitle` option in native stack navigator](native-stack-navigator.md#headertitle) expects a function returning a react element:
+
+
+
+
+```js
+const Stack = createNativeStackNavigator({
+ screens: {
+ Home: {
+ screen: Home,
+ options: {
+ // highlight-next-line
+ headerTitle: (props) =>
+
+
+```js
+
+
+
+If you directly pass a function here, you'll get this error when using hooks:
+
+
+
+
+```js
+const Stack = createNativeStackNavigator({
+ screens: {
+ Home: {
+ screen: Home,
+ options: {
+ // This is not correct
+ // highlight-next-line
+ headerTitle: MyTitle,
+ },
+ },
+ },
+});
+```
+
+
+
+
+```js
+
+
+
+The same applies to other options like `headerLeft`, `headerRight`, `tabBarIcon` etc. as well as props such as `tabBar`, `drawerContent` etc.
+
+## Screens are unmounting/remounting during navigation
+
+Sometimes you might have noticed that your screens unmount/remount, or your local component state or the navigation state resets when you navigate. This might happen if you are creating React components during render.
+
+The simplest example is something like following:
+
+```js
+function App() {
+ return (
+
+ {
+ return
+ );
+}
+```
+
+The `component` prop expects a React Component, but in the example, it's getting a function returning an React Element. While superficially a component and a function returning a React Element look the exact same, they don't behave the same way when used.
+
+Here, every time the component re-renders, a new function will be created and passed to the `component` prop. React will see a new component and unmount the previous component before rendering the new one. This will cause any local state in the old component to be lost. React Navigation will detect and warn for this specific case but there can be other ways you might be creating components during render which it can't detect.
+
+Another easy to identify example of this is when you create a component inside another component:
+
+
+
+
+```js
+function App() {
+ const Home = () => {
+ return
+
+
+```js
+function App() {
+ const Home = () => {
+ return
+
+ );
+}
+```
+
+
+
+
+Or when you use a higher order component (such as `connect` from Redux, or `withX` functions that accept a component) inside another component:
+
+```js
+function App() {
+ return (
+
+
+ );
+}
+```
+
+If you're unsure, it's always best to make sure that the components you are using as screens are defined outside of a React component. They could be defined in another file and imported, or defined at the top level scope in the same file:
+
+
+
+
+```js
+const Home = () => {
+ // ...
+
+ return
+
+
+```js
+const Home = () => {
+ // ...
+
+ return
+
+ );
+}
+```
+
+
+
+
+This is not React Navigation specific, but related to React in general. You should always avoid creating components during render, whether you are using React Navigation or not.
+
+## App is not working properly when connected to Chrome Debugger
+
+When the app is connected to Chrome Debugger (or other tools that use Chrome Debugger such as [React Native Debugger](https://github.com/jhen0409/react-native-debugger)) you might encounter various issues related to timing.
+
+This can result in issues such as button presses taking a long time to register or not working at all, [gestures and animations being slow and buggy](https://github.com/facebook/react-native/issues/2367) etc. There can be other functional issues such as promises not resolving, [timeouts and intervals not working correctly](https://github.com/facebook/react-native/issues/4470) etc. as well.
+
+The issues are not related to React Navigation, but due to the nature of how the Chrome Debugger works. When connected to Chrome Debugger, your whole app runs on Chrome and communicates with the native app via sockets over the network, which can introduce latency and timing related issues.
+
+So, unless you are trying to debug something, it's better to test the app without being connected to the Chrome Debugger. If you are using iOS, you can alternatively use [Safari to debug your app](https://reactnative.dev/docs/debugging#safari-developer-tools) which debugs the app on the device directly and does not have these issues, though it has other downsides.
diff --git a/versioned_docs/version-8.x/typescript.md b/versioned_docs/version-8.x/typescript.md
new file mode 100755
index 00000000000..da1136cca14
--- /dev/null
+++ b/versioned_docs/version-8.x/typescript.md
@@ -0,0 +1,758 @@
+---
+id: typescript
+title: Type checking with TypeScript
+sidebar_label: Configuring TypeScript
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+React Navigation can be configured to type-check screens and their params, as well as various other APIs using TypeScript. This provides better intelliSense and type safety when working with React Navigation.
+
+First, make sure you have the following configuration in your `tsconfig.json` under `compilerOptions`:
+
+- `strict: true` or `strictNullChecks: true` - Necessary for intelliSense and type inference to work correctly.
+- `moduleResolution: "bundler"` - Necessary to resolve the types correctly and match the behavior of [Metro](https://metrobundler.dev/) and other bundlers.
+
+
+
+
+## Setting up the types
+
+There are 2 steps to configure TypeScript with the static API:
+
+### Specify the root navigator's type
+
+For the type-inference to work, React Navigation needs to know the type of the root navigator in your app. To do this, you can declare a module augmentation for `@react-navigation/core` and extend the `RootNavigator` interface with the type of your root navigator.
+
+```ts
+const HomeTabs = createBottomTabNavigator({
+ screens: {
+ Feed: FeedScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const RootStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeTabs,
+ },
+});
+
+// highlight-next-line
+type RootStackType = typeof RootStack;
+
+// highlight-start
+declare module '@react-navigation/core' {
+ interface RootNavigator extends RootStackType {}
+}
+// highlight-end
+```
+
+This is needed to type-check hooks such as [`useNavigation`](use-navigation.md), [`useRoute`](use-route.md), [`useNavigationState`](use-navigation-state.md) etc.
+
+### Specify param types for screens
+
+After setting up the type for the root navigator, all we need to do is specify the type of params that our screens accept.
+
+This can be done in 2 ways:
+
+1. The type annotation for the component specified in `screen`:
+
+ ```ts
+ import type { StaticScreenProps } from '@react-navigation/native';
+
+ // highlight-start
+ type ProfileParams = {
+ userId: string;
+ };
+ // highlight-end
+
+ // highlight-next-line
+ function ProfileScreen({ route }: StaticScreenProps) {
+ // ...
+ }
+ ```
+
+ In the above example, the type of `route.params` is `{ userId: string }` based on the type annotation in `StaticScreenProps`.
+
+ If you aren't using the `route` object in the component, you can specify the `props` as `_` to avoid unused variable warnings:
+
+ ```ts
+ // highlight-next-line
+ function ProfileScreen(_: StaticScreenProps) {
+ // ...
+ }
+ ```
+
+2. The path pattern specified in the linking config (e.g. for `linking: 'profile/:userId'`, the type of `route.params` is `{ userId: string }`). The type can be further customized by using a [`parse` function in the linking config](configuring-links.md#passing-params):
+
+ ```ts
+ linking: {
+ path: 'profile/:userId',
+ parse: {
+ userId: (id) => parseInt(id, 10),
+ },
+ },
+ ```
+
+ The above example would make the type of `route.params` be `{ userId: number }` since the `parse` function converts the string from the URL to a number.
+
+If both `screen` and `linking` specify params, the final type of `route.params` is the intersection of both types.
+
+This is how the complete example would look like:
+
+```ts
+const MyStack = createNativeStackNavigator({
+ screens: {
+ // highlight-start
+ Profile: createNativeStackScreen({
+ screen: ProfileScreen,
+ linking: {
+ path: 'profile/:userId',
+ parse: {
+ userId: (id) => parseInt(id, 10),
+ },
+ },
+ }),
+ // highlight-end
+ },
+});
+```
+
+If your app supports deep linking or runs on the Web, it is recommended to specify params that appear in the path pattern in the linking config. Any additional params (e.g. query params) can be specified in the component's props.
+
+If you have specified the params in `linking`, it's recommended to not specify them again in the component's props, and use `useRoute('ScreenName')` instead to get the correctly typed `route` object.
+
+The `createXScreen` helper functions enable type inference in screen configuration callbacks like `options`, `listeners`, etc. Each navigator exports its own version of the helper function:
+
+- `createNativeStackScreen` from `@react-navigation/native-stack`
+- `createStackScreen` from `@react-navigation/stack`
+- `createBottomTabScreen` from `@react-navigation/bottom-tabs`
+- `createDrawerScreen` from `@react-navigation/drawer`
+- `createMaterialTopTabScreen` from `@react-navigation/material-top-tabs`
+
+See [Static configuration](static-configuration.md#createxscreen) for more details.
+
+## Using typed hooks
+
+The [`useRoute`](use-route.md), [`useNavigation`](use-navigation.md), and [`useNavigationState`](use-navigation-state.md) hooks accept the name of the current screen or any parent screen where it's nested as an argument to infer the correct types.
+
+Once the types are set up, these hooks are automatically typed based on the name of the screen passed to them.
+
+With `useRoute`:
+
+```ts
+function ProfileScreen() {
+ const route = useRoute('Profile');
+
+ // The params are correctly typed here
+ const { userId } = route.params;
+
+ // ...
+}
+```
+
+With `useNavigation`:
+
+```ts
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ // Helpers like `push` are correctly typed here
+ navigation.push('Feed');
+
+ // ...
+}
+```
+
+With `useNavigationState`:
+
+```ts
+function ProfileScreen() {
+ const focusedRouteName = useNavigationState(
+ 'Profile',
+ // The state is correctly typed here
+ (state) => state.routes[state.index].name
+ );
+
+ // The `focusedRouteName` type is one of the route names
+ // defined in the navigator where `Profile` is defined
+ console.log(focusedRouteName);
+
+ // ...
+}
+```
+
+It's also possible to use these hooks without specifying the screen name - which can be useful in re-usable components that can be used across multiple screens. In this case, different things happen based on the hook.
+
+The `useRoute` hook returns a union of all routes in the app, and can be narrowed down using type guards:
+
+```ts
+function Header() {
+ const route = useRoute();
+
+ // The route is an union of all routes in the app
+ console.log(route.name);
+
+ // It's possible to narrow down the type using type guards
+ if (route.name === 'Profile') {
+ // Here route.params is correctly typed
+ const { userId } = route.params;
+ }
+
+ // ...
+}
+```
+
+The `useNavigation` hook returns a generic navigation object that refers to the root navigator. This means that any navigation actions can be called as if they are used in a screen of the root navigator:
+
+```ts
+function Header() {
+ const navigation = useNavigation();
+
+ // A generic navigation object that refers to the root navigator
+ navigation.navigate('Profile', { userId: '123' });
+
+ // ...
+}
+```
+
+The `useNavigationState` hook returns a generic navigation state without any navigator-specific types:
+
+```ts
+function Header() {
+ const focusedRouteName = useNavigationState((state) => {
+ // The state is a generic navigation state
+ return state.routes[state.index].name;
+ });
+
+ // The `focusedRouteName` type is `string`
+ console.log(focusedRouteName);
+
+ // ...
+}
+```
+
+## Nesting navigator using dynamic API
+
+Consider the following example:
+
+```js
+const Tab = createBottomTabNavigator();
+
+function HomeTabs() {
+ return (
+
+
+ );
+}
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeTabs,
+ },
+});
+```
+
+Here, the `HomeTabs` component is defined using the dynamic API. This means that React Navigation won't know about the screens defined in the nested navigator and the types for those screens. To fix this, we'd need to specify the types for the nested navigator explicitly.
+
+This can be done by annotating the type of the [`route`](route-object.md) prop that the screen component receives:
+
+```ts
+type HomeTabsParamList = {
+ Feed: undefined;
+ Profile: undefined;
+};
+
+// highlight-start
+type HomeTabsProps = StaticScreenProps<
+ NavigatorScreenParams
+>;
+// highlight-end
+
+// highlight-next-line
+function HomeTabs(_: HomeTabsProps) {
+ return (
+
+
+ );
+}
+```
+
+Here the `HomeTabsParamList` type defines the mapping of route names in the tab navigator to the types of their params. We then use the `NavigatorScreenParams` utility to say that these are the screens in a nested navigator in the `HomeTabs` component.
+
+Now, React Navigation knows about the screens in the nested navigator and their params, and the types can be inferred with hooks such as `useRoute`.
+
+
+
+
+When using the dynamic API, it is necessary to specify the types for each screen as well as the nesting structure as it cannot be inferred from the code.
+
+## Typechecking the navigator
+
+To typecheck our route name and params, the first thing we need to do is to create an object type with mappings for route names to the params of the route. For example, say we have a route called `Profile` in our root navigator which should have a param `userId`:
+
+```tsx
+type RootStackParamList = {
+ Profile: { userId: string };
+};
+```
+
+Similarly, we need to do the same for each route:
+
+```tsx
+type RootStackParamList = {
+ Home: undefined;
+ Profile: { userId: string };
+ Feed: { sort: 'latest' | 'top' } | undefined;
+};
+```
+
+Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional.
+
+After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md) functions:
+
+```tsx
+import { createStackNavigator } from '@react-navigation/stack';
+
+const RootStack = createStackNavigator();
+```
+
+And then we can use it:
+
+```tsx
+
+
+```
+
+This will provide type checking and intelliSense for props of the [`Navigator`](navigator.md) and [`Screen`](screen.md) components.
+
+:::note
+
+The type containing the mapping must be a type alias (e.g. `type RootStackParamList = { ... }`). It cannot be an interface (e.g. `interface RootStackParamList { ... }`). It also shouldn't extend `ParamListBase` (e.g. `interface RootStackParamList extends ParamListBase { ... }`). Doing so will result in incorrect type checking which allows you to pass incorrect route names.
+
+:::
+
+## Type checking screens
+
+To typecheck our screens, we need to annotate the `navigation` and the `route` props received by a screen. The navigator packages in React Navigation export generic types to define types for both the `navigation` and `route` props from the corresponding navigator.
+
+For example, you can use `NativeStackScreenProps` for the Native Stack Navigator.
+
+```tsx
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+type RootStackParamList = {
+ Home: undefined;
+ Profile: { userId: string };
+ Feed: { sort: 'latest' | 'top' } | undefined;
+};
+
+type Props = NativeStackScreenProps;
+```
+
+The type takes 2 generics:
+
+- The param list object we defined earlier
+- The name of the route the screen belongs to
+
+This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams) or [`replaceParams`](navigation-actions#replaceparams).
+
+Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on.
+
+Then you can use the `Props` type you defined above to annotate your component.
+
+For function components:
+
+```tsx
+function ProfileScreen({ route, navigation }: Props) {
+ // ...
+}
+```
+
+For class components:
+
+```ts
+class ProfileScreen extends React.Component {
+ render() {
+ // ...
+ }
+}
+```
+
+You can get the types for `navigation` and `route` from the `Props` type as follows:
+
+```ts
+type ProfileScreenNavigationProp = Props['navigation'];
+
+type ProfileScreenRouteProp = Props['route'];
+```
+
+Alternatively, you can also annotate the `navigation` and `route` objects separately.
+
+To get the type for the `navigation` prop, we need to import the corresponding type from the navigator. For example, `NativeStackNavigationProp` for `@react-navigation/native-stack`:
+
+```tsx
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+type ProfileScreenNavigationProp = NativeStackNavigationProp<
+ RootStackParamList,
+ 'Profile'
+>;
+```
+
+Similarly, you can import `StackNavigationProp` from [`@react-navigation/stack`](stack-navigator.md), `DrawerNavigationProp` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabNavigationProp` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) etc.
+
+To get the type for the `route` object, we need to use the `RouteProp` type from `@react-navigation/native`:
+
+```tsx
+import type { RouteProp } from '@react-navigation/native';
+
+type ProfileScreenRouteProp = RouteProp;
+```
+
+We recommend creating a separate file: `types.tsx` - where you keep the types and import from there in your component files instead of repeating them in each file.
+
+## Nesting navigators
+
+### Type checking screens and params in nested navigator
+
+You can [navigate to a screen in a nested navigator](nesting-navigators.md#navigating-to-a-screen-in-a-nested-navigator) by passing `screen` and `params` properties for the nested screen:
+
+```ts
+navigation.navigate('Home', {
+ screen: 'Feed',
+ params: { sort: 'latest' },
+});
+```
+
+To be able to type check this, we need to extract the params from the screen containing the nested navigator. This can be done using the `NavigatorScreenParams` utility:
+
+```ts
+import { NavigatorScreenParams } from '@react-navigation/native';
+
+type TabParamList = {
+ Home: NavigatorScreenParams;
+ Profile: { userId: string };
+};
+```
+
+### Combining navigation props
+
+When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both [`jumpTo`](tab-actions.md#jumpto) (from the tab navigator) and [`push`](stack-actions.md#push) (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type.
+
+For example, if we have a `Profile` in a navigator, nested inside `Account` screen of a stack navigator, we can combine the types as follows:
+
+```ts
+import type { CompositeScreenProps } from '@react-navigation/native';
+import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
+import type { StackScreenProps } from '@react-navigation/stack';
+
+type ProfileScreenProps = CompositeScreenProps<
+ BottomTabScreenProps,
+ StackScreenProps
+>;
+```
+
+The `CompositeScreenProps` type takes 2 parameters:
+
+- The first parameter is the type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen
+- The second parameter is the type of props for a parent navigator, in our case the stack navigator which contains the `Account` screen
+
+For multiple parent navigators, this second parameter can nest another `CompositeScreenProps`:
+
+```ts
+type ProfileScreenProps = CompositeScreenProps<
+ BottomTabScreenProps,
+ CompositeScreenProps<
+ StackScreenProps,
+ DrawerScreenProps
+ >
+>;
+```
+
+If annotating the `navigation` prop separately, you can use `CompositeNavigationProp` instead. The usage is similar to `CompositeScreenProps`:
+
+```ts
+import type { CompositeNavigationProp } from '@react-navigation/native';
+import type { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import type { StackNavigationProp } from '@react-navigation/stack';
+
+type ProfileScreenNavigationProp = CompositeNavigationProp<
+ BottomTabNavigationProp,
+ StackNavigationProp
+>;
+```
+
+## Annotating hooks
+
+The [`useRoute`](use-route.md), [`useNavigation`](use-navigation.md), and [`useNavigationState`](use-navigation-state.md) hooks accept the name of the current screen or any parent screen where it's nested as an argument for limited type inference in dynamic API after [specifying root navigator type](#specifying-root-navigator-type).
+
+With `useRoute`:
+
+```ts
+function ProfileScreen() {
+ const route = useRoute('Profile');
+
+ // The params are correctly typed here
+ const { userId } = route.params;
+
+ // ...
+}
+```
+
+With `useNavigation`:
+
+```ts
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ // Helpers like `getState` are correctly typed here
+ const state = navigation.getState();
+
+ // ...
+}
+```
+
+This will automatically infer the type for methods such as `getState`, `setParams` etc. However, it doesn't include navigator-specific types, and they cannot be automatically inferred when using the dynamic configuration.
+
+So if we want to use a navigator-specific method (e.g. `push` from stack navigator), we need to annotate the type of the returned `navigation` object.
+
+This can be done using [type assertion](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions) with the `as` keyword:
+
+```ts
+function ProfileScreen() {
+ const navigation = useNavigation('Profile') as ProfileScreenNavigationProp;
+
+ // ...
+}
+```
+
+:::danger
+
+Annotating `useNavigation` isn't type-safe because we cannot verify that the provided type matches the actual navigators.
+
+:::
+
+With `useNavigationState`:
+
+```ts
+function ProfileScreen() {
+ const focusedRouteName = useNavigationState(
+ 'Profile',
+ // The state is correctly typed here
+ (state) => state.routes[state.index].name
+ );
+
+ // The `focusedRouteName` type is one of the route names
+ // defined in the navigator where `Profile` is defined
+ console.log(focusedRouteName);
+
+ // ...
+}
+```
+
+## Annotating `options` and `screenOptions`
+
+When you pass the `options` to a `Screen` or `screenOptions` prop to a `Navigator` component, they are already type-checked and you don't need to do anything special. However, sometimes you might want to extract the options to a separate object, and you might want to annotate it.
+
+To annotate the options, we need to import the corresponding type from the navigator. For example, `StackNavigationOptions` for `@react-navigation/stack`:
+
+```ts
+import type { StackNavigationOptions } from '@react-navigation/stack';
+
+const options: StackNavigationOptions = {
+ headerShown: false,
+};
+```
+
+Similarly, you can import `DrawerNavigationOptions` from `@react-navigation/drawer`, `BottomTabNavigationOptions` from `@react-navigation/bottom-tabs` etc.
+
+When using the function form of `options` and `screenOptions`, you can annotate the arguments with a type exported from the navigator, e.g. `StackOptionsArgs` for `@react-navigation/stack`, `DrawerOptionsArgs` for `@react-navigation/drawer`, `BottomTabOptionsArgs` for `@react-navigation/bottom-tabs` etc.:
+
+```ts
+import type {
+ StackNavigationOptions,
+ StackOptionsArgs,
+} from '@react-navigation/stack';
+
+const options = ({ route }: StackOptionsArgs): StackNavigationOptions => {
+ return {
+ headerTitle: route.name,
+ };
+};
+```
+
+If you want to annotate the type of params in the `route` object, you can use pass the param list and route name as generics to the `StackOptionsArgs` type:
+
+```ts
+import type {
+ StackNavigationOptions,
+ StackOptionsArgs,
+} from '@react-navigation/stack';
+
+const options = ({
+ route,
+}: StackOptionsArgs): StackNavigationOptions => {
+ const { userId } = route.params;
+
+ return {
+ headerTitle: `Profile of ${userId}`,
+ };
+};
+```
+
+## Annotating `ref` on `NavigationContainer`
+
+If you use the `createNavigationContainerRef()` method to create the ref, you can annotate it to type-check navigation actions:
+
+```ts
+import { createNavigationContainerRef } from '@react-navigation/native';
+
+// ...
+
+const navigationRef = createNavigationContainerRef();
+```
+
+Similarly, for `useNavigationContainerRef()`:
+
+```ts
+import { useNavigationContainerRef } from '@react-navigation/native';
+
+// ...
+
+const navigationRef = useNavigationContainerRef();
+```
+
+If you're using a regular `ref` object, you can pass a generic to the `NavigationContainerRef` type..
+
+Example when using `React.useRef` hook:
+
+```ts
+import type { NavigationContainerRef } from '@react-navigation/native';
+
+// ...
+
+const navigationRef =
+ React.useRef>(null);
+```
+
+Example when using `React.createRef`:
+
+```ts
+import type { NavigationContainerRef } from '@react-navigation/native';
+
+// ...
+
+const navigationRef =
+ React.createRef>();
+```
+
+## Specifying root navigator type
+
+You can specify the type for your root navigator which will enable automatic type inference (with limitations) for [`useRoute`](use-route.md), [`useNavigation`](use-navigation.md), [`useNavigationState`](use-navigation-state.md), [`Link`](link.md), [`ref`](navigation-container.md#ref), [`linking`](navigation-container.md#linking) etc.
+
+To do this, you can use module augmentation for `@react-navigation/core` and extend the `RootNavigator` interface with the type of your root navigator.
+
+```ts
+const RootStack = createNativeStackNavigator();
+
+function App() {
+ // ...
+}
+
+// highlight-next-line
+type RootStackType = typeof RootStack;
+
+// highlight-start
+declare module '@react-navigation/core' {
+ interface RootNavigator extends RootStackType {}
+}
+// highlight-end
+```
+
+Here `RootStack` refers to the navigator used at the root of your app.
+
+## Organizing types
+
+When writing types for React Navigation, there are a couple of things we recommend to keep things organized.
+
+1. It's good to create a separate file (e.g. `navigation/types.tsx`) that contains the types related to React Navigation.
+2. Instead of using `CompositeNavigationProp` directly in your components, it's better to create a helper type that you can reuse.
+3. Specifying a global type for your root navigator would avoid manual annotations in many places.
+
+Considering these recommendations, the file containing the types may look something like this:
+
+```ts
+import type {
+ CompositeScreenProps,
+ NavigatorScreenParams,
+} from '@react-navigation/native';
+import type { StackScreenProps } from '@react-navigation/stack';
+import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
+
+export type RootStackParamList = {
+ Home: NavigatorScreenParams;
+ PostDetails: { id: string };
+ NotFound: undefined;
+};
+
+export type RootStackScreenProps =
+ StackScreenProps;
+
+export type HomeTabParamList = {
+ Popular: undefined;
+ Latest: undefined;
+};
+
+export type HomeTabScreenProps =
+ CompositeScreenProps<
+ BottomTabScreenProps,
+ RootStackScreenProps
+ >;
+```
+
+Then, you'd set up the global type for your root navigator in the same file where your root navigator is defined:
+
+```ts
+import { createStackNavigator } from '@react-navigation/stack';
+import type { RootStackParamList } from './navigation/types';
+
+const RootStack = createStackNavigator();
+
+function App() {
+ // ...
+}
+
+// Specify the global type for the root navigator
+type RootStackType = typeof RootStack;
+
+declare module '@react-navigation/core' {
+ interface RootNavigator extends RootStackType {}
+}
+```
+
+Now, when annotating your components, you can write:
+
+```ts
+import type { HomeTabScreenProps } from './navigation/types';
+
+function PopularScreen({ navigation, route }: HomeTabScreenProps<'Popular'>) {
+ // ...
+}
+```
+
+
+
diff --git a/versioned_docs/version-8.x/upgrading-from-7.x.md b/versioned_docs/version-8.x/upgrading-from-7.x.md
new file mode 100755
index 00000000000..4a3cc81c1e4
--- /dev/null
+++ b/versioned_docs/version-8.x/upgrading-from-7.x.md
@@ -0,0 +1,789 @@
+---
+id: upgrading-from-7.x
+title: Upgrading from 7.x
+sidebar_label: Upgrading from 7.x
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::warning
+
+React Navigation 8 is still in pre-release stage. The API may still change before the stable release. The upgrade guide will be updated accordingly when we release the stable version.
+
+:::
+
+This guides lists all the breaking changes and new features in React Navigation 8 that you need to be aware of when upgrading from React Navigation 7.
+
+## Dependency changes
+
+The minimum required version of React Native, Expo, and TypeScript have been bumped:
+
+- `react-native` >= 0.81
+- `expo` >= 54 (if you use [Expo Go](https://expo.dev/go))
+- `typescript` >= 5.9.2 (if you use TypeScript)
+
+The minimum required version of various peer dependencies have also been bumped:
+
+- `react-native-screens` >= 4.19.0
+- `react-native-safe-area-context` >= 5.5.0
+- `react-native-reanimated` >= 4.0.0
+- `react-native-pager-view` >= 7.0.0 (8.0.0 is recommended)
+- `react-native-web` >= 0.21.0
+
+Previously, many navigators worked without `react-native-screens`, but now it's required for all navigators.
+
+Additionally, React Navigation now uses [`@callstack/liquid-glass`](https://github.com/callstack/liquid-glass) to implement liquid glass effect on iOS 26.
+
+::: note
+
+Minimum required versions are subject to change. The minimum required version for Expo and React Native are planned to be bumped to Expo SDK 55 and React Native 0.83 respectively.
+
+:::
+
+## Breaking changes
+
+### Dropping support for old architecture
+
+React Navigation 8 no longer supports the old architecture of React Native. The old architecture has been frozen since React Native 0.80 and will be removed in React Native 0.82.
+
+So if you're still on the old architecture, you'll need to upgrade to the new architecture in order to use React Navigation 8.
+
+### Changes to TypeScript setup
+
+We introduced a static API in React Navigation 7. However, some of the TypeScript types were not inferred and required manual annotations. In React Navigation 8, we reworked the TypeScript types to solve many of these issues.
+
+#### The root type now uses navigator type instead of param list
+
+Previously the types for the root navigator were specified using `declare global` and `RootParamList`. Now, they can be specified with module augmentation of `@react-navigation/core` and use the navigator's type instead a param list:
+
+```diff lang=ts
+- type RootStackParamList = StaticParamList;
+-
+- declare global {
+- namespace ReactNavigation {
+- interface RootParamList extends RootStackParamList {}
+- }
+- }
++ type RootStackType = typeof RootStack;
++
++ declare module '@react-navigation/core' {
++ interface RootNavigator extends RootStackType {}
++ }
+```
+
+Using module augmentation is shorter, and avoids namespace usage - which ESLint may complain about in some configurations.
+
+Using the navigator's type instead of a param list allows us to infer the type of navigators - primarily in case of static configuration.
+
+#### Common hooks no longer accept generics
+
+Previously hooks such as `useNavigation`, `useRoute` and `useNavigationState` accepted a generic to override the default types. This is not type-safe as we cannot verify that the provided type matches the actual navigators, and we recommended minimizing such usage.
+
+In React Navigation 8, we reworked the types to automatically determine the correct type [based on the name of the screen](#common-hooks-now-accept-name-of-the-screen) when using static config:
+
+```diff lang=ts
+- const navigation = useNavigation>();
++ const navigation = useNavigation('Profile');
+```
+
+If you're using dynamic configuration, unfortunately we cannot currently infer the types automatically. So it still requires manual annotation. However, now you need to use `as` instead of generics to make it clearer that this is unsafe:
+
+```diff lang=ts
+- const navigation = useNavigation>();
++ const navigation = useNavigation() as StackNavigationProp;
+```
+
+The `useRoute` type has been updated in the same way:
+
+```diff lang=ts
+- const route = useRoute>();
++ const route = useRoute('Profile');
+```
+
+And if you're using dynamic configuration:
+
+```diff lang=ts
+- const route = useRoute>();
++ const route = useRoute() as RouteProp;
+```
+
+Similarly, the `useNavigationState` type has been updated to accept the name of the screen in addition to the selector:
+
+```diff lang=ts
+- const focusedRouteName = useNavigationState((state) => state.routes[state.index].name);
++ const focusedRouteName = useNavigationState('Settings', (state) => state.routes[state.index].name);
+```
+
+If you're using dynamic configuration, you can use `as`:
+
+```diff lang=ts
+- const focusedRouteName = useNavigationState((state) => state.routes[state.index].name);
++ const focusedRouteName = useNavigationState((state) => state.routes[state.index].name as keyof RootStackParamList);
+```
+
+#### New `createXScreen` API for creating screen config
+
+One of the limitations of the static config API is that the type of `route` object can't be inferred in screen callback, listeners callback etc. This made it difficult to use route params in these callbacks.
+
+To address this, we added a new `createXScreen` API for each navigator to create screen config with proper types:
+
+```diff lang=js
+const Stack = createStackNavigator({
+ screens: {
+- Profile: {
+- screen: ProfileScreen,
+- options: ({ route }) => {
+- const userId = route.params.userId; // Don't know the type of route params
+-
+- return { title: `User ${userId}` };
+- },
+- },
++ Profile: createStackScreen({
++ screen: ProfileScreen,
++ options: ({ route }) => {
++ const userId = route.params.userId; // Now correctly inferred
++
++ return { title: `User ${userId}` };
++ },
++ });
+ }
+});
+```
+
+When using the `createXScreen` API, the type of params are automatically inferred based on the type annotation for the component specified in `screen` (e.g. `(props: StaticScreenProps)`) and the path pattern specified in the linking config (e.g. `linking: 'profile/:userId'`).
+
+Each navigator exports its own helper function, e.g. `createNativeStackScreen` for Native Stack Navigator, `createBottomTabScreen` for Bottom Tab Navigator, `createDrawerScreen` for Drawer Navigator etc.
+
+See [Static configuration docs](static-configuration.md#createxscreen) for more details.
+
+#### Custom navigators now require overloads for types
+
+To work with the reworked TypeScript types, custom navigators now need to provide overloads for static and dynamic configuration APIs, and an additional API to create screen config.
+
+```diff lang=ts
+- export function createMyNavigator<
+- const ParamList extends ParamListBase,
+- const NavigatorID extends string | undefined = string | undefined,
+- const TypeBag extends NavigatorTypeBagBase = {
+- ParamList: ParamList;
+- NavigatorID: NavigatorID;
+- State: TabNavigationState;
+- ScreenOptions: MyNavigationOptions;
+- EventMap: MyNavigationEventMap;
+- NavigationList: {
+- [RouteName in keyof ParamList]: MyNavigationProp<
+- ParamList,
+- RouteName,
+- NavigatorID
+- >;
+- };
+- Navigator: typeof MyNavigator;
+- },
+- const Config extends StaticConfig = StaticConfig,
+- >(config?: Config): TypedNavigator {
+- return createNavigatorFactory(MyNavigator)(config);
+- }
++ type MyTypeBag = {
++ ParamList: ParamList;
++ State: TabNavigationState;
++ ScreenOptions: MyNavigationOptions;
++ EventMap: MyNavigationEventMap;
++ NavigationList: {
++ [RouteName in keyof ParamList]: MyNavigationProp<
++ ParamList,
++ RouteName
++ >;
++ };
++ Navigator: typeof MyNavigator;
++ };
++
++ export function createMyNavigator<
++ const ParamList extends ParamListBase,
++ >(): TypedNavigator, undefined>;
++ export function createMyNavigator<
++ const Config extends StaticConfig>,
++ >(
++ config: Config
++ ): TypedNavigator<
++ MyTypeBag>,
++ Config
++ >;
++ export function createMyNavigator(config?: unknown) {
++ return createNavigatorFactory(MyNavigator)(config);
++ }
+
++ export function createMyScreen<
++ const Linking extends StaticScreenConfigLinking,
++ const Screen extends StaticScreenConfigScreen,
++ >(
++ config: StaticScreenConfig<
++ Linking,
++ Screen,
++ TabNavigationState,
++ MyNavigationOptions,
++ MyNavigationEventMap,
++ MyNavigationProp
++ >
++ ) {
++ return config;
++ }
+```
+
+See [Custom navigators](custom-navigators.md) for more details.
+
+### Changes to navigators
+
+#### Native Bottom Tabs are now default
+
+Previously, the Bottom Tab Navigator used a JavaScript-based implementation and a native implementation was available under `@react-navigation/bottom-tabs/unstable`. Native bottom tabs are not used by default on iOS and Android. This allows us to match the new native design such as liquid glass effect on iOS 26.
+
+The `@react-navigation/bottom-tabs/unstable` entry point has been removed.
+
+To keep the previous behavior with JavaScript-based tabs, you can pass `implementation: 'custom'` to the navigator:
+
+
+
+
+```diff lang=js
+createBottomTabNavigator({
++ implementation: 'custom',
+ // ...
+});
+```
+
+
+
+
+```diff lang=js
+
+```
+
+
+
+
+As part of this change, some of the options have changed to work with native tabs:
+
+- `tabBarShowLabel` is replaced with `tabBarLabelVisibilityMode` which accepts:
+ - `"auto"` (default)
+ - `"selected"`
+ - `"labeled"` - same as `tabBarShowLabel: true`
+ - `"unlabeled"` - same as `tabBarShowLabel: false`
+- `tabBarLabel` now only accepts a `string`
+- `tabBarIcon` now accepts an function that returns an icon object
+
+The following props have been removed:
+
+- `safeAreaInsets` from the navigator props
+- `insets` from the bottom tab bar props
+- `layout` from the bottom tab bar props
+
+See the [Bottom Tab Navigator docs](bottom-tab-navigator.md) for all the available options.
+
+#### Bottom Tabs no longer shows header by default
+
+Since Bottom Tabs now renders native tabs by default, the header is no longer shown by default to match native look and feel. You can nest a [Native Stack Navigator](native-stack-navigator.md) inside each tab to show a header that integrates well with native tabs, e.g. [search tab on iOS 26+](bottom-tab-navigator.md#search-tab-on-ios-26).
+
+Alternatively, you can enable the built-in header by passing `headerShown: true` in `screenOptions` of the navigator:
+
+
+
+
+```diff lang=js
+createBottomTabNavigator({
+ screenOptions: {
++ headerShown: true,
+ // ...
+ },
+ // ...
+});
+```
+
+
+
+
+```diff lang=js
+
+```
+
+
+
+
+#### Navigators no longer accept an `id` prop
+
+Previously, navigators accepted an `id` prop to identify them - which was used with `navigation.getParent(id)` to get a parent navigator by id. However, there were a couple of issues with this approach:
+
+- It wasn't well integrated with TypeScript types, and required manual annotations.
+- The navigation object is specific to a screen, so using the navigator's id was inconsistent.
+- It was used for a very specific use case, so it added unnecessary complexity.
+
+In React Navigation 8, we removed the `id` prop from navigators. Instead, you can use the screen's name to get a parent navigator:
+
+```diff lang=js
+- const parent = navigation.getParent('some-id');
++ const parent = navigation.getParent('SomeScreenName');
+```
+
+In this case, 'SomeScreenName' refers to the name of a parent screen that's used in the navigator.
+
+See [navigation object docs](navigation-object.md#getparent) for more details.
+
+#### `setParams` no longer pushes to history in tab and drawer navigators when `backBehavior` is set to `fullHistory`
+
+Previously, when using `setParams` in tab and drawer navigators with `backBehavior` set to `fullHistory`, it would push a new entry to the history stack.
+
+In React Navigation 8, we [added a new `pushParams` action](#new-entry-can-be-added-to-history-stack-with-pushparams-action) that achieves this behavior. So `setParams` now only updates the params without affecting the history stack.
+
+```diff lang=js
+- navigation.setParams({ filter: 'new' });
++ navigation.pushParams({ filter: 'new' });
+```
+
+This way you have more control over how params are updated in tab and drawer navigators.
+
+See [`setParams` action docs](navigation-actions.md#setparams) for more details.
+
+#### Navigators no longer use `InteractionManager`
+
+Previously, various navigators used `InteractionManager` to mark when animations and gestures were in progress. This was primarily used to defer code that should run after transitions, such as loading data or rendering heavy components.
+
+However, `InteractionManager` has been deprecated in latest React Native versions, so we are removing support for this API in React Navigation 8. As an alternative, consumers can listen to events such as `transitionStart`, `transitionEnd` etc. when applicable:
+
+```diff lang=js
+- InteractionManager.runAfterInteractions(() => {
+- // code to run after transition
+- });
++ navigation.addListener('transitionEnd', () => {
++ // code to run after transition
++ });
+```
+
+Keep in mind that unlike `InteractionManager` which is global, the transition events are specific to a navigator.
+
+If you have a use case that cannot be solved with transition events, please open a [discussion on GitHub](https://github.com/react-navigation/react-navigation/discussions).
+
+#### The color arguments in various navigators now accept `ColorValue`
+
+Previously, color options in various navigators only accepted string values. In React Navigation 8, these options now accept `ColorValue` to match the [changes to theming](#themes-now-support-colorvalue-and-css-custom-properties).
+
+Unless you are using a custom theme with `PlatformColor` or `DynamicColorIOS` etc, this change only breaks TypeScript types:
+
+```diff lang=js
+- const tabBarIcon = ({ color, size }: { color: string, size: number }) => {
++ const tabBarIcon = ({ color, size }: { color: ColorValue, size: number }) => {
+ // ...
+};
+```
+
+See [Themes](themes.md#using-platform-colors) for more information about dynamic colors.
+
+#### Various components no longer receive layout related props
+
+Previously, various components such as `Header`, `BottomTabBar`, and `DrawerContent` received layout related props such as `layout` - that contained the dimensions of the screen.
+
+This meant that if the `layout` changed frequently, such as resizing the window on supported platforms (Web, Windows, macOS, iPadOS), it would need to re-render these components frequently - often not being able to keep up with the changes, leading to jank and poor performance.
+
+To avoid this, we have removed layout related props from these components:
+
+- `layout` prop from `Header` component from `@react-navigation/elements`
+- `titleLayout` and `screenLayout` props from `HeaderBackButton` component from `@react-navigation/elements`
+- `layouts.title` and `layouts.leftLabel` parameters from `headerStyleInterpolator` in `@react-navigation/stack`
+- `layout` prop from `react-native-tab-view`
+- `layout` prop from `react-native-drawer-layout`
+
+Since React Native doesn't provide APIs to handle layout changes in styles, it may still be necessary to handle layout changes manually in some cases. So we have added a [`useFrameSize`](elements.md#useframesize) hook that takes a selector function to minimize re-renders:
+
+```js
+import { useFrameSize } from '@react-navigation/elements';
+
+// ...
+
+const isLandscape = useFrameSize((size) => size.width > size.height);
+```
+
+#### The `onChangeText` callback has been renamed to `onChange` for `headerSearchBarOptions`
+
+The `onChangeText` option in `headerSearchBarOptions` was confusingly named after text input's
+`onChangeText`, but TextInput's `onChangeText` receives the new text as the first argument, whereas `headerSearchBarOptions.onChangeText` received an event object - similar to TextInput's `onChange`.
+
+To avoid confusion due to this inconsistency, the option has been renamed to `onChange`. To upgrade, simply rename the option:
+
+
+
+
+```diff lang=js
+createNativeStackNavigator({
+ screens: {
+ Search: {
+ screen: SearchScreen,
+ options: {
+ headerSearchBarOptions: {
+- onChangeText: (event) => {
++ onChange: (event) => {
+ const text = event.nativeEvent.text;
+ // ...
+ },
+ },
+ },
+ },
+ },
+});
+```
+
+
+
+
+```diff lang=js
+
+ {
++ onChange: (event) => {
+ const text = event.nativeEvent.text;
+ // ...
+ },
+ },
+ }}
+ />
+
+```
+
+
+
+
+This applies to all navigators that support `headerSearchBarOptions`, such as Native Stack Navigator with native header, and other navigators using `Header` from `@react-navigation/elements`.
+
+If you're using `Header` from `@react-navigation/elements` directly, the same change applies.
+
+#### APIs for customizing Navigation bar and status bar colors are removed from Native Stack Navigator
+
+Previously, Native Stack Navigator provided options to customize the appearance of the navigation bar and status bar on Android:
+
+- `navigationBarColor`
+- `navigationBarTranslucent`
+- `statusBarBackgroundColor`
+- `statusBarTranslucent`
+
+In Android 15 and onwards, edge-to-edge is now the default behavior, and will likely be enforced in future versions. Therefore, these options have been removed in React Navigation 8.
+
+You can use [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge) instead to configure status bar and navigation bar related settings.
+
+See [Native Stack Navigator](native-stack-navigator.md) for all available options.
+
+#### Stack Navigator now accepts a number for `gestureResponseDistance`
+
+Previously, the `gestureResponseDistance` option in Stack Navigator accepted an object with `horizontal` and `vertical` properties to specify the distance for gestures. Since it's not pssible to have both horizontal and vertical gestures at the same time, it now accepts a number to specify the distance for the current gesture direction:
+
+```diff lang=js
+- gestureResponseDistance: { horizontal: 50 }
++ gestureResponseDistance: 50
+```
+
+#### Drawer Navigator now accepts `overlayStyle` instead of `overlayColor`
+
+Previously, the Drawer Navigator accepted an `overlayColor` prop to customize the color of the overlay that appears when the drawer is open. It now accepts `overlayStyle` prop instead to provide more flexibility for styling the overlay:
+
+```diff lang=js
+- overlayColor="rgba(0, 0, 0, 0.5)"
++ overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+```
+
+See [Drawer Navigator](drawer-navigator.md) for more details.
+
+### Miscellaneous
+
+#### Various deprecated APIs have been removed
+
+The following API that were marked as deprecated in React Navigation 7 have been removed:
+
+- `navigateDeprecated` from the navigation object has been removed. Use `navigate` instead. To preserve the previous behavior, you can pass `pop: true` as the third argument to `navigate`:
+
+ ```diff lang=js
+ - navigation.navigateDeprecated('Profile', { userId: 123 });
+ + navigation.navigate('Profile', { userId: 123 }, { pop: true });
+ ```
+
+- `getId` from the navigation object has been removed since the [`id` prop has been removed](#navigators-no-longer-accept-an-id-prop).
+
+- `navigationInChildEnabled` prop from `NavigationContainer` has been removed. This behavior is no longer supported.
+
+#### The linking config no longer requires a `prefixes` option
+
+Previously, the linking configuration required a `prefixes` option to specify the URL prefixes that the app should handle. This historical reason for this is to support Expo Go which uses a custom URL scheme.
+
+Since then, the recommended way to develop with Expo has been to use [Development Builds](https://docs.expo.dev/develop/development-builds/introduction/), which use the app's own URL scheme. So the `prefixes` option is not needed for most use cases.
+
+You can now omit the `prefixes` option in the linking configuration unless you're using Expo Go:
+
+
+
+
+```diff lang=js
+
+```
+
+
+
+
+```diff lang=js
+
+```
+
+
+
+
+The `prefixes` default to `['*']`, which will match any host starting with `http`, `https`, and custom schemes such as `myapp://`.
+
+See [Configuring links](configuring-links.md) for more details.
+
+#### Some exports are removed from `@react-navigation/elements`
+
+The `@react-navigation/elements` package has exported some components that were primarily intended for internal usage. These components have been removed from the public API:
+
+- `Background`
+
+ Background color can instead be applied by using it from `useTheme`.
+
+ ```diff lang=js
+ - import { Background } from '@react-navigation/elements';
+ + import { useTheme } from '@react-navigation/native';
+ // ...
+ - {children}
+ + const { colors } = useTheme();
+ +
+ + {children}
+ ```
+
+- `Screen`
+
+ You can render the `Header` component directly instead.
+
+- `SafeAreaProviderCompat`
+
+ You can use `SafeAreaProvider` from [`react-native-safe-area-context`](https://github.com/AppAndFlow/react-native-safe-area-context) directly instead.
+
+- `MissingIcon`
+
+ You can copy the implementation from the [source code](https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/MissingIcon.tsx) if you need a placeholder icon.
+
+Some of these components are still available and exported at `@react-navigation/elements/internal`, so you can continue using them if you really need. However, since they are not part of the public API, they don't follow semver and may change without warning in future releases.
+
+#### The `getDefaultHeaderHeight` utility now accepts an object instead of positional arguments
+
+The `getDefaultHeaderHeight` utility from `@react-navigation/elements` now accepts an object with named properties instead of positional arguments to improve readability"
+
+```diff lang=js
+- getDefaultHeaderHeight(layout, false, statusBarHeight);
++ getDefaultHeaderHeight({
++ landscape: false,
++ modalPresentation: false,
++ topInset: statusBarHeight
++ });
+```
+
+See [Elements docs](elements.md#getdefaultheaderheight) for more details.
+
+## New features
+
+### Common hooks now accept name of the screen
+
+The `useNavigation`, `useRoute`, and `useNavigationState` hooks can now optionally accept the name of the screen:
+
+```js
+const route = useRoute('Profile');
+```
+
+The name of the screen can be for the current screen or any of its parent screens. This makes it possible to get params and navigation state for a parent screen without needing to setup context to pass them down.
+
+If the provided screen name does not exist in any of the parent screens, it will throw an error, so any mistakes are caught early.
+
+When using static configuration, the types are automatically inferred based on the name of the screen.
+
+It's still possible to use these hooks without passing the screen name, same as before, and it will return the navigation or route for the current screen.
+
+See [`useNavigation`](use-navigation.md), [`useRoute`](use-route.md), and [`useNavigationState`](use-navigation-state.md) for more details.
+
+### New entry can be added to history stack with `pushParams` action
+
+The `pushParams` action updates the params and pushes a new entry to the history stack:
+
+```js
+navigation.pushParams({ filter: 'new' });
+```
+
+Unlike `setParams`, this does not merge the new params with the existing ones. Instead, it uses the new params object as-is.
+
+The action works in all navigators, such as stack, tab, and drawer. This allows to add a new entry to the history stack without needing to push a new screen instance.
+
+This can be useful in various scenario:
+
+- A product listing page with filters, where changing filters should create a new history entry so that users can go back to previous filter states.
+- A screen with a custom modal component, where the modal is not a separate screen in the navigator, but its state should be reflected in the URL and history.
+
+See [`pushParams` docs](navigation-actions.md#pushparams) for more details.
+
+### Themes now support `ColorValue` and CSS custom properties
+
+Previously, theme colors only supported string values. In React Navigation 8, theme colors now support `PlatformColor`, `DynamicColorIOS` on native, and CSS custom properties on Web for more flexibility.
+
+Example theme using `PlatformColor`:
+
+```js
+const MyTheme = {
+ ...DefaultTheme,
+ colors: Platform.select({
+ ios: () => ({
+ primary: PlatformColor('systemRed'),
+ background: PlatformColor('systemGroupedBackground'),
+ card: PlatformColor('tertiarySystemBackground'),
+ text: PlatformColor('label'),
+ border: PlatformColor('separator'),
+ notification: PlatformColor('systemRed'),
+ }),
+ android: () => ({
+ primary: PlatformColor('@android:color/system_primary_light'),
+ background: PlatformColor(
+ '@android:color/system_surface_container_light'
+ ),
+ card: PlatformColor('@android:color/system_background_light'),
+ text: PlatformColor('@android:color/system_on_surface_light'),
+ border: PlatformColor('@android:color/system_outline_variant_light'),
+ notification: PlatformColor('@android:color/holo_red_light'),
+ }),
+ default: () => DefaultTheme.colors,
+ })(),
+};
+```
+
+See [Themes](themes.md#using-platform-colors) for more details.
+
+### Groups now support `linking` option in static configuration
+
+The `linking` option can now be specified for groups in static configuration to define nested paths:
+
+```js
+const Stack = createStackNavigator({
+ groups: {
+ Settings: {
+ linking: { path: 'settings' },
+ screens: {
+ UserSettings: 'user',
+ AppSettings: 'app',
+ },
+ },
+ },
+});
+```
+
+This lets you prefix the paths of the screens in the group with a common prefix, e.g. `settings/` for `settings/user` and `settings/app`.
+
+See [Group](group.md) for more details.
+
+### Deep linking to screens behind conditional screens is now supported
+
+Previously, if a screen was conditionally rendered based on some state (e.g. authentication status), deep linking to that screen wouldn't work since the screen wouldn't exist in the navigator when the app was opened via a deep link.
+
+In React Navigation 7, we added an experimental `UNSTABLE_routeNamesChangeBehavior` option to enable remembering such unhandled actions and re-attempting them when the list of route names changed after the conditions changed by setting the option to `lastUnhandled`.
+
+In React Navigation 8, we have dropped the `UNSTABLE_` prefix and made it a stable API.
+
+```js static2dynamic
+const Stack = createNativeStackNavigator({
+ // highlight-start
+ routeNamesChangeBehavior: 'lastUnhandled',
+ // highlight-end
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+### Navigators now accept a `router` prop
+
+A router defines how the navigator updates its state based on navigation actions. Previously, custom routers could only be used by [creating a custom navigator](custom-navigators.md#extending-navigators).
+
+We later added an experimental `UNSTABLE_router` prop to various navigators to customize the router without needing to create a custom navigator. In React Navigation 8, we have dropped the `UNSTABLE_` prefix and made it a stable API.
+
+```js static2dynamic
+const MyStack = createNativeStackNavigator({
+ // highlight-start
+ router: (original) => ({
+ getStateForAction(state, action) {
+ if (action.type === 'NAVIGATE') {
+ // Custom logic for NAVIGATE action
+ }
+
+ // Fallback to original behavior
+ return original.getStateForAction(state, action);
+ },
+ }),
+ // highlight-end
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+See [`Navigator` docs](navigator.md#router) for more details.
+
+### `Header` from `@react-navigation/elements` has been reworked
+
+The `Header` component from `@react-navigation/elements` has been reworked with various improvements:
+
+- It uses the new liquid glass effect on iOS 26
+- It supports `ColorValue` and CSS custom properties for colors
+- It supports `headerBlurEffect` on Web (previously only supported on iOS in Native Stack Navigator)
+- It no longer needs the layout of the screen to render correctly
+
+To match the iOS 26 design, the back button title is no longer shown by default on iOS 26.
+
+See [Elements](elements.md) for more details.
+
+### `react-native-tab-view` now supports a `renderAdapter` prop for custom adapters
+
+By default, `react-native-tab-view` uses [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view) for rendering pages on Android and iOS. However, it may not be suitable for all use cases.
+
+So it now supports a `renderAdapter` prop to provide a custom adapter for rendering pages. For example, you can use `ScrollViewAdapter` to use a `ScrollView` for rendering pages:
+
+```js
+import React from 'react';
+import { TabView, ScrollViewAdapter } from 'react-native-tab-view';
+
+export default function TabViewExample() {
+ const [index, setIndex] = React.useState(0);
+
+ return (
+
+ {isFocused ? 'focused' : 'unfocused'}
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ return navigation.navigate(route.name, route.params)}
+ >
+ {descriptors[route.key].options.title}
+
+ ));
+}
+```
+
+This hook is intended to be used in navigators to show links to various pages in the navigator, such as drawer and tab navigators. If you're building a custom navigator, custom drawer content, custom tab bar etc. then you might want to use this hook.
+
+There are couple of important things to note:
+
+- The destination screen must be present in the current navigator. It cannot be in a parent navigator or a navigator nested in a child.
+- It's intended to be only used in custom navigators to keep them reusable in multiple apps. For your regular app code, use screen names directly instead of building paths for screens.
+
+## `buildAction`
+
+The `buildAction` method lets us parse a `href` string into an action object that can be used with [`navigation.dispatch`](navigation-object.md#dispatch) to navigate to the relevant screen.
+
+```js
+import { Link, CommonActions, useLinkBuilder } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
+
+// ...
+
+function MyComponent() {
+ const { buildAction } = useLinkBuilder();
+
+ return (
+ navigation.dispatch(buildAction('/users/jane'))}>
+ Go to Jane's profile
+
+ );
+}
+```
+
+The [`useLinkTo`](use-link-to.md) hook is a convenient wrapper around this hook to navigate to a screen using a `href` string.
diff --git a/versioned_docs/version-8.x/use-link-props.md b/versioned_docs/version-8.x/use-link-props.md
new file mode 100644
index 00000000000..9a1834fa9ce
--- /dev/null
+++ b/versioned_docs/version-8.x/use-link-props.md
@@ -0,0 +1,110 @@
+---
+id: use-link-props
+title: useLinkProps
+sidebar_label: useLinkProps
+---
+
+The `useLinkProps` hook lets us build our custom link component. The link component can be used as a button to navigate to a screen. On the web, it will be rendered as an anchor tag (``) with the `href` attribute so that all the accessibility features of a link are preserved, e.g. - such as `Right click -> Open link in new tab"`, `Ctrl+Click`/`⌘+Click` etc.
+
+It returns an object with some props that you can pass to a component.
+
+Example:
+
+```js
+import { useLinkProps } from '@react-navigation/native';
+
+// ...
+
+const LinkButton = ({ screen, params, action, href, children, ...rest }) => {
+ const props = useLinkProps({ screen, params, action, href });
+
+ const [isHovered, setIsHovered] = React.useState(false);
+
+ return (
+
+ {children}
+
+ );
+};
+```
+
+Then you can use the `LinkButton` component elsewhere in your app:
+
+```js
+function Home() {
+ return (
+
+ Go to Jane's profile
+
+ );
+}
+```
+
+## Options
+
+### `screen` and `params`
+
+You can pass `screen` and `params` to navigate to a screen on press:
+
+```js
+function Home() {
+ return (
+
+ Go to Jane's profile
+
+ );
+}
+```
+
+If you want to navigate to a nested screen, you can pass the name of the `screen` in `params` similar to [navigating to a screen in a nested navigator](nesting-navigators.md#navigating-to-a-screen-in-a-nested-navigator):
+
+```js
+
+ Go to post 123
+
+```
+
+### `action`
+
+Sometimes we want a different behavior for in-page navigation, such as `replace` instead of `navigate`. We can use the `action` prop to customize it:
+
+Example:
+
+```js
+import { StackActions } from '@react-navigation/native';
+
+// ...
+
+function Home() {
+ return (
+
+ Go to Jane's profile
+
+ );
+}
+```
+
+The `screen` and `params` props can be omitted if the `action` prop is specified. In that case, we recommend specifying the `href` prop as well to ensure that the link is accessible.
+
+### `href`
+
+The `href` is used for the `href` attribute of the anchor tag on the Web to make the links accessible. By default, this is automatically determined based on the [`linking` options](navigation-container.md#linking) using the `screen` and `params` props.
+
+If you want to use a custom `href`, you can pass it as the `href` prop:
+
+```js
+function Home() {
+ return (
+
+ Getting Started
+
+ );
+}
+```
diff --git a/versioned_docs/version-8.x/use-link-to.md b/versioned_docs/version-8.x/use-link-to.md
new file mode 100644
index 00000000000..e75da45d473
--- /dev/null
+++ b/versioned_docs/version-8.x/use-link-to.md
@@ -0,0 +1,51 @@
+---
+id: use-link-to
+title: useLinkTo
+sidebar_label: useLinkTo
+---
+
+The `useLinkTo` hook lets us navigate to a screen using a path instead of a screen name based on the [`linking` options](navigation-container.md#linking). It returns a function that receives the path to navigate to.
+
+```js
+import { useLinkTo } from '@react-navigation/native';
+
+// ...
+
+function Home() {
+ const linkTo = useLinkTo();
+
+ return (
+ linkTo('/profile/jane')}>
+ Go to Jane's profile
+
+ );
+}
+```
+
+This is a low-level hook used to build more complex behavior on top. We recommended using the [`useLinkProps` hook](use-link-props.md) to build your custom link components instead of using this hook directly. It will ensure that your component is properly accessible on the web.
+
+:::warning
+
+Navigating via `href` strings is not type-safe. If you want to navigate to a screen with type-safety, it's recommended to use screen names directly.
+
+:::
+
+## Using with class component
+
+You can wrap your class component in a function component to use the hook:
+
+```js
+class Home extends React.Component {
+ render() {
+ // Get it from props
+ const { linkTo } = this.props;
+ }
+}
+
+// Wrap and export
+export default function (props) {
+ const linkTo = useLinkTo();
+
+ return Current route: {focusedRouteName} ;
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ Home Screen
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+
+ return (
+
+ Profile Screen
+ navigation.goBack()}>Go back
+
+ );
+}
+
+const RootStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return Number of routes: {routesLength} ;
+}
+```
+
+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:
+
+```js name="useNavigation hook" snack static2dynamic
+import * as React from 'react';
+import { Button } from '@react-navigation/elements';
+import { View, Text } from 'react-native';
+import {
+ createStaticNavigation,
+ useNavigation,
+ useRoute,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
+import { useNavigationState } from '@react-navigation/native';
+
+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'
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+ const isFirstRoute = useIsFirstRouteInParent();
+ const previousRouteName = usePreviousRouteName();
+
+ return (
+
+ It is {isFirstRoute ? '' : 'not '}first route in navigator
+ Previous route name: {previousRouteName}
+
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const navigation = useNavigation('Profile');
+ const isFirstRoute = useIsFirstRouteInParent();
+ const previousRouteName = usePreviousRouteName();
+
+ return (
+
+ It is {isFirstRoute ? '' : 'not '}first route in navigator
+ Previous route name: {previousRouteName}
+ navigation.navigate('Settings')}>
+ Go to Settings
+
+ navigation.goBack()}>Go back
+
+ );
+}
+
+function SettingsScreen() {
+ const navigation = useNavigation('Settings');
+ const isFirstRoute = useIsFirstRouteInParent();
+ const previousRouteName = usePreviousRouteName();
+
+ return (
+
+ It is {isFirstRoute ? '' : 'not '}first route in navigator
+ Previous route name: {previousRouteName}
+ navigation.goBack()}>Go back
+
+ );
+}
+
+const RootStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return {
+ navigation.goBack();
+ }}
+ >
+ Back
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ This is the home screen of the app
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ return (
+
+ Profile Screen
+
+ );
+}
+
+const RootStack = createNativeStackNavigator({
+ initialRouteName: 'Home',
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+ return navigation.goBack()}>Go back ;
+}
+```
+
+This is often useful for re-usable components that are used across multiple screens.
+
+See the documentation for the [`navigation` object](navigation-object.md) for more info.
+
+## Using with class component
+
+You can wrap your class component in a function component to use the hook:
+
+```js
+class MyBackButton extends React.Component {
+ render() {
+ // Get it from props
+ const { navigation } = this.props;
+ }
+}
+
+// Wrap and export
+export default function (props) {
+ const navigation = useNavigation();
+
+ return
+
+ );
+};
+// codeblock-focus-end
+
+const HomeScreen = () => {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ navigation.push('EditText')} style={styles.button}>
+ Push EditText
+
+
+ );
+};
+
+const RootStack = createStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ EditText: EditTextScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return
+
+
+Internally, the hook uses the [`beforeRemove`](navigation-events.md#beforeremove) event to prevent the screen from being removed. This event is triggered whenever a screen is being removed due to a navigation action.
+
+## Limitations
+
+There are a couple of limitations to be aware of when using the `usePreventRemove` hook. It is **only** triggered whenever a screen is being removed due to a navigation state change. For example:
+
+- The user pressed the back button on a screen in a stack.
+- The user performed a swipe-back gesture.
+- Some action such as `pop` or `reset` was dispatched which removes the screen from the state.
+
+It **does not prevent** a screen from being unfocused if it's not being removed. For example:
+
+- The user pushed a new screen on top of the screen with the listener in a stack.
+- The user navigated from one tab/drawer screen to another tab/drawer screen.
+
+It also **does not prevent** a screen from being removed when the user is exiting the screen due to actions not controlled by the navigation state:
+
+- The user closes the app (e.g. by pressing the back button on the home screen, closing the tab in the browser, closing it from the app switcher etc.). You can additionally use [`hardwareBackPress`](https://reactnative.dev/docs/backhandler) event on Android, [`beforeunload`](https://developer.mozilla.org/en-US/docs/web/api/window/beforeunload_event) event on the Web etc. to handle some of these cases. See [Prevent the user from leaving the app](preventing-going-back.md#prevent-the-user-from-leaving-the-app) for more details.
+- A screen gets unmounted due to conditional rendering, or due to a parent component being unmounted.
+
+## UX considerations
+
+Generally, we recommend using this hook sparingly. A better approach is to persist the unsaved data into [`AsyncStorage`](https://github.com/react-native-async-storage/async-storage) or similar persistent storage and prompt to restore it when the user returns to the screen.
+
+Doing so has several benefits:
+
+- This approach still works if the app is closed or crashes unexpectedly.
+- It's less intrusive to the user as they can still navigate away from the screen to check something and return without losing the data.
diff --git a/versioned_docs/version-8.x/use-route-path.md b/versioned_docs/version-8.x/use-route-path.md
new file mode 100644
index 00000000000..530bc324cb7
--- /dev/null
+++ b/versioned_docs/version-8.x/use-route-path.md
@@ -0,0 +1,25 @@
+---
+id: use-route-path
+title: useRoutePath
+sidebar_label: useRoutePath
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+The `useRoutePath` hook can be used to get the path of a route based on the [`linking` configuration](configuring-links.md). This can be useful if you need to generate a URL for a specific route in your app to share as a deep link.
+
+## Example
+
+```js
+import { useRoutePath } from '@react-navigation/native';
+
+function MyComponent() {
+ const path = useRoutePath();
+
+ // Construct a URL using the path and app's base URL
+ const url = new URL(path, 'https://example.com');
+
+ return Shareable URL: {url.href} ;
+}
+```
diff --git a/versioned_docs/version-8.x/use-route.md b/versioned_docs/version-8.x/use-route.md
new file mode 100755
index 00000000000..1f2cf2fc681
--- /dev/null
+++ b/versioned_docs/version-8.x/use-route.md
@@ -0,0 +1,115 @@
+---
+id: use-route
+title: useRoute
+sidebar_label: useRoute
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+`useRoute` is a hook which gives access to `route` object. It's useful when you cannot pass down the `route` object from props to the component, or don't want to pass it in case of a deeply nested child.
+
+It can be used in two ways.
+
+## Getting the route object by screen name
+
+The hook accepts the name of the current screen or any of its parent screens to get the corresponding route object:
+
+```js name="useRoute hook" snack static2dynamic
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
+import { useRoute } from '@react-navigation/native';
+
+function MyText() {
+ // highlight-next-line
+ const route = useRoute('Profile');
+
+ return {route.params.caption} ;
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+
+ return (
+
+ This is the home screen of the app
+ {
+ navigation.navigate('Profile', { caption: 'Some caption' });
+ }}
+ >
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ return (
+
+ Profile Screen
+
+ );
+}
+
+const RootStack = createNativeStackNavigator({
+ initialRouteName: 'Home',
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+ return {route.name} ;
+}
+```
+
+This is often useful for re-usable components that are used across multiple screens.
+
+See the documentation for the [`route` object](route-object.md) for more info.
+
+## Using with class component
+
+You can wrap your class component in a function component to use the hook:
+
+```js
+class MyText extends React.Component {
+ render() {
+ // Get it from props
+ const { route } = this.props;
+ }
+}
+
+// Wrap and export
+export default function (props) {
+ const route = useRoute('Profile');
+
+ return
+ {/* content */}
+ // codeblock-focus-end
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ return {/* content */} ;
+ }
+}
+
+// Wrap and export
+export default function (props) {
+ const ref = React.useRef(null);
+
+ useScrollToTop(ref);
+
+ return
+ {/* content */}
+ // codeblock-focus-end
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ return
+ Settings Screen
+
+ userParam: {JSON.stringify(user)}
+
+ navigation.navigate('Profile')}>
+ Go to Profile
+
+
+ );
+}
+
+function ProfileScreen() {
+ const { colors } = useTheme();
+
+ return (
+
+ Profile Screen
+
+ );
+}
+
+// codeblock-focus-start
+function MyButton() {
+ // highlight-next-line
+ const { colors } = useTheme();
+
+ return (
+
+ Button!
+
+ );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+ const navigation = useNavigation('Home');
+ const { colors } = useTheme();
+
+ return (
+
+ Home Screen
+
+ navigation.navigate('Root', {
+ screen: 'Settings',
+ params: { user: 'jane' },
+ })
+ }
+ >
+ Go to Settings
+
+
+ );
+}
+
+const PanelStack = createNativeStackNavigator({
+ screens: {
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+
+const MyDrawer = createDrawerNavigator({
+ initialRouteName: 'Panel',
+ screens: {
+ Home: HomeScreen,
+ Panel: {
+ screen: PanelStack,
+ options: {
+ headerShown: false,
+ },
+ },
+ },
+});
+
+const Navigation = createStaticNavigation(MyDrawer);
+
+export default function App() {
+ const scheme = useColorScheme();
+ return
+
+
+```js name="Lazy loading screens" snack
+import { Suspense, lazy } from 'react';
+
+const MyStack = createNativeStackNavigator({
+ screenLayout: ({ children }) => (
+
+
+
+```js name="Lazy loading screens" snack
+import { Suspense, lazy } from 'react';
+
+const HomeScreen = lazy(() => import('./HomeScreen'));
+const ProfileScreen = lazy(() => import('./ProfileScreen'));
+
+function MyStack() {
+ return (
+ (
+
+ );
+}
+```
+
+:::warning
+
+Make sure to use `React.lazy` **outside** the component containing the navigator configuration. Otherwise, it will return a new component on each render, causing the [screen to be unmounted and remounted](troubleshooting.md#screens-are-unmountingremounting-during-navigation) every time the component rerenders.
+
+:::
+
+
+
+
+This will split the screen components into separate chunks (depending on your bundler) which are loaded on-demand when the screen is rendered. This can significantly reduce the initial bundle size.
+
+In addition, you can use the [`screenLayout`](navigator.md#screen-layout) to wrap your screens in a [``](https://react.dev/reference/react/Suspense) boundary. The suspense fallback can be used to show a loading indicator and will be shown while the screen component is being loaded.
+
+## Web-specific behavior
+
+Some of the navigators have different behavior on the web compared to native platforms:
+
+1. [**Native Stack Navigator**](stack-navigator.md)
+
+ Native Stack Navigator uses the platform's primitives to handle animations and gestures on native platforms. However, animations and gestures are not supported on the web.
+
+2. [**Stack Navigator**](stack-navigator.md)
+
+ Stack Navigator uses [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) to handle swipe gestures on native platforms. However, gestures are not supported on the web.
+
+ In addition, screen transitions are disabled by default on the web. You can enable them by setting `animationEnabled: true` in the navigator's options.
+
+3. [**Drawer Navigator**](drawer-navigator.md)
+
+ Drawer Navigator uses [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) to handle swipe gestures and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) for animations on native platforms. However, gestures are not supported on the web, and animations are handled using CSS transitions.
+
+In addition, navigators render hyperlinks on the web when possible, such as in the drawer sidebar, tab bar, stack navigator's back button, etc.
+
+Since `react-native-gesture-handler` and `react-native-reanimated` are not used on the web, avoid importing them in your own code to reduce the bundle size unless you need them for your components. You can use `.native.js` or `.native.ts` extensions for code specific to native platforms.
+
+## Configuring hosting providers
+
+React Navigation is designed for Single Page Applications (SPAs). This usually means that the `index.html` file needs to be served for all routes.
+
+During development, the bundler such as Webpack or Metro automatically handles this. However, when deploying the site, you may need to configure redirects to ensure that the `index.html` file is served for all routes to avoid 404 errors.
+
+Here are instructions for some of the popular hosting providers:
+
+### Netlify
+
+To handle redirects on Netlify, add the following in the `netlify.toml` file at the root of your project:
+
+```toml
+[[redirects]]
+ from = "/*"
+ to = "/index.html"
+ status = 200
+```
+
+### Vercel
+
+To handle redirects on Vercel, add the following in the `vercel.json` file at the root of your project:
+
+```json
+{
+ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}
+```
+
+### GitHub Pages
+
+GitHub Pages doesn't support such redirection configuration for SPAs. There are a couple of ways to work around this:
+
+- Rename your `index.html` to `404.html`. This will serve the `404.html` file for all routes. However, this will cause a 404 status code to be returned for all routes. So it's not ideal for SEO.
+- Write a script that copies the `index.html` file to all routes in the build output. For example, if your app has routes `/`, `/about`, and `/contact`, you can copy the `index.html` file to `about.html` and `contact.html`.
diff --git a/versioned_sidebars/version-8.x-sidebars.json b/versioned_sidebars/version-8.x-sidebars.json
new file mode 100644
index 00000000000..b0bed7c7f5b
--- /dev/null
+++ b/versioned_sidebars/version-8.x-sidebars.json
@@ -0,0 +1,110 @@
+{
+ "docs": {
+ "Fundamentals": [
+ "getting-started",
+ "hello-react-navigation",
+ "navigating",
+ "params",
+ "headers",
+ "header-buttons",
+ "nesting-navigators",
+ "navigation-lifecycle",
+ "next-steps"
+ ],
+ "Guides": [
+ "auth-flow",
+ "handling-safe-area",
+ "customizing-tabbar",
+ "hiding-tabbar-in-screens",
+ "status-bar",
+ "modal",
+ "multiple-drawers",
+ "screen-options-resolution",
+ "custom-android-back-button-handling",
+ "shared-element-transitions",
+ "preventing-going-back",
+ "function-after-focusing-screen",
+ "navigating-without-navigation-prop",
+ "deep-linking",
+ "configuring-links",
+ "web-support",
+ "server-rendering",
+ "screen-tracking",
+ "themes",
+ "state-persistence",
+ "combine-static-with-dynamic",
+ "testing",
+ "typescript",
+ "troubleshooting",
+ "upgrading-from-7.x"
+ ],
+ "Navigators": [
+ "stack-navigator",
+ "native-stack-navigator",
+ "bottom-tab-navigator",
+ "drawer-navigator",
+ "material-top-tab-navigator"
+ ],
+ "Libraries": ["devtools", "elements", "tab-view", "drawer-layout"],
+ "API reference": [
+ "static-configuration",
+ "navigation-container",
+ "server-container",
+ "navigator",
+ "group",
+ "screen",
+ "screen-options",
+ "route-object",
+ "navigation-object",
+ "navigation-context",
+ "navigation-events",
+ "navigation-state",
+ "link",
+ {
+ "type": "category",
+ "collapsible": true,
+ "label": "Hooks",
+ "items": [
+ "use-navigation",
+ "use-route",
+ "use-navigation-state",
+ "use-focus-effect",
+ "use-is-focused",
+ "use-prevent-remove",
+ "use-route-path",
+ "use-link-to",
+ "use-link-props",
+ "use-link-builder",
+ "use-scroll-to-top",
+ "use-theme"
+ ]
+ },
+ {
+ "type": "category",
+ "collapsible": true,
+ "label": "Actions",
+ "items": [
+ "navigation-actions",
+ "stack-actions",
+ "drawer-actions",
+ "tab-actions"
+ ]
+ }
+ ],
+ "Build your own Navigator": ["custom-routers", "custom-navigators"],
+ "Ecosystem": [
+ "community-solutions",
+ "community-navigators",
+ "community-libraries",
+ "more-resources"
+ ],
+ "Meta": [
+ "migration-guides",
+ "glossary-of-terms",
+ "pitch",
+ "limitations",
+ "used-by",
+ "contributing"
+ ]
+ }
+}
diff --git a/versions.json b/versions.json
index 9aca05ea139..efdafab2cad 100644
--- a/versions.json
+++ b/versions.json
@@ -1 +1 @@
-["7.x", "6.x", "5.x", "4.x", "3.x", "2.x", "1.x"]
+["8.x", "7.x", "6.x", "5.x", "4.x", "3.x", "2.x", "1.x"]