Skip to content

Commit 05eeb16

Browse files
satya164satya164
committed
Add docs for native stack
1 parent 22e7f8a commit 05eeb16

File tree

3 files changed

+210
-0
lines changed

3 files changed

+210
-0
lines changed

‎docs/native-stack-navigator.md‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
id: native-stack-navigator
3+
title: createNativeStackNavigator
4+
sidebar_label: createNativeStackNavigator
5+
---
6+
7+
Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
8+
9+
By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android. On iOS the stack navigator can also be configured to a modal style where screens slide in from the bottom.
10+
11+
This uses native primitives for navigation using [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood, as opposed to the JS based stack navigator. While this provides native feeling and performance, it's not as customizable.
12+
13+
Expo is currently not supported as it includes an older version of `react-native-screens`.
14+
15+
To use this navigator, you need to install [`@react-navigation/native-stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack):
16+
17+
```sh
18+
yarn add @react-navigation/core@next @react-navigation/native-stack@next
19+
```
20+
21+
Now we need to install [`react-native-screens`](https://github.com/kmagiera/react-native-screens).
22+
23+
```sh
24+
yarn add react-native-screens
25+
```
26+
27+
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
28+
29+
```sh
30+
cd ios
31+
pod install
32+
cd ..
33+
```
34+
35+
To finalize installation of `react-native-screens` for Android, add the following two lines to dependencies section in `android/app/build.gradle`:
36+
37+
```gradle
38+
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
39+
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
40+
```
41+
42+
Make sure to enable `react-native-screens`. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. `App.js`):
43+
44+
```js
45+
import { useScreens } from 'react-native-screens';
46+
47+
useScreens();
48+
```
49+
50+
Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
51+
52+
## API Definition
53+
54+
To use this navigator, import it from `@react-navigation/native-stack`:
55+
56+
```js
57+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
58+
59+
const Stack = createNativeStackNavigator();
60+
61+
function App() {
62+
return (
63+
<Stack.Navigator>
64+
<Stack.Screen name="Home" component={Home} />
65+
<Stack.Screen name="Notifications" component={Notifications} />
66+
<Stack.Screen name="Profile" component={Profile} />
67+
<Stack.Screen name="Settings" component={Settings} />
68+
</Stack.Navigator>
69+
);
70+
}
71+
```
72+
73+
### Props
74+
75+
The `Stack.Navigator` component accepts following props:
76+
77+
#### `initialRouteName`
78+
79+
The name of the route to render on first load of the navigator.
80+
81+
#### `screenOptions`
82+
83+
Default options to use for the screens in the navigator.
84+
85+
### Options for `Stack.Screen`
86+
87+
The `options` prop can be used to configure individual screens inside the navigator. Supported options are:
88+
89+
#### `title`
90+
91+
String that can be used as a fallback for `headerTitle`.
92+
93+
#### `headerShown`
94+
95+
Whether to show or hide the header for the screen. The header is shown by default. Setting this to `false` hides the header.
96+
97+
#### `headerTitle`
98+
99+
String to be used by the header as title string. Defaults to scene `title`.
100+
101+
#### `headerBackTitle`
102+
103+
Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
104+
105+
#### `headerRight`
106+
107+
Function which returns a React Element to display on the right side of the header.
108+
109+
#### `headerTranslucent`
110+
111+
Boolean indicating whether the navigation bar is translucent. Only supported on iOS.
112+
113+
#### `headerLargeTitle`
114+
115+
Boolean to set native property to prefer large title header (like in iOS setting). Only supported on iOS.
116+
117+
#### `headerTintColor`
118+
119+
Tint color for the header. Changes the color of back button and title.
120+
121+
#### `headerStyle`
122+
123+
Style object for the header. Supported properties:
124+
125+
- `backgroundColor`
126+
127+
#### `headerTitleStyle`
128+
129+
Style object for header title. Supported properties:
130+
131+
- `fontFamily`
132+
- `fontSize`
133+
- `color`
134+
135+
#### `headerBackTitleStyle`
136+
137+
Style object for header back title. Supported properties:
138+
139+
- `fontFamily`
140+
- `fontSize`
141+
142+
#### `contentStyle`
143+
144+
Style object for the scene content.
145+
146+
#### `gestureEnabled`
147+
148+
Whether you can use gestures to dismiss this screen. Defaults to `true` on iOS, Only supported on iOS.
149+
150+
#### `presentation`
151+
152+
How should the screen be presented. Available options:
153+
154+
- `modal`
155+
- `transparentModal`
156+
- `push`
157+
158+
Defaults to `push`. Only supported on iOS.
159+
160+
### Events
161+
162+
The navigator doesn't emit any events.
163+
164+
## Example
165+
166+
```js
167+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
168+
169+
const Stack = createNativeStackNavigator();
170+
171+
function App() {
172+
return (
173+
<Stack.Navigator
174+
initialRouteName="Home"
175+
headerMode="screen"
176+
screenOptions={{
177+
headerTintColor: 'white',
178+
headerStyle: { backgroundColor: 'tomato' },
179+
}}
180+
>
181+
<Stack.Screen
182+
name="Home"
183+
component={Home}
184+
options={{
185+
title: 'Awesome app',
186+
}}
187+
/>
188+
<Stack.Screen
189+
name="Profile"
190+
component={Profile}
191+
options={{
192+
title: 'My profile',
193+
}}
194+
/>
195+
<Stack.Screen
196+
name="Settings"
197+
component={Settings}
198+
options={{
199+
gestureEnabled: false,
200+
}}
201+
/>
202+
</Stack.Navigator>
203+
);
204+
}
205+
```

‎website/i18n/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,10 @@
149149
"title": "Integrating with MobX State Tree",
150150
"sidebar_label": "MobX State Tree integration"
151151
},
152+
"native-stack-navigator": {
153+
"title": "createNativeStackNavigator",
154+
"sidebar_label": "createNativeStackNavigator"
155+
},
152156
"navigating-without-navigation-prop": {
153157
"title": "Navigating without the navigation prop",
154158
"sidebar_label": "Navigating without the navigation prop"

‎website/sidebars.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"drawer-actions",
6363
"tab-actions",
6464
"stack-navigator",
65+
"native-stack-navigator",
6566
"drawer-navigator",
6667
"bottom-tab-navigator",
6768
"material-bottom-tab-navigator",

0 commit comments

Comments
 (0)