Update more outdated documentation for 8.x

Author: satya164

versioned_docs/version-8.x/custom-navigators.md

@@ -305,21 +305,18 @@ type MyNavigationEventMap = {
 export type MyNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
-  NavigatorID,
   TabNavigationState<ParamList>,
   MyNavigationOptions,
-  MyNavigationEventMap
-> &
-  TabActionHelpers<ParamList>;
+  MyNavigationEventMap,
+  TabActionHelpers<ParamList>
+>;
 
 // The props accepted by the component is a combination of 3 things
 type Props = DefaultNavigatorOptions<
   ParamListBase,
-  string | undefined,
   TabNavigationState<ParamListBase>,
   MyNavigationOptions,
   MyNavigationEventMap,
@@ -470,7 +467,6 @@ import MyRouter from './MyRouter';
 
 const { state, descriptors, navigation, NavigationContent } =
   useNavigationBuilder(MyRouter, {
-    id,
     initialRouteName,
     children,
     layout,

versioned_docs/version-8.x/custom-routers.md

@@ -152,7 +152,7 @@ The library ships with a few standard routers:
 
 There are two main ways to customize routers:
 
-- Override an existing router with the [`UNSTABLE_router`](navigator.md#router) prop on navigators
+- Override an existing router with the [`router`](navigator.md#router) prop on navigators
 - Customized navigators with a custom router, see [extending navigators](custom-navigators.md#extending-navigators)
 
 ### Custom Navigation Actions

versioned_docs/version-8.x/elements.md

@@ -27,7 +27,7 @@ Usage:
 
 ```js name="React Navigation Elements Header" snack
 import * as React from 'react';
-import { SafeAreaProviderCompat } from '@react-navigation/elements';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { NavigationContainer } from '@react-navigation/native';
 // codeblock-focus-start
 import { Header } from '@react-navigation/elements';
@@ -40,9 +40,9 @@ function MyHeader() {
 export default function App() {
   return (
     <NavigationContainer>
-      <SafeAreaProviderCompat>
+      <SafeAreaProvider>
         <MyHeader />
-      </SafeAreaProviderCompat>
+      </SafeAreaProvider>
     </NavigationContainer>
   );
 }
@@ -704,14 +704,6 @@ It can also be a function that returns a React Element to render any component:
 />
 ```
 
-### `MissingIcon`
-
-A component that renders a missing icon symbol. It can be used as a fallback for icons to show that there's a missing icon. It accepts the following props:
-
-- `color` - Color of the icon.
-- `size` - Size of the icon.
-- `style` - Additional styles for the icon.
-
 ### `PlatformPressable`
 
 A component which provides an abstraction on top of [`Pressable`](https://reactnative.dev/docs/Pressable) to handle platform differences. In addition to `Pressable`'s props, it accepts following additional props:
@@ -816,16 +808,6 @@ Usage:
 
 ## Utilities
 
-### `SafeAreaProviderCompat`
-
-A wrapper over the `SafeAreaProvider` component from [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context) which includes initial values.
-
-Usage:
-
-```js
-<SafeAreaProviderCompat>{/* Your components */}</SafeAreaProviderCompat>
-```
-
 ### `HeaderBackContext`
 
 React context that can be used to get the back title of the parent screen.

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

@@ -151,17 +151,57 @@ String indicating whether the keyboard gets dismissed in response to a drag gest
 - `'on-drag'`: the keyboard is dismissed when a drag begins.
 - `'none'`: drags do not dismiss the keyboard.
 
-#### `overScrollMode`
+#### `adapter`
 
-Used to override default value of pager's overScroll mode.
+Function that renders a custom adapter for rendering pages. By default, the material top tab navigator 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.
 
-Possible values:
+You can use built-in adapters from [`react-native-tab-view`](tab-view.md#renderadapter) or create your own custom adapter.
 
-- `'auto'` (default): Allow a user to over-scroll this view only if the content is large enough to meaningfully scroll.
-- `'always'`: Always allow a user to over-scroll this view.
-- `'never'`: Never allow a user to over-scroll this view.
+To pass adapter-specific props, wrap the adapter in a function and forward the navigator props:
 
-Only supported on Android.
+```js name="Material Top Tab Navigator adapter" snack static2dynamic
+import { Platform, Text, View } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { PagerViewAdapter, ScrollViewAdapter } from 'react-native-tab-view';
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile Screen</Text>
+    </View>
+  );
+}
+
+const MyTabs = createMaterialTopTabNavigator({
+  adapter: (props) =>
+    Platform.OS === 'android' ? (
+      <PagerViewAdapter {...props} overScrollMode="never" pageMargin={8} />
+    ) : (
+      <ScrollViewAdapter {...props} bounces />
+    ),
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(MyTabs);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+`PagerViewAdapter` accepts props from [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view), such as `overScrollMode` and `pageMargin`. `ScrollViewAdapter` accepts [scroll view](https://reactnative.dev/docs/scrollview) props such as `bounces`.
 
 #### `style`
 

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

@@ -381,7 +381,7 @@ Supported values:
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
-When using `vertical` option, options `fullScreenGestureEnabled: true`, `customAnimationOnGesture: true` and `animation: 'slide_from_bottom'` are set by default.
+If you want the gesture to work on the whole screen or match a specific animation, configure `fullScreenGestureEnabled`, `customAnimationOnGesture`, and `animation` explicitly.
 
 Only supported on iOS.
 

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

@@ -717,6 +717,12 @@ The `preload` method 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
+navigation.preload('Profile', { user: 'jane' }, { reuse: true });
+```
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
@@ -911,7 +917,7 @@ Preloading a screen means that the screen will be rendered in the background. Al
 
 Depending on the navigator, `preload` may work slightly 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`

versioned_docs/version-8.x/static-configuration.md

@@ -10,7 +10,7 @@ The bulk of the static configuration is done using the `createXNavigator` functi
 
 The `createXNavigator` functions take one argument, which is an object with the following properties:
 
-- Same props as the navigator component, e.g. `id`, `initialRouteName`, `screenOptions` etc. See [Navigator](navigator.md) as well as the docs for each navigator for more details on the props they accept.
+- Same props as the navigator component, e.g. `initialRouteName`, `screenOptions` etc. See [Navigator](navigator.md) as well as the docs for each navigator for more details on the props they accept.
 - `screens` - an object containing configuration for each screen in the navigator.
 - `groups` - an optional object containing groups of screens (equivalent to [`Group`](group.md) in the dynamic API).
 

versioned_docs/version-8.x/tab-view.md

@@ -256,12 +256,7 @@ Example:
 
 ```js
 import * as React from 'react';
-import {
-  Animated,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { SceneMap, TabView } from 'react-native-tab-view';
 
 const FirstRoute = () => (
@@ -452,25 +447,13 @@ String indicating whether the keyboard gets dismissed in response to a drag gest
 - `'on-drag'`: the keyboard is dismissed when a drag begins.
 - `'none'`: drags do not dismiss the keyboard.
 
-##### `overScrollMode`
-
-Used to override default value of pager's overScroll mode.
-
-Possible values:
-
-- `'auto'` (default): Allow a user to over-scroll this view only if the content is large enough to meaningfully scroll.
-- `'always'`: Always allow a user to over-scroll this view.
-- `'never'`: Never allow a user to over-scroll this view.
-
-Only supported on Android.
-
 ##### `swipeEnabled`
 
 Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
 
 ##### `renderAdapter`
 
-A function that returns a custom adapter for rendering pages. 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.
+Function that renders a custom adapter for rendering pages. 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.
 
 You can use built-in adapters or create your own custom adapter. For example, you can use `ScrollViewAdapter` to use a `ScrollView` for rendering pages:
 
@@ -498,6 +481,36 @@ The following built-in adapters are available:
 - `PanResponderAdapter`: Uses [`PanResponder`](https://reactnative.dev/docs/panresponder) for handling gestures (default on Web and other platforms).
 - `ScrollViewAdapter`: Uses [`ScrollView`](https://reactnative.dev/docs/scrollview) for rendering pages.
 
+To pass adapter-specific props, wrap the adapter in a function and forward the `TabView` props:
+
+```js
+import { Platform } from 'react-native';
+import {
+  PagerViewAdapter,
+  ScrollViewAdapter,
+  TabView,
+} from 'react-native-tab-view';
+
+function App() {
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex}
+      renderAdapter={(props) =>
+        Platform.OS === 'android' ? (
+          <PagerViewAdapter {...props} overScrollMode="never" pageMargin={8} />
+        ) : (
+          <ScrollViewAdapter {...props} bounces />
+        )
+      }
+    />
+  );
+}
+```
+
+`PagerViewAdapter` accepts props from [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view), such as `overScrollMode` and `pageMargin`. `ScrollViewAdapter` accepts [scroll view](https://reactnative.dev/docs/scrollview) props such as `bounces`, `decelerationRate`, and `keyboardShouldPersistTaps`.
+
 You can also create your own custom adapter by implementing the required interface:
 
 ```ts