You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: versioned_docs/version-8.x/configuring-links.md
+49-19Lines changed: 49 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,19 +18,59 @@ Make sure that you have [configured deep links](deep-linking.md) in your app bef
18
18
<TabsgroupId="config"queryString="config">
19
19
<TabItemvalue="static"label="Static"default>
20
20
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
+
<TabItemvalue="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:
/* configuration for matching screens with paths */
39
+
},
40
+
};
41
+
// highlight-end
42
+
43
+
functionApp() {
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:
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`:
/* configuration for matching screens with paths */
54
-
},
89
+
// ...
55
90
};
56
-
// highlight-end
57
91
58
92
functionApp() {
59
93
return (
60
94
<NavigationContainer
61
-
// highlight-next-line
62
95
linking={linking}
96
+
// highlight-next-line
63
97
fallback={<Text>Loading...</Text>}
64
98
>
65
99
{/* content */}
@@ -71,11 +105,7 @@ function App() {
71
105
</TabItem>
72
106
</Tabs>
73
107
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.
Copy file name to clipboardExpand all lines: versioned_docs/version-8.x/static-configuration.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -264,6 +264,8 @@ Similar to `NavigationContainer`, the component returned by `createStaticNavigat
264
264
265
265
See [How does automatic path generation work](configuring-links.md#how-does-automatic-path-generation-work) for more details.
266
266
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
+
267
269
## `createComponentForStaticNavigation`
268
270
269
271
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:
Copy file name to clipboardExpand all lines: versioned_docs/version-8.x/upgrading-from-7.x.md
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -565,6 +565,22 @@ The `prefixes` default to `['*']`, which will match any host starting with `http
565
565
566
566
See [Configuring links](configuring-links.md) for more details.
567
567
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
+
568
584
#### Some exports are removed from `@react-navigation/elements`
569
585
570
586
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