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: blog/2024-03-25-introducing-static-api.md
+15-12
Original file line number
Diff line number
Diff line change
@@ -15,13 +15,13 @@ To solve this, we’re adding a new static API to React Navigation 7. It’s not
15
15
16
16
:::note
17
17
18
-
The static API it’s an additional optional API. The dynamic API isn’t going away and will remain a firstclass API of React Navigation. In fact, the static API is written entirely on top of the dynamic API.
18
+
The static API it’s an additional optional API. The dynamic API isn’t going away and will remain a first-class API of React Navigation. In fact, the static API is written entirely on top of the dynamic API.
19
19
20
20
:::
21
21
22
22
## Overview
23
23
24
-
With the dynamic API, first we import a function such as `createStackNavigator`, then we use it to define screens - each screen has a `name` and a `component`:
24
+
With the dynamic API, first, we import a function such as `createStackNavigator`, and then we use it to define screens - each screen has a `name` and a `component`:
25
25
26
26
```js
27
27
constStack=createStackNavigator();
@@ -40,7 +40,7 @@ function RootStack() {
40
40
The static API follows the same principles. Here we are specifying screens in a property called `screens`, the name of the screen is a key in the configuration object and the value contains the component to render:
41
41
42
42
```js
43
-
constRootStack= {
43
+
constRootStack=createStackNavigator({
44
44
screens: {
45
45
Home: {
46
46
screen: Home,
@@ -52,10 +52,10 @@ const RootStack = {
52
52
screen: Settings,
53
53
},
54
54
},
55
-
};
55
+
});
56
56
```
57
57
58
-
Then after writing our navigation config, we call `createStaticNavigation` and render the returned the component:
58
+
Then after writing our navigation config, we call `createStaticNavigation` and render the returned component:
@@ -96,15 +96,15 @@ There are 2 improvements to deep linking API:
96
96
constRootStack=createStackNavigator({
97
97
screens: {
98
98
Profile: {
99
-
screen:Profile,
99
+
screen:ProfileScreen,
100
100
// highlight-start
101
101
linking: {
102
102
path:'user/:id',
103
103
},
104
104
// highlight-end
105
105
},
106
106
Settings: {
107
-
screen:Settings,
107
+
screen:SettingsScreen,
108
108
// highlight-start
109
109
linking: {
110
110
path:'settings',
@@ -120,14 +120,17 @@ There are 2 improvements to deep linking API:
120
120
```js
121
121
constRootStack=createStackNavigator({
122
122
screens: {
123
+
// Generated path: ''
123
124
Home: {
124
-
screen:Home, // Generated path: ''
125
+
screen:HomeScreen,
125
126
},
127
+
// Generated path: 'profile'
126
128
Profile: {
127
-
screen:Profile, // Generated path: 'profile'
129
+
screen:ProfileScreen,
128
130
},
131
+
// Generated path: 'news-feed'
129
132
NewsFeed: {
130
-
screen:Settings, // Generated path: 'news-feed'
133
+
screen:NewsFeedScreen,
131
134
},
132
135
},
133
136
});
@@ -153,7 +156,7 @@ See [Configuring links](/docs/7.x/configuring-links?config=static) for more deta
153
156
154
157
## Authentication Flow
155
158
156
-
One of the nice things about the dynamic APIs is declarative authentication flow. You declaratively define which screens are available for loggedin and guest users, and React Navigation would handle showing the appropriate screens automatically. To keep a similar experience, we added some dynamism to the new static API with the if property:
159
+
One of the nice things about the dynamic APIs is the declarative authentication flow. You declaratively define which screens are available for logged-in and guest users, and React Navigation would handle showing the appropriate screens automatically. To keep a similar experience, we added some dynamism to the new static API with the if property:
In addition to the static API, React Navigation 7 also includes a lot of other improvements and new features. Make sure to go through the [upgrade guide](/docs/7.x/upgrading-from-6.x) to see all the changes.
192
195
193
-
We would love to get feedback from the community on how it works for you and catch any issues before the stable release. If you have any feedback or suggestions, please let us know on our [GitHub Discussions forum](https://github.com/react-navigation/react-navigation/discussions). Or if you find any issues, please report them on our [GitHub issues](https://github.com/react-navigation/react-navigation/issues).
196
+
We would love to get feedback from the community on how it works for you and catch any issues before the stable release. If you have any feedback or suggestions, please let us know on our [GitHub Discussions forum](https://github.com/react-navigation/react-navigation/discussions). If you find any issues, please report them on our [GitHub issues](https://github.com/react-navigation/react-navigation/issues).
0 commit comments