Update docs with 7.x changes

Author: satya164

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

@@ -69,6 +69,21 @@ const linking = {
 };
 ```
 
+### Filtering certain paths
+
+Sometimes we may not want to handle all incoming links. For example, we may want to filter out links meant for authentication (e.g. `expo-auth-session`) or other purposes instead of navigating to a specific screen.
+
+To achieve this, you can use the `filter` option:
+
+```js
+const linking = {
+  prefixes: ['mychat://', 'https://mychat.com'],
+  filter: (url) => !url.includes('+expo-auth-session'),
+};
+```
+
+This is not supported on Web as we always need to handle the URL of the page.
+
 ## Mapping path to route names
 
 To handle a link, you need to translate it to a valid [navigation state](navigation-state.md) and vice versa. For example, the path `/rooms/chat?user=jane` may be translated to a state object like this:

versioned_docs/version-6.x/themes.md

@@ -79,7 +79,7 @@ import { DefaultTheme, DarkTheme } from '@react-navigation/native';
 
 ## Using the operating system preferences
 
-On iOS 13+ and Android 10+, you can get user's preferred color scheme (`'dark'` or `'light'`) with the ([Appearance API](https://reactnative.dev/docs/appearance)).
+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)).
 
 <samp id="system-themes" />
 

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

@@ -230,7 +230,7 @@ function MyTabBar({ state, descriptors, navigation }) {
             accessibilityRole="button"
             accessibilityState={isFocused ? { selected: true } : {}}
             accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
+            testID={options.tabBarButtonTestID}
             onPress={onPress}
             onLongPress={onLongPress}
             style={{ flex: 1 }}
@@ -319,10 +319,6 @@ Style for the badge on the tab icon. You can specify a background color or text
 
 Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.
 
-#### `tabBarTestID`
-
-ID to locate this tab button in tests.
-
 #### `tabBarButton`
 
 Function which returns a React element to render as the tab bar button. It wraps the icon and label. Renders `Pressable` by default.
@@ -333,6 +329,10 @@ You can specify a custom implementation here:
 tabBarButton: (props) => <TouchableOpacity {...props} />;
 ```
 
+#### `tabBarButtonTestID`
+
+ID to locate this tab button in tests.
+
 #### `tabBarActiveTintColor`
 
 Color for the icon and label in the active tab.

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

@@ -69,6 +69,40 @@ const linking = {
 };
 ```
 
+### Filtering certain paths
+
+Sometimes we may not want to handle all incoming links. For example, we may want to filter out links meant for authentication (e.g. `expo-auth-session`) or other purposes instead of navigating to a specific screen.
+
+To achieve this, you can use the `filter` option:
+
+```js
+const linking = {
+  prefixes: ['mychat://', 'https://mychat.com'],
+  // highlight-next-line
+  filter: (url) => !url.includes('+expo-auth-session'),
+};
+```
+
+This is not supported on Web as we always need to handle the URL of the page.
+
+### Apps under subpaths
+
+If your app is hosted under a subpath, you can specify the subpath at the top-level of the `config`. For example, if your app is hosted at `https://mychat.com/app`, you can specify the `path` as `app`:
+
+```js
+const linking = {
+  prefixes: ['mychat://', 'https://mychat.com'],
+  config: {
+    // highlight-next-line
+    path: 'app',
+
+    // ...
+  },
+};
+```
+
+It's not possible to specify params here since this doesn't belong to a screen, e.g. `app/:id` won't work.
+
 ## Mapping path to route names
 
 To handle a link, you need to translate it to a valid [navigation state](navigation-state.md) and vice versa. For example, the path `/rooms/chat?user=jane` may be translated to a state object like this:

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

@@ -145,7 +145,9 @@ import {
 
 // ...
 
-export const createMyNavigator = createNavigatorFactory(TabNavigator);
+export function createMyNavigator(config) {
+  return createNavigatorFactory(TabNavigator)(config);
+}
 ```
 
 Then it can be used like this:
@@ -181,19 +183,22 @@ import {
   View,
   Text,
   Pressable,
-  StyleProp,
-  ViewStyle,
+  type StyleProp,
+  type ViewStyle,
   StyleSheet,
 } from 'react-native';
 import {
   createNavigatorFactory,
-  DefaultNavigatorOptions,
-  ParamListBase,
   CommonActions,
-  TabActionHelpers,
-  TabNavigationState,
+  type DefaultNavigatorOptions,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type StaticConfig,
+  type TabActionHelpers,
+  type TabNavigationState,
   TabRouter,
-  TabRouterOptions,
+  type TabRouterOptions,
+  type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/native';
 
@@ -298,12 +303,30 @@ function TabNavigator({
   );
 }
 
-export default createNavigatorFactory<
-  TabNavigationState<ParamListBase>,
-  TabNavigationOptions,
-  TabNavigationEventMap,
-  typeof TabNavigator
->(TabNavigator);
+export function createMyNavigator<
+  ParamList extends ParamListBase,
+  NavigatorID extends string | undefined = undefined,
+  TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: TabNavigationState<ParamList>;
+    ScreenOptions: TabNavigationOptions;
+    EventMap: TabNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: TabNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    };
+    Navigator: typeof TabNavigator;
+  },
+  Config extends StaticConfig<TypeBag> | undefined =
+    | StaticConfig<TypeBag>
+    | undefined,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  return createNavigatorFactory(TabNavigator)(config);
+}
 ```
 
 ## Extending Navigators
@@ -346,7 +369,9 @@ function BottomTabNavigator({
   );
 }
 
-export default createNavigatorFactory(BottomTabNavigator);
+export function createMyNavigator(config) {
+  return createNavigatorFactory(TabNavigator)(config);
+}
 ```
 
 Now, we can customize it to add additional functionality or change the behavior. For example, use a [custom router](custom-routers.md) instead of the default `TabRouter`:

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

@@ -22,7 +22,7 @@ npm install react-native-drawer-layout
 
 Then, you need to install and configure the libraries that are required by the drawer:
 
-1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
+1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) (at least version 2 or 3).
 
    If you have a Expo managed project, in your project directory, run:
 
@@ -36,9 +36,9 @@ Then, you need to install and configure the libraries that are required by the d
    npm install react-native-gesture-handler react-native-reanimated
    ```
 
-   The Drawer supports both Reanimated 1 and the latest version of Reanimated. If you want to use the latest version of Reanimated, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
+2. Configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 
-2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
+3. To finalize the installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
 
    ```js
    import 'react-native-gesture-handler';
@@ -50,7 +50,7 @@ Then, you need to install and configure the libraries that are required by the d
 
    :::
 
-3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
+4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
 ```bash
 npx pod-install ios

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

@@ -22,7 +22,7 @@ npm install @react-navigation/drawer@next
 
 Then, you need to install and configure the libraries that are required by the drawer navigator:
 
-1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
+1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) (at least version 2 or 3).
 
    If you have a Expo managed project, in your project directory, run:
 
@@ -36,9 +36,9 @@ Then, you need to install and configure the libraries that are required by the d
    npm install react-native-gesture-handler react-native-reanimated
    ```
 
-   The Drawer supports both Reanimated 1 and the latest version of Reanimated. If you want to use the latest version of Reanimated, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
+2. Configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 
-2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
+3. To finalize the installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
 
    ```js
    import 'react-native-gesture-handler';
@@ -50,7 +50,7 @@ Then, you need to install and configure the libraries that are required by the d
 
    :::
 
-3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
+4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
 ```bash
 npx pod-install ios

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

@@ -274,7 +274,7 @@ function MyTabBar({ state, descriptors, navigation, position }) {
             accessibilityRole="button"
             accessibilityState={isFocused ? { selected: true } : {}}
             accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
+            testID={options.tabBarButtonTestID}
             onPress={onPress}
             onLongPress={onLongPress}
             style={{ flex: 1 }}
@@ -378,7 +378,7 @@ Style object for the tab bar indicator.
 
 Style object for the view containing the tab bar indicator.
 
-#### `tabBarTestID`
+#### `tabBarButtonTestID`
 
 ID to locate this tab button in tests.
 

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

@@ -579,7 +579,7 @@ Only supported on Android.
 
 Style object for the scene content.
 
-#### `customAnimationOnGesture`
+#### `animationMatchesGesture`
 
 Whether the gesture to dismiss should use animation provided to `animation` prop. Defaults to `false`.
 

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

@@ -246,6 +246,16 @@ const Tabs = createBottomTabNavigator({
 </Tabs>
 Now, if you have a stack with the history `Home > Profile (userId: bob) > Settings` and you call `navigate(Profile, { userId: 'alice' })`, the resulting screens will be `Home > Profile (userId: bob) > Settings > Profile (userId: alice)` since it'll add a new `Profile` screen as no matching screen was found.
 
+### `navigateDeprecated`
+
+:::warning
+
+This method is deprecated and will be removed in a future release. It only exists for compatibility purposes. Use `navigate` instead.
+
+:::
+
+TODO
+
 ### `goBack`
 
 The `goBack` method lets us go back to the previous screen in the navigator.