Skip to content

Commit d9e18a7

Browse files
committed
Document that deep links are enabled by default in static config
1 parent 315ab15 commit d9e18a7

File tree

3 files changed

+67
-19
lines changed

3 files changed

+67
-19
lines changed

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

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,59 @@ Make sure that you have [configured deep links](deep-linking.md) in your app bef
1818
<Tabs groupId="config" queryString="config">
1919
<TabItem value="static" label="Static" default>
2020

21-
The [`Navigation`](static-configuration.md#createstaticnavigation) component accepts a [`linking`](static-configuration.md#differences-in-the-linking-prop) prop that makes it easier to handle incoming links:
21+
React Navigation handles incoming links by default when using [static configuration](static-configuration.md). All leaf screens in the navigator will be assigned a path based on their name automatically. No additional configuration is necessary.
22+
23+
This is equivalent to specifying [`linking`](navigation-container.md#linking) prop on [`Navigation`](static-configuration.md#createstaticnavigation) with `enabled: 'auto'`.
24+
25+
</TabItem>
26+
<TabItem value="dynamic" label="Dynamic">
27+
28+
The [`NavigationContainer`](navigation-container.md) component accepts a [`linking`](navigation-container.md#linking) prop that makes it easier to handle incoming links.
29+
30+
The `config` option in the `linking` prop lets you specify how paths map to screens in your navigation structure:
31+
32+
```js
33+
import { NavigationContainer } from '@react-navigation/native';
34+
35+
// highlight-start
36+
const linking = {
37+
config: {
38+
/* configuration for matching screens with paths */
39+
},
40+
};
41+
// highlight-end
42+
43+
function App() {
44+
return (
45+
<NavigationContainer
46+
// highlight-next-line
47+
linking={linking}
48+
>
49+
{/* content */}
50+
</NavigationContainer>
51+
);
52+
}
53+
```
54+
55+
When you specify the `linking` prop, React Navigation will handle incoming links automatically.
56+
57+
</TabItem>
58+
</Tabs>
59+
60+
On Android and iOS, it'll use React Native's [`Linking` module](https://reactnative.dev/docs/linking) to handle incoming deep links and universal links. On the Web, it'll use the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to sync the URL with the browser.
61+
62+
You can also pass a [`fallback`](navigation-container.md#fallback) prop that controls what's displayed when React Navigation is trying to resolve the initial deep link URL:
63+
64+
<Tabs groupId="config" queryString="config">
65+
<TabItem value="static" label="Static" default>
2266

2367
```js
2468
import { createStaticNavigation } from '@react-navigation/native';
2569

2670
function App() {
2771
return (
2872
<Navigation
29-
// highlight-start
30-
linking={{
31-
enabled: 'auto',
32-
}}
33-
// highlight-end
73+
// highlight-next-line
3474
fallback={<Text>Loading...</Text>}
3575
/>
3676
);
@@ -42,24 +82,18 @@ const Navigation = createStaticNavigation(RootStack);
4282
</TabItem>
4383
<TabItem value="dynamic" label="Dynamic">
4484

45-
The `NavigationContainer` accepts a [`linking`](navigation-container.md#linking) prop that makes it easier to handle incoming links. The 2 of the most important properties you can specify in the `linking` prop are `prefixes` and `config`:
46-
4785
```js
4886
import { NavigationContainer } from '@react-navigation/native';
4987

50-
// highlight-start
5188
const linking = {
52-
config: {
53-
/* configuration for matching screens with paths */
54-
},
89+
// ...
5590
};
56-
// highlight-end
5791

5892
function App() {
5993
return (
6094
<NavigationContainer
61-
// highlight-next-line
6295
linking={linking}
96+
// highlight-next-line
6397
fallback={<Text>Loading...</Text>}
6498
>
6599
{/* content */}
@@ -71,11 +105,7 @@ function App() {
71105
</TabItem>
72106
</Tabs>
73107

74-
When you specify the `linking` prop, React Navigation will handle incoming links automatically.
75-
76-
On Android and iOS, it'll use React Native's [`Linking` module](https://reactnative.dev/docs/linking) to handle incoming deep links and universal links, both when the app was opened with the link, and when new links are received when the app is open. On the Web, it'll use the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to sync the URL with the browser.
77-
78-
You can also pass a [`fallback`](navigation-container.md#fallback) prop that controls what's displayed when React Navigation is trying to resolve the initial deep link URL.
108+
The behavior can be customized further by specifying additional options in the `linking` prop as described below.
79109

80110
## Prefixes
81111

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,8 @@ Similar to `NavigationContainer`, the component returned by `createStaticNavigat
264264

265265
See [How does automatic path generation work](configuring-links.md#how-does-automatic-path-generation-work) for more details.
266266

267+
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.
268+
267269
## `createComponentForStaticNavigation`
268270

269271
The `createComponentForStaticNavigation` function takes the static config returned by `createXNavigator` functions and returns a React component to render. The second argument is a name for the component that'd be used in React DevTools:

versioned_docs/version-8.x/upgrading-from-7.x.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,22 @@ The `prefixes` default to `['*']`, which will match any host starting with `http
565565

566566
See [Configuring links](configuring-links.md) for more details.
567567

568+
#### Deep links are now enabled by default in Static Configuration
569+
570+
Previously, deep linking needs to be explicitly enabled by setting `linking.enabled` to `auto` or by passing a `linking` prop. The additional step was necessary since we also needed `prefixes` to be specified in the linking config.
571+
572+
In React Navigation 8, it now defaults to `auto`, so deep linking is enabled by default with automatic path generation based on screen names when using static configuration:
573+
574+
If you don't want to enable deep linking, you can set `linking.enabled` to `false`:
575+
576+
```diff lang=js
577+
<Navigation
578+
+ linking={{
579+
+ enabled: false,
580+
+ }}
581+
>
582+
```
583+
568584
#### Some exports are removed from `@react-navigation/elements`
569585

570586
The `@react-navigation/elements` package has exported some components that were primarily intended for internal usage. These components have been removed from the public API:

0 commit comments

Comments
 (0)