Update deep link related docs

Author: satya164

versioned_docs/version-7.x/deep-linking.md

@@ -14,7 +14,7 @@ This guide will describe how to configure your app to handle deep links on vario
 
 React Native provides a [`Linking`](https://reactnative.dev/docs/linking) to get notified of incoming links. React Navigation can integrate with the `Linking` module to automatically handle deep links. On Web, React Navigation can integrate with browser's `history` API to handle URLs on client side. See [configuring links](configuring-links.md) to see more details on how to configure links in React Navigation.
 
-While you don't need to use the `linking` prop from React Navigation, and can handle deep links yourself by using the `Linking` API and navigating from there, it'll be significantly more complicated than using the `linking` prop which handles many edge cases for you. So we don't recommend implementing it by yourself.
+We don't recommend handling deep links yourself using a [`ref`](navigation-container.md#ref) as it can be error-prone and significantly more complicated. Using the `linking` prop is the recommended way to handle deep links in React Navigation.
 
 Below, we'll go through required configurations so that the deep link integration works.
 

versioned_docs/version-7.x/web-support.md

@@ -15,7 +15,7 @@ While Web support works out of the box, there are some things to configure to en
 
 1. [**Configure linking**](configuring-links.md)
 
-   Configuring linking allows React Navigation to integrate with the browser's URL bar. This is crucial for web apps to have proper URLs for each screen.
+   Configuring linking allows React Navigation to integrate with the browser's URL bar, using the same configuration as for deep linking in React Native. This is crucial for web apps to have proper URLs for each screen.
 
 2. **Use Button or Link components**
 

versioned_docs/version-8.x/combine-static-with-dynamic.md

@@ -195,7 +195,6 @@ import { createPathConfigForStaticNavigation } from '@react-navigation/native';
 const feedScreens = createPathConfigForStaticNavigation(FeedTabs);
 
 const linking = {
-  prefixes: ['https://example.com', 'example://'],
   config: {
     screens: {
       Home: '',

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

@@ -121,7 +121,7 @@ const linking = {
 
 If not specified, it defaults to `['*']`, which will match any host starting with `http`, `https`, and custom schemes such as `myapp://`.
 
-You only need to specify `prefixes` if you're using **Expo Go** or want to restrict the URLs your app handles.
+You only need to specify `prefixes` if you're using [**Expo Go**](https://expo.dev/go) or want to restrict the URLs your app handles.
 
 :::note
 
@@ -385,7 +385,6 @@ const config = {
 };
 
 const linking = {
-  prefixes: ['https://example.com', 'example://'],
   config,
 };
 
@@ -1557,7 +1556,6 @@ Example:
 
 ```js
 const linking = {
-  prefixes: ['https://example.com', 'example://'],
   getStateFromPath(path, options) {
     // Return a state object here
     // You can also reuse the default logic by importing `getStateFromPath` from `@react-navigation/native`

versioned_docs/version-8.x/deep-linking.md

@@ -14,7 +14,7 @@ This guide will describe how to configure your app to handle deep links on vario
 
 React Native provides a [`Linking`](https://reactnative.dev/docs/linking) to get notified of incoming links. React Navigation can integrate with the `Linking` module to automatically handle deep links. On Web, React Navigation can integrate with browser's `history` API to handle URLs on client side. See [configuring links](configuring-links.md) to see more details on how to configure links in React Navigation.
 
-While you don't need to use the `linking` prop from React Navigation, and can handle deep links yourself by using the `Linking` API and navigating from there, it'll be significantly more complicated than using the `linking` prop which handles many edge cases for you. So we don't recommend implementing it by yourself.
+We don't recommend handling deep links yourself using a [`ref`](navigation-container.md#ref) as it can be error-prone and significantly more complicated. Using the `linking` prop is the recommended way to handle deep links in React Navigation.
 
 Below, we'll go through required configurations so that the deep link integration works.
 
@@ -56,9 +56,9 @@ See more details below at [Configuring React Navigation](#configuring-react-navi
 <details>
 <summary>Why use `Linking.createURL`?</summary>
 
-It is necessary to use `Linking.createURL` since the scheme differs between the [Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/) and standalone apps.
+It is necessary to use `Linking.createURL` since the scheme differs between the [Expo Go](https://expo.dev/go) and standalone apps.
 
-The scheme specified in `app.json` only applies to standalone apps. In the Expo client app you can deep link using `exp://ADDRESS:PORT/--/` where `ADDRESS` is often `127.0.0.1` and `PORT` is often `19000` - the URL is printed when you run `expo start`. The `Linking.createURL` function abstracts it out so that you don't need to specify them manually.
+The scheme specified in `app.json` only applies to standalone apps. In the Expo client (Expo Go or Dev Client) app you can deep link using `exp://ADDRESS:PORT/--/` where `ADDRESS` is often `127.0.0.1` and `PORT` is often `19000` - the URL is printed when you run `expo start`. The `Linking.createURL` function abstracts it out so that you don't need to specify them manually.
 
 </details>
 
@@ -283,55 +283,11 @@ Then, you need to [declare the association](https://developer.android.com/traini
 
 ## Configuring React Navigation
 
-To handle deep links, you need to configure React Navigation to use the `scheme` for parsing incoming deep links:
+To handle deep links, you need to configure React Navigation based on the API you're using.
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js
-const linking = {
-  prefixes: [
-    'example://', // Or `Linking.createURL('/')` for Expo apps
-  ],
-};
-
-function App() {
-  return <Navigation linking={linking} />;
-}
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-const linking = {
-  prefixes: [
-    'example://', // Or `Linking.createURL('/')` for Expo apps
-  ],
-};
-
-function App() {
-  return (
-    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
-      {/* content */}
-    </NavigationContainer>
-  );
-}
-```
+For static configuration, deep links are enabled by default with automatic path generation. So no additional configuration is needed. You can optionally customize the path patterns for specific screens if needed.
 
-</TabItem>
-</Tabs>
-
-If you are using universal links, you need to add your domain to the prefixes as well:
-
-```js
-const linking = {
-  prefixes: [
-    'example://', // Or `Linking.createURL('/')` for Expo apps
-    'https://app.example.com',
-  ],
-};
-```
+For dynamic configuration, deep links are enabled if you provide a `linking` prop to the `NavigationContainer`. The `linking` prop should contain mappings between path patterns and screens.
 
 See [configuring links](configuring-links.md) to see further details on how to configure links in React Navigation.
 
@@ -422,8 +378,6 @@ Here is an example integration with [expo-notifications](https://docs.expo.dev/v
 
 ```js name="Expo Notifications"
 const linking = {
-  prefixes: ['example://', 'https://app.example.com'],
-
   // Custom function to get the URL which was used to open the app
   async getInitialURL() {
     // First, handle deep links
@@ -468,8 +422,6 @@ const linking = {
 
 ```js name="Expo Notifications"
 const linking = {
-  prefixes: ['example://', 'https://app.example.com'],
-
   config: {
     // Deep link configuration
   },

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

@@ -514,13 +514,16 @@ function App() {
 
 </TabItem>
 </Tabs>
+
 See [configuring links guide](configuring-links.md) for more details on how to configure deep links and URL integration.
 
 #### Options
 
 ##### `linking.prefixes`
 
-URL prefixes to handle. You can provide multiple prefixes to support custom schemes as well as [universal links](https://developer.apple.com/ios/universal-links/).
+Optional URL prefixes to handle. By default, it matches any host starting with `http`, `https`, and custom schemes such as `myapp://` if this option is not specified.
+
+You can provide multiple prefixes to support custom schemes as well as [universal links](https://developer.apple.com/ios/universal-links/) to explicitly handle certain prefixes.
 
 Only URLs matching these prefixes will be handled. The prefix will be stripped from the URL before parsing.
 
@@ -591,7 +594,6 @@ import messaging from '@react-native-firebase/messaging';
 
 <Navigation
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     // highlight-start
     async getInitialURL() {
       // Check if app was opened from a deep link
@@ -621,7 +623,6 @@ import messaging from '@react-native-firebase/messaging';
 
 <NavigationContainer
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     config: {
       // ...
     },
@@ -667,7 +668,6 @@ import messaging from '@react-native-firebase/messaging';
 
 <Navigation
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     // highlight-start
     subscribe(listener) {
       const onReceiveURL = ({ url }: { url: string }) => listener(url);
@@ -709,7 +709,6 @@ import messaging from '@react-native-firebase/messaging';
 
 <NavigationContainer
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     config: {
       // ...
     },
@@ -765,7 +764,6 @@ Example:
 ```js
 <Navigation
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     // highlight-start
     getStateFromPath(path, config) {
       // Return a state object here
@@ -782,7 +780,6 @@ Example:
 ```js
 <NavigationContainer
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     config: {
       // ...
     },
@@ -815,7 +812,6 @@ Example:
 ```js
 <Navigation
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     // highlight-start
     getPathFromState(state, config) {
       // Return a path string here
@@ -832,7 +828,6 @@ Example:
 ```js
 <NavigationContainer
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     config: {
       // ...
     },
@@ -865,7 +860,6 @@ Example:
 ```js
 <Navigation
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     // highlight-start
     getActionFromState(state, config) {
       // Return a navigation action here
@@ -882,7 +876,6 @@ Example:
 ```js
 <NavigationContainer
   linking={{
-    prefixes: ['https://example.com', 'example://'],
     config: {
       // ...
     },

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

@@ -366,14 +366,13 @@ Similar to `NavigationContainer`, the component returned by `createStaticNavigat
 
 1. It's not possible to pass a full `config` object to the `linking` prop. It can only accept [`path`](configuring-links.md#apps-under-subpaths) and an [`initialRouteName` for the root navigator](configuring-links.md#rendering-an-initial-route).
 2. The linking config is collected from the [`linking`](#linking) properties specified in the screen configuration.
-3. It's possible to pass `enabled: 'auto'` to automatically generate paths for all leaf screens:
+3. It defaults to `enabled: 'auto'` which enables deep links by default and automatically generate paths for all leaf screens.
 
    ```js
    const Navigation = createStaticNavigation(RootStack);
 
    const linking = {
-     enabled: 'auto',
-     prefixes: ['https://example.com', 'example://'],
+     path: '/app',
    };
 
    function App() {
@@ -383,4 +382,4 @@ Similar to `NavigationContainer`, the component returned by `createStaticNavigat
 
    See [How does automatic path generation work](configuring-links.md#how-does-automatic-path-generation-work) for more details.
 
-By default, linking is enabled in static configuration with automatic path generation. It needs to be explicitly disabled by passing `enabled: false` to the `linking` prop if you don't want linking support.
+By default, linking is enabled in static configuration with automatic path generation. If you don't want linking support, it can be disabled by explicitly passing `enabled: false` to the `linking` prop.

versioned_docs/version-8.x/web-support.md

@@ -15,7 +15,7 @@ While Web support works out of the box, there are some things to configure to en
 
 1. [**Configure linking**](configuring-links.md)
 
-   Configuring linking allows React Navigation to integrate with the browser's URL bar. This is crucial for web apps to have proper URLs for each screen.
+   Configuring linking allows React Navigation to integrate with the browser's URL bar, using the same configuration as for deep linking in React Native. This is crucial for web apps to have proper URLs for each screen.
 
    Automatic links are already enabled by default when using [Static configuration](static-configuration.md). So if you're using static configuration, you don't need to do anything to enable linking.