Document more changes in 8.x

Author: satya164

versioned_docs/version-7.x/navigation-context.md

@@ -1,77 +1,59 @@
 ---
 id: navigation-context
-title: NavigationContext
-sidebar_label: NavigationContext
+title: Navigation context
+sidebar_label: Navigation context
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+The `NavigationProvider` provides the [navigation object](navigation-object.md) and [route object](route-object.md) to components rendered outside of a screen.
 
-`NavigationContext` provides the `navigation` object (same object as the [navigation](navigation-object.md) prop). In fact, [useNavigation](use-navigation.md) uses this context to get the `navigation` prop.
+Most of the time, you don't need to use this directly. Screens and various built-in components such as headers are automatically provided with the navigation and route objects.
 
-Most of the time, you won't use `NavigationContext` directly, as the provided `useNavigation` covers most use cases. But just in case you have something else in mind, `NavigationContext` is available for you to use.
+## Providing navigation and route
 
-Example:
+Use `NavigationProvider` when you already have `navigation` and `route` objects and need to make them available to a component that doesn't normally have access to them:
 
-```js name="Navigation context" snack static2dynamic
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { Button } from '@react-navigation/elements';
-// codeblock-focus-start
-import { NavigationContext } from '@react-navigation/native';
-// codeblock-focus-end
+```js
 import {
+  NavigationProvider,
   useNavigation,
-  createStaticNavigation,
+  useRoute,
 } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
-function HomeScreen() {
-  return <SomeComponent />;
-}
-
-// codeblock-focus-start
-
-function SomeComponent() {
-  // We can access navigation object via context
-  const navigation = React.useContext(NavigationContext);
-  // codeblock-focus-end
 
+function MyComponent({ navigation, route }) {
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Some component inside HomeScreen</Text>
-      <Button onPress={() => navigation.navigate('Profile')}>
-        Go to Profile
-      </Button>
-    </View>
+    <NavigationProvider navigation={navigation} route={route}>
+      <MyButton />
+    </NavigationProvider>
   );
-  // codeblock-focus-start
 }
-// codeblock-focus-end
 
-function ProfileScreen() {
+function MyButton() {
   const navigation = useNavigation();
+  const route = useRoute();
 
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.goBack()}>Go back</Button>
-    </View>
-  );
+  // ...
 }
+```
 
-const RootStack = createNativeStackNavigator({
-  initialRouteName: 'Home',
-  screens: {
-    Home: HomeScreen,
-    Profile: ProfileScreen,
-  },
-});
+This is useful for components rendered in [custom navigators](custom-navigators.md) that are not under a screen.
 
-const Navigation = createStaticNavigation(RootStack);
+## Accessing navigation and route
 
-function App() {
-  return <Navigation />;
-}
+For most cases, you should use the [`useNavigation`](use-navigation.md) and [`useRoute`](use-route.md) hooks to access the navigation and route objects. They work in screens rendered in a navigator, or components wrapped in a `NavigationProvider`.
+
+However, if you need access to the contexts directly for any reason, you can use `NavigationContext` and `NavigationRouteContext` to access the navigation and route objects from the immediate parent screen or `NavigationProvider`:
 
-export default App;
+```js
+import * as React from 'react';
+import {
+  NavigationContext,
+  NavigationRouteContext,
+} from '@react-navigation/native';
+
+function MyComponent() {
+  const navigation = React.useContext(NavigationContext);
+  const route = React.useContext(NavigationRouteContext);
+
+  // ...
+}
 ```

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

@@ -1024,7 +1024,7 @@ Supported on iOS 18 and above with `native` implementation. Not supported on tvO
 The minimize behavior for the tab bar. Supported values:
 
 - `auto` - resolves to the system default minimize behavior
-- `never` - the tab bar does not minimize
+- `none` - the tab bar does not minimize
 - `onScrollDown` - the tab bar minimizes when scrolling down and expands when scrolling back up
 - `onScrollUp` - the tab bar minimizes when scrolling up and expands when scrolling back down
 

versioned_docs/version-8.x/devtools.md

@@ -23,7 +23,7 @@ The package exposes the following APIs:
 
 ### `useLogger`
 
-This hook provides a logger for React Navigation. It logs the navigation state and actions to the console.
+This hook provides a logger for React Navigation. It logs the navigation state, actions, deep links, and events emitted by navigators to the console.
 
 <video playsInline autoPlay muted loop style={{ width: "585px" }}>
 

versioned_docs/version-8.x/drawer-layout.md

@@ -105,10 +105,6 @@ Callback which is called when the drawer is closed.
 
 Callback which returns a react element to render as the content of the drawer.
 
-##### `layout`
-
-Object containing the layout of the container. Defaults to the dimensions of the application's window.
-
 ##### `drawerPosition`
 
 Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.

versioned_docs/version-8.x/drawer-navigator.md

@@ -448,6 +448,10 @@ drawerItemStyle: {
 },
 ```
 
+#### `drawerItemTestID`
+
+ID to locate the drawer item in tests.
+
 #### `drawerLabelStyle`
 
 Style object to apply to the `Text` style inside content section which renders a label.
@@ -657,13 +661,6 @@ Minimum swipe distance threshold that should activate opening the drawer.
 
 Whether the keyboard should be dismissed when the swipe gesture begins. Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
 
-#### `freezeOnBlur`
-
-Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to `false`.
-Defaults to `true` when `enableFreeze()` from `react-native-screens` package is run at the top of the application.
-
-Only supported on iOS and Android.
-
 #### `popToTopOnBlur`
 
 Boolean indicating whether any nested stack should be popped to the top of the stack when navigating away from this drawer screen. Defaults to `false`.

versioned_docs/version-8.x/elements.md

@@ -178,7 +178,7 @@ It receives an object containing following properties:
 - `tintColor`: The color of the icon and label.
 - `pressColor`: The color of the material ripple (Android >= 5.0 only).
 - `pressOpacity`: The opacity of the button when it's pressed (Android < 5.0, and iOS).
-- `displayMode`: How the element displays icon and title. Defaults to `default` on iOS and `minimal` on Android. Possible values:
+- `displayMode`: How the element displays icon and title. Defaults to `default` on iOS 25 and below, and `minimal` on iOS 26 and above and Android. Possible 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). iOS >= 14 only, falls back to "default" on older iOS versions.
   - `minimal`: Always displays only the icon without a title.
@@ -373,7 +373,7 @@ Customize the style for the container of the `headerLeft` component, for example
 
 Whether the liquid glass background is visible for the item.
 
-Only supported on iOS 26.0 and later. Older versions of iOS and other platforms never show the background.\
+Only supported on iOS 26.0 and later. Older versions of iOS and other platforms never show the background.
 
 Defaults to `true`.
 
@@ -413,6 +413,35 @@ Note that if you don't want your content to appear under the header, you need to
 
 To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](#useheaderheight).
 
+#### `headerBlurEffect`
+
+Blur effect for the transparent header on Web. The `headerTransparent` option needs to be set to `true` for this to work.
+
+Supported values:
+
+- `extraLight`
+- `light`
+- `regular`
+- `prominent`
+- `systemUltraThinMaterial`
+- `systemThinMaterial`
+- `systemMaterial`
+- `systemThickMaterial`
+- `systemChromeMaterial`
+- `systemUltraThinMaterialLight`
+- `systemThinMaterialLight`
+- `systemMaterialLight`
+- `systemThickMaterialLight`
+- `systemChromeMaterialLight`
+- `dark`
+- `systemUltraThinMaterialDark`
+- `systemThinMaterialDark`
+- `systemMaterialDark`
+- `systemThickMaterialDark`
+- `systemChromeMaterialDark`
+
+Only supported on Web.
+
 #### `headerBackground`
 
 Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient.
@@ -621,17 +650,14 @@ A component used to show the back button header. It's the default for [`headerLe
 - `pressColor` - Color for material ripple (Android >= 5.0 only).
 - `icon` - Icon to display custom icon in header's back button. See [Custom back icon](#custom-back-icon) section for more details.
 - `tintColor` - Tint color for the header.
-- `label` - Label text for the button. Usually the title of the previous screen. By default, this is only shown on iOS.
+- `label` - Label text for the button. Usually the title of the previous screen. By default, this is only shown on iOS 25 and below.
 - `truncatedLabel` - Label text to show when there isn't enough space for the full label.
-- `displayMode`: How the back button displays icon and title. Defaults to `default` on iOS and `minimal` on Android. Possible values:
+- `displayMode`: How the back button displays icon and title. Defaults to `default` on iOS 25 and below, and `minimal` on iOS 26 and above and Android. Possible 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). iOS >= 14 only, falls back to "default" on older iOS versions.
   - `minimal`: Always displays only the icon without a title.
 - `labelStyle` - Style object for the label.
 - `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings.
-- `onLabelLayout` - Callback to trigger when the size of the label changes.
-- `screenLayout` - Layout of the screen.
-- `titleLayout` - Layout of the title element in the header.
 - `canGoBack` - Boolean to indicate whether it's possible to navigate back in stack.
 - `accessibilityLabel` - Accessibility label for the button for screen readers.
 - `testID` - ID to locate this button in tests.
@@ -702,7 +728,9 @@ A component that renders a button. In addition to [`PlatformPressable`](#platfor
   - `plain`
   - `filled`
 - `color` - Color of the button. Defaults to the [theme](themes.md)'s primary color.
-- `children` - Content to render inside the button.
+- `icon` - Icon to display before the label. It can be an icon object or a function that returns an icon object or a React element. See [Icons](icons.md) for more details.
+- `disabled` - Boolean which controls whether the button is disabled.
+- `children` - Content to render inside the button. It must be a string or React element that can be nested inside a `Text` component.
 
 In addition, the button integrates with React Navigation and accepts the same props as [`useLinkProps`](use-link-props.md#options) hook.
 
@@ -720,6 +748,29 @@ Or as a regular button:
 <Button onPress={() => console.log('button pressed')}>Press me</Button>
 ```
 
+You can use the `icon` prop to show an icon before the label:
+
+```js
+<Button
+  icon={Platform.select({
+    ios: {
+      type: 'sfSymbol',
+      name: 'person',
+    },
+    android: {
+      type: 'materialSymbol',
+      name: 'person',
+    },
+  })}
+  screen="Profile"
+  params={{ userId: 'jane' }}
+>
+  Go to Profile
+</Button>
+```
+
+See [Icons](icons.md) for more details on icons.
+
 ### `Label`
 
 The `Label` component is used to render small text. It is used in [Bottom Tab Navigator](bottom-tab-navigator.md) to render the label for each tab.

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

@@ -163,16 +163,6 @@ Possible values:
 
 Only supported on Android.
 
-#### `initialLayout`
-
-Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:
-
-```js
-{
-  width: Dimensions.get('window').width,
-}
-```
-
 #### `style`
 
 Style to apply to the tab view container.

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

@@ -402,13 +402,6 @@ Boolean indicating whether the navigation bar should be hidden. Defaults to `fal
 
 Only supported on Android.
 
-#### `freezeOnBlur`
-
-Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to `false`.
-Defaults to `true` when `enableFreeze()` from `react-native-screens` package is run at the top of the application.
-
-Only supported on iOS and Android.
-
 #### `scrollEdgeEffects`
 
 Configures the scroll edge effect for the _content ScrollView_ (the ScrollView that is present in first descendants chain of the Screen).
@@ -910,7 +903,7 @@ headerRight: () => <MaterialCommunityIcons name="map" color="blue" size={36} />;
 
 Whether the liquid glass background is visible for the item.
 
-Only supported on iOS 26.0 and later. Older versions of iOS and other platforms never show the background.\
+Only supported on iOS 26.0 and later. Older versions of iOS and other platforms never show the background.
 
 Defaults to `true`.
 

versioned_docs/version-8.x/navigation-actions.md

@@ -450,6 +450,8 @@ The `preload` action allows preloading a screen in the background before navigat
 
 - `name` - _string_ - A destination name of the screen in the current or a parent navigator.
 - `params` - _object_ - Params to use for the destination route.
+- `options` - Options object containing the following properties:
+  - `reuse` - _boolean_ - Whether to reuse a matching preloaded or existing route instead of adding a new preloaded route. Defaults to `false`.
 
 ```js name="Common actions preload" snack static2dynamic
 import * as React from 'react';
@@ -551,7 +553,7 @@ Preloading a screen means that the screen will be rendered in the background. Al
 
 Depending on the navigator, `preload` may work differently:
 
-- In a stack navigator ([stack](stack-navigator.md), [native stack](native-stack-navigator.md)), the screen will be rendered off-screen and animated in when you navigate to it. If [`getId`](screen.md#id) is specified, it'll be used for the navigation to identify the preloaded screen.
+- In a stack navigator ([stack](stack-navigator.md), [native stack](native-stack-navigator.md)), the screen will be rendered off-screen and animated in when you navigate to it. If [`getId`](screen.md#id) is specified, it'll be used for the navigation to identify the preloaded screen. When `reuse` is `true`, a matching preloaded or existing route will be reused and its params will be updated.
 - In a tab or drawer navigator ([bottom tabs](bottom-tab-navigator.md), [material top tabs](material-top-tab-navigator.md), [drawer](drawer-navigator.md), etc.), the existing screen will be rendered as if `lazy` was set to `false`. Calling `preload` on a screen that is already rendered will not have any effect.
 
 ### setParams