Skip to content

Commit d034fd1

Browse files
satya164satya164
authored
Use the recommended static API for navigation docs (#4661)
1 parent 63565d0 commit d034fd1

File tree

9 files changed

+357
-396
lines changed

9 files changed

+357
-396
lines changed

‎docs/navigation.md

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@ If you're integrating React Native into an app that already manages navigation n
1313

1414
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.
1515

16+
### Starter template
17+
18+
If you're starting a new project, you can use the React Navigation template to quickly set up a new project with [Expo](https://expo.dev/):
19+
20+
```shell
21+
npx create-expo-app@latest --template react-navigation/template
22+
```
23+
24+
See the project's `README.md` for more information on how to get started.
25+
1626
### Installation and setup
1727

1828
First, you need to install them in your project:
@@ -43,26 +53,9 @@ Next, install the required peer dependencies. You need to run different commands
4353
cd ..
4454
```
4555

46-
:::note
47-
You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
48-
:::
49-
50-
Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
51-
52-
```tsx
53-
import * as React from 'react';
54-
import {NavigationContainer} from '@react-navigation/native';
55-
56-
const App = () => {
57-
return (
58-
<NavigationContainer>
59-
{/* Rest of your app code */}
60-
</NavigationContainer>
61-
);
62-
};
56+
Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation.
6357

64-
export default App;
65-
```
58+
When using React Navigation, you configure [navigators](https://reactnavigation.org/docs/glossary-of-terms#navigator) in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc.
6659

6760
Now you are ready to build and run your app on the device/simulator.
6861

@@ -72,35 +65,40 @@ Now you can create an app with a home screen and a profile screen:
7265

7366
```tsx
7467
import * as React from 'react';
75-
import {NavigationContainer} from '@react-navigation/native';
68+
import {createStaticNavigation} from '@react-navigation/native';
7669
import {createNativeStackNavigator} from '@react-navigation/native-stack';
7770

78-
const Stack = createNativeStackNavigator();
79-
80-
const MyStack = () => {
81-
return (
82-
<NavigationContainer>
83-
<Stack.Navigator>
84-
<Stack.Screen
85-
name="Home"
86-
component={HomeScreen}
87-
options={{title: 'Welcome'}}
88-
/>
89-
<Stack.Screen name="Profile" component={ProfileScreen} />
90-
</Stack.Navigator>
91-
</NavigationContainer>
92-
);
93-
};
71+
const RootStack = createNativeStackNavigator({
72+
screens: {
73+
Home: {
74+
screen: HomeScreen,
75+
options: {title: 'Welcome'},
76+
},
77+
Profile: {
78+
screen: ProfileScreen,
79+
},
80+
},
81+
});
82+
83+
const Navigation = createStaticNavigation(RootStack);
84+
85+
export default function App() {
86+
return <Navigation />;
87+
}
9488
```
9589

96-
In this example, there are 2 screens (`Home` and `Profile`) defined using the `Stack.Screen` component. Similarly, you can define as many screens as you like.
90+
In this example, `RootStack` is a navigator with 2 screens (`Home` and `Profile`), defined in the `screens` property in `createNativeStackNavigator`. Similarly, you can define as many screens as you like.
9791

98-
You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`.
92+
You can specify options such as the screen title for each screen in the `options` property of each screen. Each screen definition also needs a `screen` property that is a React component or another navigator.
9993

100-
Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
94+
Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
10195

10296
```tsx
103-
const HomeScreen = ({navigation}) => {
97+
import {useNavigation} from '@react-navigation/native';
98+
99+
function HomeScreen() {
100+
const navigation = useNavigation();
101+
104102
return (
105103
<Button
106104
title="Go to Jane's profile"
@@ -109,13 +107,14 @@ const HomeScreen = ({navigation}) => {
109107
}
110108
/>
111109
);
112-
};
113-
const ProfileScreen = ({navigation, route}) => {
110+
}
111+
112+
function ProfileScreen({route}) {
114113
return <Text>This is {route.params.name}'s profile</Text>;
115-
};
114+
}
116115
```
117116

118-
This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the same performance characteristics as apps built natively on top of those APIs.
117+
This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the similar performance characteristics as apps built natively on top of those APIs.
119118

120119
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.
121120

‎website/versioned_docs/version-0.73/navigation.md

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -43,26 +43,9 @@ Next, install the required peer dependencies. You need to run different commands
4343
cd ..
4444
```
4545

46-
:::note
47-
You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
48-
:::
46+
Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation.
4947

50-
Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
51-
52-
```tsx
53-
import * as React from 'react';
54-
import {NavigationContainer} from '@react-navigation/native';
55-
56-
const App = () => {
57-
return (
58-
<NavigationContainer>
59-
{/* Rest of your app code */}
60-
</NavigationContainer>
61-
);
62-
};
63-
64-
export default App;
65-
```
48+
When using React Navigation, you configure [navigators](https://reactnavigation.org/docs/glossary-of-terms#navigator) in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc.
6649

6750
Now you are ready to build and run your app on the device/simulator.
6851

@@ -72,35 +55,40 @@ Now you can create an app with a home screen and a profile screen:
7255

7356
```tsx
7457
import * as React from 'react';
75-
import {NavigationContainer} from '@react-navigation/native';
58+
import {createStaticNavigation} from '@react-navigation/native';
7659
import {createNativeStackNavigator} from '@react-navigation/native-stack';
7760

78-
const Stack = createNativeStackNavigator();
79-
80-
const MyStack = () => {
81-
return (
82-
<NavigationContainer>
83-
<Stack.Navigator>
84-
<Stack.Screen
85-
name="Home"
86-
component={HomeScreen}
87-
options={{title: 'Welcome'}}
88-
/>
89-
<Stack.Screen name="Profile" component={ProfileScreen} />
90-
</Stack.Navigator>
91-
</NavigationContainer>
92-
);
93-
};
61+
const RootStack = createNativeStackNavigator({
62+
screens: {
63+
Home: {
64+
screen: HomeScreen,
65+
options: {title: 'Welcome'},
66+
},
67+
Profile: {
68+
screen: ProfileScreen,
69+
},
70+
},
71+
});
72+
73+
const Navigation = createStaticNavigation(RootStack);
74+
75+
export default function App() {
76+
return <Navigation />;
77+
}
9478
```
9579

96-
In this example, there are 2 screens (`Home` and `Profile`) defined using the `Stack.Screen` component. Similarly, you can define as many screens as you like.
80+
In this example, `RootStack` is a navigator with 2 screens (`Home` and `Profile`), defined in the `screens` property in `createNativeStackNavigator`. Similarly, you can define as many screens as you like.
9781

98-
You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`.
82+
You can specify options such as the screen title for each screen in the `options` property of each screen. Each screen definition also needs a `screen` property that is a React component or another navigator.
9983

100-
Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
84+
Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
10185

10286
```tsx
103-
const HomeScreen = ({navigation}) => {
87+
import {useNavigation} from '@react-navigation/native';
88+
89+
function HomeScreen() {
90+
const navigation = useNavigation();
91+
10492
return (
10593
<Button
10694
title="Go to Jane's profile"
@@ -109,13 +97,14 @@ const HomeScreen = ({navigation}) => {
10997
}
11098
/>
11199
);
112-
};
113-
const ProfileScreen = ({navigation, route}) => {
100+
}
101+
102+
function ProfileScreen({route}) {
114103
return <Text>This is {route.params.name}'s profile</Text>;
115-
};
104+
}
116105
```
117106

118-
This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the same performance characteristics as apps built natively on top of those APIs.
107+
This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the similar performance characteristics as apps built natively on top of those APIs.
119108

120109
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.
121110

‎website/versioned_docs/version-0.74/navigation.md

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -43,26 +43,9 @@ Next, install the required peer dependencies. You need to run different commands
4343
cd ..
4444
```
4545

46-
:::note
47-
You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
48-
:::
46+
Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation.
4947

50-
Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
51-
52-
```tsx
53-
import * as React from 'react';
54-
import {NavigationContainer} from '@react-navigation/native';
55-
56-
const App = () => {
57-
return (
58-
<NavigationContainer>
59-
{/* Rest of your app code */}
60-
</NavigationContainer>
61-
);
62-
};
63-
64-
export default App;
65-
```
48+
When using React Navigation, you configure [navigators](https://reactnavigation.org/docs/glossary-of-terms#navigator) in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc.
6649

6750
Now you are ready to build and run your app on the device/simulator.
6851

@@ -72,35 +55,40 @@ Now you can create an app with a home screen and a profile screen:
7255

7356
```tsx
7457
import * as React from 'react';
75-
import {NavigationContainer} from '@react-navigation/native';
58+
import {createStaticNavigation} from '@react-navigation/native';
7659
import {createNativeStackNavigator} from '@react-navigation/native-stack';
7760

78-
const Stack = createNativeStackNavigator();
79-
80-
const MyStack = () => {
81-
return (
82-
<NavigationContainer>
83-
<Stack.Navigator>
84-
<Stack.Screen
85-
name="Home"
86-
component={HomeScreen}
87-
options={{title: 'Welcome'}}
88-
/>
89-
<Stack.Screen name="Profile" component={ProfileScreen} />
90-
</Stack.Navigator>
91-
</NavigationContainer>
92-
);
93-
};
61+
const RootStack = createNativeStackNavigator({
62+
screens: {
63+
Home: {
64+
screen: HomeScreen,
65+
options: {title: 'Welcome'},
66+
},
67+
Profile: {
68+
screen: ProfileScreen,
69+
},
70+
},
71+
});
72+
73+
const Navigation = createStaticNavigation(RootStack);
74+
75+
export default function App() {
76+
return <Navigation />;
77+
}
9478
```
9579

96-
In this example, there are 2 screens (`Home` and `Profile`) defined using the `Stack.Screen` component. Similarly, you can define as many screens as you like.
80+
In this example, `RootStack` is a navigator with 2 screens (`Home` and `Profile`), defined in the `screens` property in `createNativeStackNavigator`. Similarly, you can define as many screens as you like.
9781

98-
You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`.
82+
You can specify options such as the screen title for each screen in the `options` property of each screen. Each screen definition also needs a `screen` property that is a React component or another navigator.
9983

100-
Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
84+
Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
10185

10286
```tsx
103-
const HomeScreen = ({navigation}) => {
87+
import {useNavigation} from '@react-navigation/native';
88+
89+
function HomeScreen() {
90+
const navigation = useNavigation();
91+
10492
return (
10593
<Button
10694
title="Go to Jane's profile"
@@ -109,13 +97,14 @@ const HomeScreen = ({navigation}) => {
10997
}
11098
/>
11199
);
112-
};
113-
const ProfileScreen = ({navigation, route}) => {
100+
}
101+
102+
function ProfileScreen({route}) {
114103
return <Text>This is {route.params.name}'s profile</Text>;
115-
};
104+
}
116105
```
117106

118-
This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the same performance characteristics as apps built natively on top of those APIs.
107+
This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the similar performance characteristics as apps built natively on top of those APIs.
119108

120109
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.
121110

0 commit comments

Comments
 (0)