Skip to content

Commit

Permalink
Fix typo in blog post
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Mar 27, 2024
1 parent 556ef6e commit 65c6448
Showing 1 changed file with 15 additions and 12 deletions.
27 changes: 15 additions & 12 deletions blog/2024-03-25-introducing-static-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ To solve this, we’re adding a new static API to React Navigation 7. It’s not

:::note

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.
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.

:::

## Overview

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`:
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`:

```js
const Stack = createStackNavigator();
Expand All @@ -40,7 +40,7 @@ function RootStack() {
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:

```js
const RootStack = {
const RootStack = createStackNavigator({
screens: {
Home: {
screen: Home,
Expand All @@ -52,10 +52,10 @@ const RootStack = {
screen: Settings,
},
},
};
});
```

Then after writing our navigation config, we call `createStaticNavigation` and render the returned the component:
Then after writing our navigation config, we call `createStaticNavigation` and render the returned component:

```js
const Navigation = createStaticNavigation(RootStack);
Expand Down Expand Up @@ -96,15 +96,15 @@ There are 2 improvements to deep linking API:
const RootStack = createStackNavigator({
screens: {
Profile: {
screen: Profile,
screen: ProfileScreen,
// highlight-start
linking: {
path: 'user/:id',
},
// highlight-end
},
Settings: {
screen: Settings,
screen: SettingsScreen,
// highlight-start
linking: {
path: 'settings',
Expand All @@ -120,14 +120,17 @@ There are 2 improvements to deep linking API:
```js
const RootStack = createStackNavigator({
screens: {
// Generated path: ''
Home: {
screen: Home, // Generated path: ''
screen: HomeScreen,
},
// Generated path: 'profile'
Profile: {
screen: Profile, // Generated path: 'profile'
screen: ProfileScreen,
},
// Generated path: 'news-feed'
NewsFeed: {
screen: Settings, // Generated path: 'news-feed'
screen: NewsFeedScreen,
},
},
});
Expand All @@ -153,7 +156,7 @@ See [Configuring links](/docs/7.x/configuring-links?config=static) for more deta

## Authentication Flow

One of the nice things about the dynamic APIs is 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:
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:

```js
const RootStack = createNativeStackNavigator({
Expand Down Expand Up @@ -190,4 +193,4 @@ yarn add @react-navigation/native@next @react-navigation/native-stack@next

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.

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).
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 comments on commit 65c6448

Please sign in to comment.