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.

versioned_docs/version-7.x/screen-options.md

@@ -141,7 +141,7 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-You can also pass a function to `options`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for that screen. This can be useful if you want to perform navigation in your options:
+You can also pass a function to `options`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for that screen, as well as the [`theme` object](themes.md). This can be useful if you want to perform navigation in your options:
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>

versioned_docs/version-7.x/screen.md

@@ -134,7 +134,7 @@ const Stack = createNativeStackNavigator({
 </TabItem>
 </Tabs>
 
-When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
+When you pass a function, it'll receive the [`route`](route-object.md), [`navigation`](navigation-object.md) and [`theme`](themes.md) as arguments:
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
@@ -144,7 +144,7 @@ const Stack = createNativeStackNavigator({
   screens: {
     Profile: {
       screen: ProfileScreen,
-      options: ({ route, navigation }) => ({
+      options: ({ route, navigation, theme }) => ({
         title: route.params.userId,
       }),
     },

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

@@ -255,10 +255,6 @@ This is shortcut option which configures several options to configure the style
 
 See [Transparent modals](#transparent-modals) for more details on how to customize `transparentModal`.
 
-#### `animationEnabled`
-
-Whether transition animation should be enabled on the screen. If you set it to `false`, the screen won't animate when pushing or popping. Defaults to `true` on iOS and Android, `false` on Web.
-
 #### `animationTypeForReplace`
 
 The type of animation to use when this screen replaces another screen. It takes the following values:
@@ -646,6 +642,22 @@ function MyStack() {
 
 ## 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.
+- `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`.
+
 ### 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.

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

@@ -225,14 +225,14 @@ const RootStack = createNativeStackNavigator({
 });
 ```
 
-When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
+When you pass a function, it'll receive the [`route`](route-object.md), [`navigation`](navigation-object.md) and [`theme`](themes.md) as arguments:
 
 ```js
 const RootStack = createNativeStackNavigator({
   screens: {
     Profile: {
       screen: ProfileScreen,
-      options: ({ route, navigation }) => ({
+      options: ({ route, navigation, theme }) => ({
         title: route.params.userId,
       }),
     },