Use native-stack instead of stack by default #1004
Conversation
|
❌ Deploy Preview for react-navigation-docs failed. 🔨 Explore the source changes: 83bedbd 🔍 Inspect the deploy log: https://app.netlify.com/sites/react-navigation-docs/deploys/60d9cc1245e6af000768663c |
| {() => ( | ||
| <Tab.Navigator | ||
| initialRouteName="Analitics" | ||
| tabBar={() => null} |
There was a problem hiding this comment.
Why hide the tab bar? There'd be no way to switch between tabs
There was a problem hiding this comment.
It is like that since v5.
This particular example shows how to deal with safe areas and that's why tabs are hidden. I've also hidden the header to match what the example was trying to show.
There was a problem hiding this comment.
@kacperkapusciak oki, I think we need to revisit that page, currently, I see 2 issues:
- it seems pointless to use a tab navigator if you're going to hide the tab bar
- the title mentions "custom header", but you don't need to add a safe area to your screen because you use a custom header
- this example is not typical, there are often screens with header and no tab bar (not hidden)
what it should document is
- general guide to using safe area on any screen that touches any screen edges - even if it has both header and tab bar, it's still necessary to handle horizontal insets (can be merged with landscape mode)
- mention that you need top safe area when not using a header/hiding header/transparent header
- mention that you need bottom safe area when not using a tab bar/transparent tab bar
- we should document an example for
ScrollViewsandFlatListbecause they are common to be in screens
I'll create a task on notion for that
| @@ -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`. | |||
There was a problem hiding this comment.
Not related to this PR, but we might wanna change this document to not talk about brand color, since it's better addressed by using a custom theme than duplicating in screenOptions.
Maybe some other option would make sense here, like a custom back button.
This PR treats native-stack (createNativeStackNavigator) as the default-choice stack navigator in React Navigation library.