From 7d4f9e008380c5761167bd2302b44e2416c98ec5 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:28:02 +0200 Subject: [PATCH 01/34] docs: use native-stack in hello-react-navigation --- .../6.x/hello-react-navigation-full.js | 4 +-- .../hello-react-navigation-with-options.js | 4 +-- static/examples/6.x/hello-react-navigation.js | 4 +-- .../version-6.x/hello-react-navigation.md | 26 +++++++++---------- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/static/examples/6.x/hello-react-navigation-full.js b/static/examples/6.x/hello-react-navigation-full.js index 9b9fe236e9c..958b16b25de 100755 --- a/static/examples/6.x/hello-react-navigation-full.js +++ b/static/examples/6.x/hello-react-navigation-full.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -19,7 +19,7 @@ function DetailsScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/hello-react-navigation-with-options.js b/static/examples/6.x/hello-react-navigation-with-options.js index 1fd917da715..8efe463bf45 100755 --- a/static/examples/6.x/hello-react-navigation-with-options.js +++ b/static/examples/6.x/hello-react-navigation-with-options.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -11,7 +11,7 @@ function HomeScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/hello-react-navigation.js b/static/examples/6.x/hello-react-navigation.js index 53d187d595b..53e88b29e67 100755 --- a/static/examples/6.x/hello-react-navigation.js +++ b/static/examples/6.x/hello-react-navigation.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -11,7 +11,7 @@ function HomeScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index e441d86564a..dabe4611424 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -6,23 +6,23 @@ sidebar_label: Hello React Navigation In a web browser, you can link to different pages using an anchor (``) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story. -React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack. +React Navigation's native stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation's native stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack. -Lets start by demonstrating the most common navigator, `createStackNavigator`. +Let's start by demonstrating the most common navigator, `createNativeStackNavigator`. -## Installing the stack navigator library +## Installing the native stack navigator library -The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library. To use the stack navigator, we need to install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/stack) : +The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library. To use the native stack navigator, we need to install [`@react-navigation/native-stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack) : ```bash npm2yarn -npm install @react-navigation/stack@next @react-native-masked-view/masked-view +npm install @react-navigation/native-stack@next react-native-screens ``` -> 💡 `@react-navigation/stack` depends on `@react-native-masked-view/masked-view` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions. +> 💡 `@react-navigation/native-stack` depends on `react-native-screens` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions. -### Creating a stack navigator +### Creating a native stack navigator -`createStackNavigator` is a function that returns an object containing 2 properties: `Screen` and `Navigator`. Both of them are React components used for configuring the navigator. The `Navigator` should contain `Screen` elements as its children to define the configuration for routes. +`createNativeStackNavigator` is a function that returns an object containing 2 properties: `Screen` and `Navigator`. Both of them are React components used for configuring the navigator. The `Navigator` should contain `Screen` elements as its children to define the configuration for routes. `NavigationContainer` is a component which manages our navigation tree and contains the [navigation state](navigation-state.md). This component must wrap all navigators structure. Usually, we'd render this component at the root of our app, which is usually the component exported from `App.js`. @@ -34,7 +34,7 @@ npm install @react-navigation/stack@next @react-native-masked-view/masked-view import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -44,7 +44,7 @@ function HomeScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( @@ -65,13 +65,13 @@ If you run this code, you will see a screen with an empty navigation bar and a g > The casing of the route name doesn't matter -- you can use lowercase `home` or capitalized `Home`, it's up to you. We prefer capitalizing our route names. -> The only required configuration for a screen is the `name` and `component` props. You can read more about the other options available in the [stack navigator reference](stack-navigator.md). +> The only required configuration for a screen is the `name` and `component` props. You can read more about the other options available in the [native stack navigator reference](native-stack-navigator.md). ### Configuring the navigator All of the route configuration is specified as props to our navigator. We haven't passed any props to our navigator, so it just uses the default configuration. -Let's add a second screen to our stack navigator and configure the `Home` screen to render first: +Let's add a second screen to our native stack navigator and configure the `Home` screen to render first: @@ -84,7 +84,7 @@ function DetailsScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( From cfe11b145a7b8917a4b4a3ea95c427c7f66e1420 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:29:27 +0200 Subject: [PATCH 02/34] docs: use native-stack in navigating --- static/examples/6.x/go-back.js | 4 ++-- static/examples/6.x/multiple-navigate.js | 4 ++-- static/examples/6.x/multiple-push.js | 4 ++-- static/examples/6.x/new-screen.js | 4 ++-- static/examples/6.x/pop-to-top.js | 4 ++-- versioned_docs/version-6.x/navigating.md | 10 +++++----- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/static/examples/6.x/go-back.js b/static/examples/6.x/go-back.js index b85b97b57d7..e2417a2cf9d 100755 --- a/static/examples/6.x/go-back.js +++ b/static/examples/6.x/go-back.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -29,7 +29,7 @@ function DetailsScreen({ navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/multiple-navigate.js b/static/examples/6.x/multiple-navigate.js index f2be74cd2bb..8e4ecc94b25 100755 --- a/static/examples/6.x/multiple-navigate.js +++ b/static/examples/6.x/multiple-navigate.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -27,7 +27,7 @@ function DetailsScreen({ navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/multiple-push.js b/static/examples/6.x/multiple-push.js index 5f13a8460d8..32c8f1126a9 100755 --- a/static/examples/6.x/multiple-push.js +++ b/static/examples/6.x/multiple-push.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -27,7 +27,7 @@ function DetailsScreen({ navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/new-screen.js b/static/examples/6.x/new-screen.js index a373ccf2106..7d7e4991edb 100755 --- a/static/examples/6.x/new-screen.js +++ b/static/examples/6.x/new-screen.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -23,7 +23,7 @@ function DetailsScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/pop-to-top.js b/static/examples/6.x/pop-to-top.js index cdd72be0a79..0e2c1407d83 100755 --- a/static/examples/6.x/pop-to-top.js +++ b/static/examples/6.x/pop-to-top.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -33,7 +33,7 @@ function DetailsScreen({ navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/versioned_docs/version-6.x/navigating.md b/versioned_docs/version-6.x/navigating.md index 15597689572..2532dd3cf83 100755 --- a/versioned_docs/version-6.x/navigating.md +++ b/versioned_docs/version-6.x/navigating.md @@ -4,7 +4,7 @@ title: Moving between screens sidebar_label: Moving between screens --- -In the previous section, ["Hello React Navigation"](hello-react-navigation.md), we defined a stack navigator with two routes (`Home` and `Details`), but we didn't learn how to let a user navigate from `Home` to `Details` (although we did learn how to change the _initial_ route in our code, but forcing our users to clone our repository and change the route in our code in order to see another screen is arguably among the worst user experiences one could imagine). +In the previous section, ["Hello React Navigation"](hello-react-navigation.md), we defined a native stack navigator with two routes (`Home` and `Details`), but we didn't learn how to let a user navigate from `Home` to `Details` (although we did learn how to change the _initial_ route in our code, but forcing our users to clone our repository and change the route in our code in order to see another screen is arguably among the worst user experiences one could imagine). If this was a web browser, we'd be able to write something like this: @@ -34,7 +34,7 @@ We'll do something similar to the latter, but rather than using a `window.locati import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -53,7 +53,7 @@ function HomeScreen({ navigation }) { Let's break this down: -- `navigation` - the `navigation` prop is passed in to every **screen component** ([definition](glossary-of-terms.md#screen-component)) in stack navigator (more about this later in ["The navigation prop in depth"](navigation-prop.md)). +- `navigation` - the `navigation` prop is passed in to every **screen component** ([definition](glossary-of-terms.md#screen-component)) in the native stack navigator (more about this later in ["The navigation prop in depth"](navigation-prop.md)). - `navigate('Details')` - we call the `navigate` function (on the `navigation` prop — naming is hard!) with the name of the route that we'd like to move the user to. > If we call `navigation.navigate` with a route name that we haven't defined in a navigator, it'll print an error in development builds and nothing will happen in production builds. Said another way, we can only navigate to routes that have been defined on our navigator — we cannot navigate to an arbitrary component. @@ -101,7 +101,7 @@ Each time you call `push` we add a new route to the navigation stack. When you c ## Going back -The header provided by stack navigator will automatically include a back button when it is possible to go back from the active screen (if there is only one screen in the navigation stack, there is nothing that you can go back to, and so there is no back button). +The header provided by the native stack navigator will automatically include a back button when it is possible to go back from the active screen (if there is only one screen in the navigation stack, there is nothing that you can go back to, and so there is no back button). Sometimes you'll want to be able to programmatically trigger this behavior, and for that you can use `navigation.goBack();`. @@ -151,7 +151,7 @@ function DetailsScreen({ navigation }) { ## Summary -- `navigation.navigate('RouteName')` pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen. +- `navigation.navigate('RouteName')` pushes a new route to the native stack navigator if it's not already in the stack, otherwise it jumps to that screen. - We can call `navigation.push('RouteName')` as many times as we like and it will continue pushing routes. - The header bar will automatically show a back button, but you can programmatically go back by calling `navigation.goBack()`. On Android, the hardware back button just works as expected. - You can go back to an existing screen in the stack with `navigation.navigate('RouteName')`, and you can go back to the first screen in the stack with `navigation.popToTop()`. From 219bf925637fd49a0b67d06520e20ae4accd1239 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:30:06 +0200 Subject: [PATCH 03/34] docs: use native-stack in params --- static/examples/6.x/passing-params-back.js | 4 ++-- static/examples/6.x/passing-params.js | 4 ++-- versioned_docs/version-6.x/params.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/static/examples/6.x/passing-params-back.js b/static/examples/6.x/passing-params-back.js index 4787024482c..5a2a6051c5d 100755 --- a/static/examples/6.x/passing-params-back.js +++ b/static/examples/6.x/passing-params-back.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Text, TextInput, View, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation, route }) { React.useEffect(() => { @@ -49,7 +49,7 @@ function CreatePostScreen({ navigation, route }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function App() { return ( diff --git a/static/examples/6.x/passing-params.js b/static/examples/6.x/passing-params.js index 5ea1028a7e9..5a43e8c6d51 100755 --- a/static/examples/6.x/passing-params.js +++ b/static/examples/6.x/passing-params.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Text, View, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -44,7 +44,7 @@ function DetailsScreen({ route, navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function App() { return ( diff --git a/versioned_docs/version-6.x/params.md b/versioned_docs/version-6.x/params.md index 7b20578c11d..26d9a18a0de 100755 --- a/versioned_docs/version-6.x/params.md +++ b/versioned_docs/version-6.x/params.md @@ -6,7 +6,7 @@ sidebar_label: Passing parameters to routes Remember when I said "more on that later when we talk about `params`!"? Well, the time has come. -Now that we know how to [create a stack navigator with some routes](hello-react-navigation.md) and [navigate between those routes](navigating.md), let's look at how we can pass data to routes when we navigate to them. +Now that we know how to [create a native stack navigator with some routes](hello-react-navigation.md) and [navigate between those routes](navigating.md), let's look at how we can pass data to routes when we navigate to them. There are two pieces to this: From 39a374878e8edc5183c4aa3c96980a2bcfc9a20e Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:32:58 +0200 Subject: [PATCH 04/34] docs: use native-stack in headers --- static/examples/6.x/basic-header-config.js | 4 ++-- static/examples/6.x/custom-header-title-component.js | 4 ++-- static/examples/6.x/header-styles.js | 4 ++-- static/examples/6.x/params-in-title.js | 4 ++-- static/examples/6.x/sharing-header-styles.js | 4 ++-- static/examples/6.x/updating-options-with-setoptions.js | 4 ++-- versioned_docs/version-6.x/headers.md | 8 ++++---- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/static/examples/6.x/basic-header-config.js b/static/examples/6.x/basic-header-config.js index 106885dd052..017fbb9d2ab 100755 --- a/static/examples/6.x/basic-header-config.js +++ b/static/examples/6.x/basic-header-config.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function HomeScreen() { return ( diff --git a/static/examples/6.x/custom-header-title-component.js b/static/examples/6.x/custom-header-title-component.js index c3b7a5eb651..a9db0ca02c8 100755 --- a/static/examples/6.x/custom-header-title-component.js +++ b/static/examples/6.x/custom-header-title-component.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text, Image } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -20,7 +20,7 @@ function LogoTitle() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/header-styles.js b/static/examples/6.x/header-styles.js index bab0b080f10..cf113149f22 100755 --- a/static/examples/6.x/header-styles.js +++ b/static/examples/6.x/header-styles.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -11,7 +11,7 @@ function HomeScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/params-in-title.js b/static/examples/6.x/params-in-title.js index 5c74352c41e..80cc0740c6b 100755 --- a/static/examples/6.x/params-in-title.js +++ b/static/examples/6.x/params-in-title.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -26,7 +26,7 @@ function ProfileScreen({ navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/sharing-header-styles.js b/static/examples/6.x/sharing-header-styles.js index d35cb5f4240..694b32b6240 100755 --- a/static/examples/6.x/sharing-header-styles.js +++ b/static/examples/6.x/sharing-header-styles.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( @@ -11,7 +11,7 @@ function HomeScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/updating-options-with-setoptions.js b/static/examples/6.x/updating-options-with-setoptions.js index e9e6a1a8467..6161a65f7e9 100755 --- a/static/examples/6.x/updating-options-with-setoptions.js +++ b/static/examples/6.x/updating-options-with-setoptions.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { View, Text, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( @@ -15,7 +15,7 @@ function HomeScreen({ navigation }) { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/versioned_docs/version-6.x/headers.md b/versioned_docs/version-6.x/headers.md index 6e30701017e..543fad498fa 100755 --- a/versioned_docs/version-6.x/headers.md +++ b/versioned_docs/version-6.x/headers.md @@ -114,7 +114,7 @@ There are a couple of things to notice here: ## Sharing common `options` across screens -It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the `DetailsScreen` the colors go back to the defaults. Wouldn't it be awful if we had to copy the `options` header style properties from `HomeScreen` to `DetailsScreen`, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the prop `screenOptions`. +It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the `DetailsScreen` the colors go back to the defaults. Wouldn't it be awful if we had to copy the `options` header style properties from `HomeScreen` to `DetailsScreen`, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the native stack navigator under the prop `screenOptions`. sharing header styles @@ -173,14 +173,14 @@ function StackScreen() { } ``` -> You might be wondering, why `headerTitle` when we provide a component and not `title`, like before? The reason is that `headerTitle` is a property that is specific to a stack navigator, the `headerTitle` defaults to a `Text` component that displays the `title`. +> You might be wondering, why `headerTitle` when we provide a component and not `title`, like before? The reason is that `headerTitle` is a property that is specific to a native stack navigator, the `headerTitle` defaults to a `Text` component that displays the `title`. ## Additional configuration -You can read the full list of available `options` for screens inside of a stack navigator in the [`createStackNavigator` reference](stack-navigator.md#navigationoptions-used-by-stacknavigator). +You can read the full list of available `options` for screens inside of a native stack navigator in the [`createNativeStackNavigator` reference](native-stack-navigator#options). ## Summary -- You can customize the header inside of the `options` prop of your screen components. Read the full list of options [in the API reference](stack-navigator.md#navigationoptions-used-by-stacknavigator). +- You can customize the header inside of the `options` prop of your screen components. Read the full list of options [in the API reference](native-stack-navigator#options). - The `options` prop can be an object or a function. When it is a function, it is provided with an object with the `navigation` and `route` prop. - You can also specify shared `screenOptions` in the stack navigator configuration when you initialize it. The prop takes precedence over that configuration. From 8ea6404b5083e044490449fe4e8fcf950dc30b30 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:33:31 +0200 Subject: [PATCH 05/34] docs: use native-stack in header-buttons --- static/examples/6.x/header-interaction.js | 4 ++-- static/examples/6.x/simple-header-button.js | 4 ++-- versioned_docs/version-6.x/header-buttons.md | 14 ++++++-------- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/static/examples/6.x/header-interaction.js b/static/examples/6.x/header-interaction.js index 64d89051fbf..ed0f651cea3 100755 --- a/static/examples/6.x/header-interaction.js +++ b/static/examples/6.x/header-interaction.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, Text, Image } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function LogoTitle() { return ( @@ -26,7 +26,7 @@ function HomeScreen({ navigation }) { return Count: {count}; } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( diff --git a/static/examples/6.x/simple-header-button.js b/static/examples/6.x/simple-header-button.js index 8ea58b3f33c..d680aead80c 100755 --- a/static/examples/6.x/simple-header-button.js +++ b/static/examples/6.x/simple-header-button.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { View, Text, Button, Image } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function HomeScreen() { return ( diff --git a/versioned_docs/version-6.x/header-buttons.md b/versioned_docs/version-6.x/header-buttons.md index f8672387f95..5ceaccf605d 100755 --- a/versioned_docs/version-6.x/header-buttons.md +++ b/versioned_docs/version-6.x/header-buttons.md @@ -75,22 +75,20 @@ function HomeScreen({ navigation }) { ## Customizing the back button -`createStackNavigator` provides the platform-specific defaults for the back button. On iOS this includes a label next to the button, which shows the title of the previous screen when the title fits in the available space, otherwise it says "Back". +`createNativeStackNavigator` provides the platform-specific defaults for the back button. On iOS this includes a label next to the button, which shows the title of the previous screen when the title fits in the available space, otherwise it says "Back". -You can change the label behavior with `headerBackTitle` and `headerTruncatedBackTitle` ([read more](stack-navigator.md#headerbacktitle)). +You can change the label behavior with `headerBackTitle` and style it with `headerBackTitleStyle` ([read more](native-stack-navigator.md#headerbacktitle)). -To customize the back button image, you can use [headerBackImage](stack-navigator.md#headerbackimage). +To customize the back button image, you can use `headerBackImageSource` ([read more](native-stack-navigator.md#headerbackimagesource)). ## Overriding the back button -The back button will be rendered automatically in a stack navigator whenever it is possible for the user to go back from their current screen — in other words, the back button will be rendered whenever there is more than one screen in the stack. +The back button will be rendered automatically in a native stack navigator whenever it is possible for the user to go back from their current screen — in other words, the back button will be rendered whenever there is more than one screen in the stack. -Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can set the `headerLeft` option to a React Element that will be rendered, just as we did with `headerRight`. Alternatively, the `headerLeft` option also accepts a React Component, which can be used, for example, for overriding the onPress behavior of the back button. Read more about this in the [api reference](stack-navigator.md#headerleft). - -If you would like to retain the view of back button and only override the `onPress` method, you can import [HeaderBackButton](https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/views/Header/HeaderBackButton.tsx) from `@react-navigation/stack` and assign that component to the `headerLeft` option. +Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can set the `headerLeft` option to a React Element that will be rendered, just as we did with `headerRight`. Alternatively, the `headerLeft` option also accepts a React Component, which can be used, for example, for overriding the onPress behavior of the back button. Read more about this in the [api reference](native-stack-navigator.md#headerleft). ## Summary - You can set buttons in the header through the `headerLeft` and `headerRight` properties in `options`. -- The back button is fully customizable with `headerLeft`, but if you just want to change the title or image, there are other `options` for that — `headerBackTitle`, `headerTruncatedBackTitle`, and `headerBackImage`. +- The back button is fully customizable with `headerLeft`, but if you just want to change the title or image, there are other `options` for that — `headerBackTitle`, `headerBackTitleStyle`, and `headerBackImageSource`. - You can use a callback for the options prop to access `navigation` and `route` objects. From 088736b8838831c11b58bfe17d649d7cdf876ad1 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:33:53 +0200 Subject: [PATCH 06/34] docs: use native-stack in nesting-navigators --- static/examples/6.x/nest-navigators.js | 4 +-- .../version-6.x/nesting-navigators.md | 32 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/static/examples/6.x/nest-navigators.js b/static/examples/6.x/nest-navigators.js index 0bd71492a26..e3a712646a9 100755 --- a/static/examples/6.x/nest-navigators.js +++ b/static/examples/6.x/nest-navigators.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; function SettingsScreen({ route, navigation }) { @@ -44,7 +44,7 @@ function HomeScreen({ navigation }) { } const Drawer = createDrawerNavigator(); -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); function Root() { return ( diff --git a/versioned_docs/version-6.x/nesting-navigators.md b/versioned_docs/version-6.x/nesting-navigators.md index c52a003ab2b..fd302b9477f 100755 --- a/versioned_docs/version-6.x/nesting-navigators.md +++ b/versioned_docs/version-6.x/nesting-navigators.md @@ -33,7 +33,7 @@ function App() { } ``` -In the above example, the `Home` component contains a tab navigator. The `Home` component is also used for the `Home` screen in your stack navigator inside the `App` component. So here, a tab navigator is nested inside a stack navigator: +In the above example, the `Home` component contains a tab navigator. The `Home` component is also used for the `Home` screen in your native stack navigator inside the `App` component. So here, a tab navigator is nested inside a native stack navigator: - `Stack.Navigator` - `Home` (`Tab.Navigator`) @@ -50,13 +50,13 @@ When nesting navigators, there are some things to keep in mind: ### Each navigator keeps its own navigation history -For example, when you press the back button when inside a screen in a nested stack navigator, it'll go back to the previous screen inside the nested stack even if there's another navigator as the parent. +For example, when you press the back button when inside a screen in a nested native stack navigator, it'll go back to the previous screen inside the nested stack even if there's another navigator as the parent. ### Each navigator has its own options For example, specifying a `title` option in a screen nested in a child navigator won't affect the title shown in a parent navigator. -If you want to achieve this behavior, see the guide for [screen options with nested navigators](screen-options-resolution.md#setting-parent-screen-options-based-on-child-navigators-state). this could be useful if you are rendering a tab navigator inside a stack navigator and want to show the title of the active screen inside the tab navigator in the header of the stack navigator. +If you want to achieve this behavior, see the guide for [screen options with nested navigators](screen-options-resolution.md#setting-parent-screen-options-based-on-child-navigators-state). This could be useful if you are rendering a tab navigator inside a native stack navigator and want to show the title of the active screen inside the tab navigator in the header of the native stack navigator. ### Each screen in a navigator has its own params @@ -70,9 +70,9 @@ For example, if you're calling `navigation.goBack()` in a nested screen, it'll o ### Navigator specific methods are available in the navigators nested inside -For example, if you have a stack inside a drawer navigator, the drawer's `openDrawer`, `closeDrawer`, `toggleDrawer` methods etc. will also be available on the `navigation` prop in the screen's inside the stack navigator. But say you have a stack navigator as the parent of the drawer, then the screens inside the stack navigator won't have access to these methods, because they aren't nested inside the drawer. +For example, if you have a stack inside a drawer navigator, the drawer's `openDrawer`, `closeDrawer`, `toggleDrawer` methods etc. will also be available on the `navigation` prop in the screen's inside the native stack navigator. But say you have a native stack navigator as the parent of the drawer, then the screens inside the native stack navigator won't have access to these methods, because they aren't nested inside the drawer. -Similarly, if you have a tab navigator inside stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` prop. +Similarly, if you have a tab navigator inside a native stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` prop. If you need to dispatch actions to the nested child navigators from a parent, you can use [`navigation.dispatch`](navigation-prop.md#dispatch): @@ -82,7 +82,7 @@ navigation.dispatch(DrawerActions.toggleDrawer()); ### Nested navigators don't receive parent's events -For example, if you have a stack navigator nested inside a tab navigator, the screens in the stack navigator won't receive the events emitted by the parent tab navigator such as (`tabPress`) when using `navigation.addListener`. +For example, if you have a native stack navigator nested inside a tab navigator, the screens in the native stack navigator won't receive the events emitted by the parent tab navigator such as (`tabPress`) when using `navigation.addListener`. To receive events from parent navigator, you can explicitly listen to parent's events with `navigation.getParent()`: @@ -94,14 +94,14 @@ const unsubscribe = navigation.getParent().addListener('tabPress', (e) => { ### Parent navigator's UI is rendered on top of child navigator -For example, when you nest a stack navigator inside a drawer navigator, you'll see that the drawer appears above the stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header of the stack. This is an important point to consider when deciding how to nest your navigators. +For example, when you nest a native stack navigator inside a drawer navigator, you'll see that the drawer appears above the native stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header of the stack. This is an important point to consider when deciding how to nest your navigators. In your app, you will probably use these patterns depending on the behavior you want: -- Tab navigator nested inside the initial screen of stack navigator - New screens cover the tab bar when you push them. -- Drawer navigator nested inside the initial screen of stack navigator with the initial screen's stack header hidden - The drawer can only be opened from the first screen of the stack. -- Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack. -- Stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top. +- Tab navigator nested inside the initial screen of native stack navigator - New screens cover the tab bar when you push them. +- Drawer navigator nested inside the initial screen of native stack navigator with the initial screen's stack header hidden - The drawer can only be opened from the first screen of the stack. +- Native stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack. +- Native stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top. ## Navigating to a screen in a nested navigator @@ -165,7 +165,7 @@ navigation.navigate('Root', { }); ``` -If the navigator was already rendered, navigating to another screen will push a new screen in case of stack navigator. +If the navigator was already rendered, navigating to another screen will push a new screen in the case of the native stack navigator. You can follow similar approach for deeply nested screens. Note that the second argument to `navigate` here is just `params`, so you can do something like: @@ -185,7 +185,7 @@ In the above case, you're navigating to the `Media` screen, which is in a naviga ### Rendering initial route defined in the navigator -By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored. This behaviour is different from the React Navigation 4. +By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored. If you need to render the initial route specified in the navigator, you can disable the behaviour of using the specified screen as the initial screen by setting `initial: false`: @@ -200,9 +200,9 @@ This affects what happens when pressing the back button. When there's an initial ## Nesting multiple navigators -It's sometimes useful to nest multiple navigators such as stack or drawer, for example, to have [some screens in a modal stack and some in regular stack](modal.md). +It's sometimes useful to nest multiple navigators such as native stack or drawer, for example, to have [some screens in a modal stack and some in regular stack](modal.md). -When nesting multiple stack, drawer or bottom tab navigator, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the stack navigator. +When nesting multiple stack, drawer or bottom tab navigators, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the native stack navigator. To achieve this, you can hide the header in the screen containing the navigator using the `headerShown: false` option. @@ -236,7 +236,7 @@ function App() { A complete example can be found in the [modal guide](modal.md). However, the principle isn't only specific to modals, but any kind of nesting of navigators. -In these examples, we have used a stack navigator directly nested inside another stack navigator, but the same principle applies when there are other navigators in the middle, for example: stack navigator inside a tab navigator which is inside another stack navigator, stack navigator inside drawer navigator etc. +In these examples, we have used a native stack navigator directly nested inside another native stack navigator, but the same principle applies when there are other navigators in the middle, for example: native stack navigator inside a tab navigator which is inside another native stack navigator, native stack navigator inside drawer navigator etc. When nesting multiple stack navigators, we recommend nesting at most 2 stack navigators, unless absolutely necessary. From 3a1ca57c0e6bdbd150e8675df79ec6bfbb4ff98d Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:34:18 +0200 Subject: [PATCH 07/34] docs: use native-stack in navigation-lifecycle --- static/examples/6.x/focus-and-blur.js | 6 +++--- static/examples/6.x/navigation-lifecycle.js | 6 +++--- static/examples/6.x/use-focus-effect.js | 6 +++--- versioned_docs/version-6.x/navigation-lifecycle.md | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/static/examples/6.x/focus-and-blur.js b/static/examples/6.x/focus-and-blur.js index fd09c1af208..58ee8aa0fe2 100755 --- a/static/examples/6.x/focus-and-blur.js +++ b/static/examples/6.x/focus-and-blur.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; function SettingsScreen({ navigation }) { @@ -62,8 +62,8 @@ function DetailsScreen({ navigation }) { ); } const Tab = createBottomTabNavigator(); -const SettingsStack = createStackNavigator(); -const HomeStack = createStackNavigator(); +const SettingsStack = createNativeStackNavigator(); +const HomeStack = createNativeStackNavigator(); export default function App() { return ( diff --git a/static/examples/6.x/navigation-lifecycle.js b/static/examples/6.x/navigation-lifecycle.js index 173d8ca06ed..62cd002ae8d 100755 --- a/static/examples/6.x/navigation-lifecycle.js +++ b/static/examples/6.x/navigation-lifecycle.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; function SettingsScreen({ navigation }) { @@ -52,8 +52,8 @@ function DetailsScreen({ navigation }) { ); } const Tab = createBottomTabNavigator(); -const SettingsStack = createStackNavigator(); -const HomeStack = createStackNavigator(); +const SettingsStack = createNativeStackNavigator(); +const HomeStack = createNativeStackNavigator(); export default function App() { return ( diff --git a/static/examples/6.x/use-focus-effect.js b/static/examples/6.x/use-focus-effect.js index f98a25df1ac..85ebbcfdc71 100755 --- a/static/examples/6.x/use-focus-effect.js +++ b/static/examples/6.x/use-focus-effect.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer, useFocusEffect } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; function SettingsScreen({ navigation }) { @@ -64,8 +64,8 @@ function DetailsScreen({ navigation }) { ); } const Tab = createBottomTabNavigator(); -const SettingsStack = createStackNavigator(); -const HomeStack = createStackNavigator(); +const SettingsStack = createNativeStackNavigator(); +const HomeStack = createNativeStackNavigator(); export default function App() { return ( diff --git a/versioned_docs/version-6.x/navigation-lifecycle.md b/versioned_docs/version-6.x/navigation-lifecycle.md index c634545a299..deef271ff26 100755 --- a/versioned_docs/version-6.x/navigation-lifecycle.md +++ b/versioned_docs/version-6.x/navigation-lifecycle.md @@ -4,7 +4,7 @@ title: Navigation lifecycle sidebar_label: Navigation lifecycle --- -In a previous section, we worked with a stack navigator that has two screens (`Home` and `Details`) and learned how to use `navigation.navigate('RouteName')` to navigate between the routes. +In a previous section, we worked with a native stack navigator that has two screens (`Home` and `Details`) and learned how to use `navigation.navigate('RouteName')` to navigate between the routes. An important question in this context is: what happens with `Home` when we navigate away from it, or when we come back to it? How does a route find out that a user is leaving it or coming back to it? @@ -12,11 +12,11 @@ If you are coming to react-navigation from a web background, you may assume that ## Example scenario -Consider a stack navigator with screens A and B. After navigating to A, its `componentDidMount` is called. When pushing B, its `componentDidMount` is also called, but A remains mounted on the stack and its `componentWillUnmount` is therefore not called. +Consider a native stack navigator with screens A and B. After navigating to A, its `componentDidMount` is called. When pushing B, its `componentDidMount` is also called, but A remains mounted on the stack and its `componentWillUnmount` is therefore not called. When going back from B to A, `componentWillUnmount` of B is called, but `componentDidMount` of A is not because A remained mounted the whole time. -Similar results can be observed (in combination) with other navigators as well. Consider a tab navigator with two tabs, where each tab is a stack navigator: +Similar results can be observed (in combination) with other navigators as well. Consider a tab navigator with two tabs, where each tab is a native stack navigator: From 32cc9a2557825cf9469335b206ab80a2d73fe1c8 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:34:36 +0200 Subject: [PATCH 08/34] docs: use native-stack in next-steps --- versioned_docs/version-6.x/next-steps.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/next-steps.md b/versioned_docs/version-6.x/next-steps.md index f86a2ccf2d3..a0ae00deae1 100755 --- a/versioned_docs/version-6.x/next-steps.md +++ b/versioned_docs/version-6.x/next-steps.md @@ -4,7 +4,7 @@ title: Next steps sidebar_label: Next steps --- -You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display full-screen modals. Stack navigator and its related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don't solve. For example, you can't build tab-based navigation using a stack navigator — for that, you need to use a [TabNavigator](tab-based-navigation.md). +You are now familiar with how to create a native stack navigator, configure it on your screen components, navigate between routes, and display full-screen modals. Native stack navigator and its related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don't solve. For example, you can't build tab-based navigation using a stack navigator — for that, you need to use a [TabNavigator](tab-based-navigation.md). The rest of the documentation is organized around specific use cases, so you can jump between the sections under "Guides" as the need arises (but it also wouldn't hurt you to familiarize yourself with them pre-emptively!). From 00d60f0dfce5c5367862dc46934e1a74b23eba55 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:34:56 +0200 Subject: [PATCH 09/34] docs: use native-stack in glossary-of-terms --- versioned_docs/version-6.x/glossary-of-terms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/glossary-of-terms.md b/versioned_docs/version-6.x/glossary-of-terms.md index f2bb445d4de..3844911bd17 100755 --- a/versioned_docs/version-6.x/glossary-of-terms.md +++ b/versioned_docs/version-6.x/glossary-of-terms.md @@ -33,7 +33,7 @@ A router is a collection of functions that decide how to handle actions and stat A screen component is a component that we use in our route configuration. ```js -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); const StackNavigator = ( From 9403d1d493143f6a742ffd04465a5b4a3dbe7b90 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 2 Jun 2021 17:35:45 +0200 Subject: [PATCH 10/34] docs: use native-stack in troubleshooting --- versioned_docs/version-6.x/troubleshooting.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/versioned_docs/version-6.x/troubleshooting.md b/versioned_docs/version-6.x/troubleshooting.md index 11ae591c077..2652e699a9e 100755 --- a/versioned_docs/version-6.x/troubleshooting.md +++ b/versioned_docs/version-6.x/troubleshooting.md @@ -248,13 +248,13 @@ code would be written as follows: ## I'm getting "Invalid hook call. Hooks can only be called inside of the body of a function component" -This can happen when you pass a React component to an option that accepts a function returning a react element. For example, the [`header` option in stack navigator](stack-navigator.md#header) expects a function returning a react element: +This can happen when you pass a React component to an option that accepts a function returning a react element. For example, the [`headerCenter` option in native stack navigator](native-stack-navigator.md#headerCenter) expects a function returning a react element: ```js }} + option={{ headerTitle: (props) => }} /> ``` @@ -266,7 +266,7 @@ If you directly pass a function here, you'll get this error when using hooks: component={Home} option={{ // This is not correct - header: MyHeader, + headerTitle: MyTitle, }} /> ``` From 35144ea7ff917e50a5d27b6d5c5e2ebed4e27e9d Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Fri, 4 Jun 2021 10:40:23 +0200 Subject: [PATCH 11/34] docs: use native-stack in tab-based-navigation --- static/examples/6.x/tab-based-navigation-stack.js | 6 +++--- versioned_docs/version-6.x/tab-based-navigation.md | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/static/examples/6.x/tab-based-navigation-stack.js b/static/examples/6.x/tab-based-navigation-stack.js index 1c3479405e1..3b45a21bfce 100755 --- a/static/examples/6.x/tab-based-navigation-stack.js +++ b/static/examples/6.x/tab-based-navigation-stack.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; function DetailsScreen() { @@ -36,7 +36,7 @@ function SettingsScreen({ navigation }) { ); } -const HomeStack = createStackNavigator(); +const HomeStack = createNativeStackNavigator(); function HomeStackScreen() { return ( @@ -47,7 +47,7 @@ function HomeStackScreen() { ); } -const SettingsStack = createStackNavigator(); +const SettingsStack = createNativeStackNavigator(); function SettingsStackScreen() { return ( diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md index 32d5a53f357..5452cd25510 100755 --- a/versioned_docs/version-6.x/tab-based-navigation.md +++ b/versioned_docs/version-6.x/tab-based-navigation.md @@ -56,7 +56,7 @@ export default function App() { ## Customizing the appearance -This is similar to how you would customize a stack navigator — there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in `options`. +This is similar to how you would customize a native stack navigator — there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in `options`. @@ -149,7 +149,7 @@ function SettingsScreen({ navigation }) { } ``` -## A stack navigator for each tab +## A native stack navigator for each tab Usually tabs don't just display one screen — for example, on your Twitter feed, you can tap on a tweet and it brings you to a new screen within that tab with all of the replies. You can think of this as there being separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation. @@ -159,7 +159,7 @@ Usually tabs don't just display one screen — for example, on your Twitter import * as React from 'react'; import { Button, Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; function DetailsScreen() { @@ -194,7 +194,7 @@ function SettingsScreen({ navigation }) { ); } -const HomeStack = createStackNavigator(); +const HomeStack = createNativeStackNavigator(); function HomeStackScreen() { return ( @@ -205,7 +205,7 @@ function HomeStackScreen() { ); } -const SettingsStack = createStackNavigator(); +const SettingsStack = createNativeStackNavigator(); function SettingsStackScreen() { return ( From 807761ceea2fe50d60f9ee9dbe36d24079e96661 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Fri, 4 Jun 2021 11:16:11 +0200 Subject: [PATCH 12/34] docs: use native-stack in auth-flow --- static/examples/6.x/auth-flow.js | 4 ++-- versioned_docs/version-6.x/auth-flow.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/examples/6.x/auth-flow.js b/static/examples/6.x/auth-flow.js index a712391d9bf..545e2ce1b8c 100644 --- a/static/examples/6.x/auth-flow.js +++ b/static/examples/6.x/auth-flow.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, Text, TextInput, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; const AuthContext = React.createContext(); @@ -48,7 +48,7 @@ function SignInScreen() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function App({ navigation }) { const [state, dispatch] = React.useReducer( diff --git a/versioned_docs/version-6.x/auth-flow.md b/versioned_docs/version-6.x/auth-flow.md index f14544469b1..6a72fe9c622 100755 --- a/versioned_docs/version-6.x/auth-flow.md +++ b/versioned_docs/version-6.x/auth-flow.md @@ -44,7 +44,7 @@ This pattern has been in use by other routing libraries such as React Router for The magic happens when the value of the `isSignedIn` variable changes. Let's say, initially `isSignedIn` is `false`. This means, either `SignIn` or `SignUp` screens are shown. After the user signs in, the value of `isSignedIn` will change to `true`. React Navigation will see that the `SignIn` and `SignUp` screens are no longer defined and so it will remove them. Then it'll show the `Home` screen automatically because that's the first screen defined when `isSignedIn` is `true`. -The example shows stack navigator, but you can use the same approach with any navigator. +The example shows a native stack navigator, but you can use the same approach with any navigator. By conditionally defining different screens based on a variable, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown. @@ -114,7 +114,7 @@ state.userToken == null ? ( ); ``` -> If you have both your login-related screens and rest of the screens in Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout. +> If you have both your login-related screens and rest of the screens in native stack navigators, we recommend to use a single native stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout. ## Implement the logic for restoring the token From c048826231e06c1b58c61007f59e5aade2e1fac9 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Fri, 4 Jun 2021 11:41:58 +0200 Subject: [PATCH 13/34] docs: use native-stack in handling-safe-area --- static/examples/6.x/hidden-components.js | 20 +++++++++++-------- static/examples/6.x/safe-area-example.js | 4 ++-- .../version-6.x/handling-safe-area.md | 20 +++++++++++-------- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/static/examples/6.x/hidden-components.js b/static/examples/6.x/hidden-components.js index fd2100c47be..d9b3cbd2c94 100755 --- a/static/examples/6.x/hidden-components.js +++ b/static/examples/6.x/hidden-components.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function Demo() { return ( @@ -14,7 +14,7 @@ function Demo() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); export default function App() { @@ -25,12 +25,16 @@ export default function App() { screenOptions={{ headerShown: false }} > - {() => ( - null}> - - - - )} + {() => ( + null} + screenOptions={{ headerShown: false }} + > + + + + )} diff --git a/static/examples/6.x/safe-area-example.js b/static/examples/6.x/safe-area-example.js index 03db9955576..8231e2afcd1 100755 --- a/static/examples/6.x/safe-area-example.js +++ b/static/examples/6.x/safe-area-example.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; function Demo() { @@ -16,7 +16,7 @@ function Demo() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); export default function App() { diff --git a/versioned_docs/version-6.x/handling-safe-area.md b/versioned_docs/version-6.x/handling-safe-area.md index ce7a754ab1b..a263fa616b0 100755 --- a/versioned_docs/version-6.x/handling-safe-area.md +++ b/versioned_docs/version-6.x/handling-safe-area.md @@ -40,7 +40,7 @@ import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; function Demo() { return ( @@ -52,7 +52,7 @@ function Demo() { ); } -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); export default function App() { @@ -60,12 +60,16 @@ export default function App() { - {() => ( - null}> - - - - )} + {() => ( + null} + screenOptions={{ headerShown: false }} + > + + + + )} From 330c8d152cc6b5cb027742e9cb0358fd565bc5dc Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Fri, 4 Jun 2021 12:00:25 +0200 Subject: [PATCH 14/34] docs: use native-stack in hiding-tabbar-in-screens --- versioned_docs/version-6.x/hiding-tabbar-in-screens.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md index bb85ecd10c7..a96c85eac90 100644 --- a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md +++ b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md @@ -4,7 +4,7 @@ title: Hiding tab bar in specific screens sidebar_label: Hiding tab bar in specific screens --- -Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens: `Home`, `Feed`, `Notifications`, `Profile` and `Settings`, and your navigation structure looks like this: +Sometimes we may want to hide the tab bar in specific screens in a native stack navigator nested in a tab navigator. Let's say we have 5 screens: `Home`, `Feed`, `Notifications`, `Profile` and `Settings`, and your navigation structure looks like this: ```js function HomeStack() { From b1b402737ddff3b7231e82d07502a2a81c55ac15 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Fri, 4 Jun 2021 12:18:08 +0200 Subject: [PATCH 15/34] docs: use native-stack in status-bar --- static/examples/6.x/status-bar.js | 5 ++--- versioned_docs/version-6.x/status-bar.md | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/static/examples/6.x/status-bar.js b/static/examples/6.x/status-bar.js index e49aa67a60c..4a4a414f394 100755 --- a/static/examples/6.x/status-bar.js +++ b/static/examples/6.x/status-bar.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { Text, StatusBar, Button, StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import SafeAreaView from 'react-native-safe-area-view'; @@ -13,7 +13,6 @@ function Screen1({ navigation }) {