diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md
index da0aecb24c8..ee0906636a4 100755
--- a/versioned_docs/version-7.x/getting-started.md
+++ b/versioned_docs/version-7.x/getting-started.md
@@ -78,29 +78,37 @@ work on Android devices. Edit `MainActivity.kt` or `MainActivity.java` file whic
Add the highlighted code to the body of `MainActivity` class:
-
- ```kotlin {3-5}
- class MainActivity: ReactActivity() {
- // ...
- override fun onCreate(savedInstanceState: Bundle?) {
- super.onCreate(null)
- }
- // ...
- }
- ```
+
+
+```kotlin
+class MainActivity: ReactActivity() {
+ // ...
+ // highlight-start
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(null)
+ }
+ // highlight-end
+ // ...
+}
+```
+
- ```java {3-6}
- public class MainActivity extends ReactActivity {
- // ...
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(null);
- }
- // ...
- }
- ```
-
+
+```java
+public class MainActivity extends ReactActivity {
+ // ...
+ // highlight-start
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(null);
+ }
+ // highlight-end
+ // ...
+}
+```
+
+
and make sure to add the following import statement at the top of this file below your package statement:
@@ -139,6 +147,7 @@ To get started with dynamic configuration, first, we need to wrap your app in `N
```js
import * as React from 'react';
+// highlight-next-line
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md
index 90476e835c2..726d1517eb7 100755
--- a/versioned_docs/version-7.x/hello-react-navigation.md
+++ b/versioned_docs/version-7.x/hello-react-navigation.md
@@ -36,7 +36,7 @@ npm install @react-navigation/native-stack@next
`createStaticNavigation` is a function that takes the navigator defined earlier and returns a component that can be rendered in the app. It's only called once in the app.
-```js
+```js name="Native Stack Example" snack version=7
// In App.js in a new project
import * as React from 'react';
@@ -60,11 +60,9 @@ const RootStack = createNativeStackNavigator({
const Navigation = createStaticNavigation(RootStack);
-function App() {
+export default function App() {
return ;
}
-
-export default App;
```
@@ -74,9 +72,7 @@ export default App;
`NavigationContainer` is a component that manages our navigation tree and contains the [navigation state](navigation-state.md). This component must wrap all the navigators in the app. Usually, we'd render this component at the root of our app, which is usually the component exported from `App.js`.
-
-
-```js
+```js name="Native Stack Example" snack version=7
// In App.js in a new project
import * as React from 'react';
@@ -94,17 +90,21 @@ function HomeScreen() {
const Stack = createNativeStackNavigator();
-function App() {
+function RootStack() {
+ return (
+
+
+
+ );
+}
+
+export default function App() {
return (
-
-
-
+
);
}
-
-export default App;
```
@@ -129,7 +129,20 @@ Let's add a second screen to our native stack navigator and configure the `Home`
-```js
+```js name="Native Stack Example" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
function DetailsScreen() {
return (
@@ -138,27 +151,43 @@ function DetailsScreen() {
);
}
+// codeblock-focus-start
const RootStack = createNativeStackNavigator({
+ // highlight-next-line
initialRouteName: 'Home',
screens: {
Home: HomeScreen,
Details: DetailsScreen,
},
});
+// codeblock-focus-end
const Navigation = createStaticNavigation(RootStack);
-function App() {
+export default function App() {
return ;
}
```
+Now our stack has two _routes_, a `Home` route and a `Details` route. A route can be specified by under the `screens` property. The name of the property under `screens` corresponds to the name of the route we will use to navigate, and the value corresponds to the component it'll render.
+
-
+```js name="Native Stack Example" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
-```js
function DetailsScreen() {
return (
@@ -169,31 +198,40 @@ function DetailsScreen() {
const Stack = createNativeStackNavigator();
-function App() {
+// codeblock-focus-start
+function RootStack() {
+ return (
+ // highlight-next-line
+
+
+
+
+ );
+}
+// codeblock-focus-end
+
+export default function App() {
return (
-
-
-
-
+
);
}
```
-
-
-
Now our stack has two _routes_, a `Home` route and a `Details` route. A route can be specified by using the `Screen` component. The `Screen` component accepts a `name` prop which corresponds to the name of the route we will use to navigate, and a `component` prop which corresponds to the component it'll render.
-Here, the `Home` route corresponds to the `HomeScreen` component, and the `Details` route corresponds to the `DetailsScreen` component. The initial route for the stack is the `Home` route. Try changing it to `Details` and reload the app (React Native's Fast Refresh won't update changes from `initialRouteName`, as you might expect), notice that you will now see the `Details` screen. Then change it back to `Home` and reload once more.
-
:::warning
When using the dynamic API, the `component` prop accepts a component, not a render function. Don't pass an inline function (e.g. `component={() => }`), or your component will unmount and remount losing all state when the parent component re-renders. See [Passing additional props](#passing-additional-props) for alternatives.
:::
+
+
+
+Here, the `Home` route corresponds to the `HomeScreen` component, and the `Details` route corresponds to the `DetailsScreen` component. The initial route for the stack is the `Home` route. Try changing it to `Details` and reload the app (React Native's Fast Refresh won't update changes from `initialRouteName`, as you might expect), notice that you will now see the `Details` screen. Then change it back to `Home` and reload once more.
+
### Specifying options
Each screen in the navigator can specify some options for the navigator, such as the title to render in the header.
@@ -201,13 +239,14 @@ Each screen in the navigator can specify some options for the navigator, such as
-To specify the options, we'll change how we have specified the screen component:
+To specify the options, we'll change how we have specified the screen component. Instead of specifying the screen component as the value, we can also specify an object with a `screen` property:
```js
const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: {
+ // highlight-next-line
screen: HomeScreen,
},
Details: DetailsScreen,
@@ -215,31 +254,88 @@ const RootStack = createNativeStackNavigator({
});
```
+This will let us specify additional options for the screen.
+
Now, we can add an `options` property:
-```js
+```js name="Options for Screen" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function DetailsScreen() {
+ return (
+
+ Details Screen
+
+ );
+}
+
+// codeblock-focus-start
const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: {
screen: HomeScreen,
+ // highlight-start
options: {
title: 'Overview',
},
+ // highlight-end
},
Details: DetailsScreen,
},
});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return ;
+}
```
Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can add a `screenOptions` property to the configuration:
-```js
+```js name="Common options for Screens" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function DetailsScreen() {
+ return (
+
+ Details Screen
+
+ );
+}
+
+// codeblock-focus-start
const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
+ // highlight-start
screenOptions: {
headerStyle: { backgroundColor: 'tomato' },
},
+ // highlight-end
screens: {
Home: {
screen: HomeScreen,
@@ -250,6 +346,13 @@ const RootStack = createNativeStackNavigator({
Details: DetailsScreen,
},
});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+ return ;
+}
```
@@ -257,32 +360,110 @@ const RootStack = createNativeStackNavigator({
Any customization options can be passed in the `options` prop for each screen component:
-
+```js name="Options for Screen" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
-```js
-
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function DetailsScreen() {
+ return (
+
+ Details Screen
+
+ );
+}
+
+const Stack = createNativeStackNavigator();
+
+function RootStack() {
+ return (
+ // codeblock-focus-start
+
+
+
+
+ // codeblock-focus-end
+ );
+}
+
+export default function App() {
+ return (
+
+
+
+ );
+}
```
Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can pass a `screenOptions` prop to the navigator:
-```js
-
-
-
-
+```js name="Common options for Screens" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function DetailsScreen() {
+ return (
+
+ Details Screen
+
+ );
+}
+
+const Stack = createNativeStackNavigator();
+
+function RootStack() {
+ return (
+ // codeblock-focus-start
+
+
+
+
+ // codeblock-focus-end
+ );
+}
+
+export default function App() {
+ return (
+
+
+
+ );
+}
```
@@ -305,6 +486,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit
```js
+ // highlight-next-line
{(props) => }
```