Skip to content

Use native-stack instead of stack by default #1004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 34 commits into from
Jul 1, 2021
Merged

Use native-stack instead of stack by default #1004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
7d4f9e0
docs: use native-stack in hello-react-navigation
kacperkapusciak Jun 2, 2021
cfe11b1
docs: use native-stack in navigating
kacperkapusciak Jun 2, 2021
219bf92
docs: use native-stack in params
kacperkapusciak Jun 2, 2021
39a3748
docs: use native-stack in headers
kacperkapusciak Jun 2, 2021
8ea6404
docs: use native-stack in header-buttons
kacperkapusciak Jun 2, 2021
088736b
docs: use native-stack in nesting-navigators
kacperkapusciak Jun 2, 2021
3a1ca57
docs: use native-stack in navigation-lifecycle
kacperkapusciak Jun 2, 2021
32cc9a2
docs: use native-stack in next-steps
kacperkapusciak Jun 2, 2021
00d60f0
docs: use native-stack in glossary-of-terms
kacperkapusciak Jun 2, 2021
9403d1d
docs: use native-stack in troubleshooting
kacperkapusciak Jun 2, 2021
35144ea
docs: use native-stack in tab-based-navigation
kacperkapusciak Jun 4, 2021
807761c
docs: use native-stack in auth-flow
kacperkapusciak Jun 4, 2021
c048826
docs: use native-stack in handling-safe-area
kacperkapusciak Jun 4, 2021
330c8d1
docs: use native-stack in hiding-tabbar-in-screens
kacperkapusciak Jun 4, 2021
b1b4027
docs: use native-stack in status-bar
kacperkapusciak Jun 4, 2021
0c5e8b2
docs: use native-stack in screen-option-resolution
kacperkapusciak Jun 4, 2021
b88da6b
docs: use native-stack in connecting-navigation-prop
kacperkapusciak Jun 4, 2021
0a85402
Revert "docs: use native-stack in auth-flow"
kacperkapusciak Jun 8, 2021
7fd3446
docs: remove redundant installation step
kacperkapusciak Jun 8, 2021
4b62d4c
Revert "docs: use native-stack in nesting-navigators"
kacperkapusciak Jun 8, 2021
0a5b9bb
docs: fix headerCenter -> headerTitle
kacperkapusciak Jun 8, 2021
483dc5c
docs: use native-stack in navigating-without-navigation-prop example
kacperkapusciak Jun 9, 2021
cbcd45e
docs: use native-stack in themes
kacperkapusciak Jun 9, 2021
dfbc23c
docs: use native-stack in state-persistance sample
kacperkapusciak Jun 9, 2021
00809e3
docs: use native-stack in redux-integration sample
kacperkapusciak Jun 9, 2021
0a39180
docs: update react-native-screens section
kacperkapusciak Jun 9, 2021
e292c61
docs: use native-stack in navigation-container
kacperkapusciak Jun 11, 2021
bd0233e
docs: use native-stack in group
kacperkapusciak Jun 11, 2021
8d6789f
docs: use native-stack in navigation-prop
kacperkapusciak Jun 11, 2021
b2f6c66
docs: use native-stack in navigation-context
kacperkapusciak Jun 11, 2021
2250673
docs: use native-stack in use-navigation-state
kacperkapusciak Jun 14, 2021
83dba16
docs: use native-stack in use-route
kacperkapusciak Jun 14, 2021
8c4f7bf
docs: use native-stack in use-navigation
kacperkapusciak Jun 14, 2021
83bedbd
docs: move screens config to getting-started
kacperkapusciak Jun 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions static/examples/6.x/basic-header-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/custom-header-title-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -20,7 +20,7 @@ function LogoTitle() {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
6 changes: 3 additions & 3 deletions static/examples/6.x/focus-and-blur.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) {
Expand Down Expand Up @@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/go-back.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down Expand Up @@ -29,7 +29,7 @@ function DetailsScreen({ navigation }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/header-interaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -26,7 +26,7 @@ function HomeScreen({ navigation }) {
return <Text>Count: {count}</Text>;
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/header-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -11,7 +11,7 @@ function HomeScreen() {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/hello-react-navigation-full.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -19,7 +19,7 @@ function DetailsScreen() {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/hello-react-navigation-with-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -11,7 +11,7 @@ function HomeScreen() {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/hello-react-navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -11,7 +11,7 @@ function HomeScreen() {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
20 changes: 12 additions & 8 deletions static/examples/6.x/hidden-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -14,7 +14,7 @@ function Demo() {
</View>
);
}
const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
Expand All @@ -25,12 +25,16 @@ export default function App() {
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Home">
{() => (
<Tab.Navigator initialRouteName="Analitics" tabBar={() => null}>
<Tab.Screen name="Analitics" component={Demo} />
<Tab.Screen name="Profile" component={Demo} />
</Tab.Navigator>
)}
{() => (
<Tab.Navigator
initialRouteName="Analitics"
tabBar={() => null}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why hide the tab bar? There'd be no way to switch between tabs

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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 ScrollViews and FlatList because they are common to be in screens

I'll create a task on notion for that

screenOptions={{ headerShown: false }}
>
<Tab.Screen name="Analitics" component={Demo} />
<Tab.Screen name="Profile" component={Demo} />
</Tab.Navigator>
)}
</Stack.Screen>

<Stack.Screen name="Settings" component={Demo} />
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/multiple-navigate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -27,7 +27,7 @@ function DetailsScreen({ navigation }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/multiple-push.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -27,7 +27,7 @@ function DetailsScreen({ navigation }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/navigate-replace-reset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: { navigate } }) {
return (
Expand Down Expand Up @@ -75,7 +75,7 @@ function SettingsScreen({ navigation, route }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/navigate-set-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Button, View, Text, TextInput } 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: { navigate } }) {
return (
Expand Down Expand Up @@ -36,7 +36,7 @@ function ProfileScreen({ navigation, route }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/navigate-set-params.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: { navigate } }) {
return (
Expand Down Expand Up @@ -48,7 +48,7 @@ function ProfileScreen({ navigation, route }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/navigate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: { navigate } }) {
return (
Expand Down Expand Up @@ -30,7 +30,7 @@ function ProfileScreen({ navigation, route }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
34 changes: 16 additions & 18 deletions static/examples/6.x/navigation-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,28 @@ import {
NavigationContainer,
NavigationContext,
} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
return <SomeComponent />;
}

class SomeComponent extends React.Component {
static contextType = NavigationContext;

render() {
// We can access navigation object via context
const navigation = this.context;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Some component inside HomeScreen</Text>
<Button
onPress={() => navigation.navigate('Profile')}
title="Go to Profile"
/>
</View>
);
}
function SomeComponent() {
// We can access navigation object via context
const navigation = React.useContext(NavigationContext);

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Some component inside HomeScreen</Text>
<Button
onPress={() => navigation.navigate('Profile')}
title="Go to Profile"
/>
</View>
);
}


function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
Expand All @@ -36,7 +34,7 @@ function ProfileScreen({ navigation }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/navigation-in-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function GoToButton({ screenName }) {
const navigation = useNavigation();
Expand Down Expand Up @@ -33,7 +33,7 @@ function DetailsScreen({ navigation }) {
);
}

const Stack = createStackNavigator();
const Stack = createNativeStackNavigator();

function App() {
return (
Expand Down
6 changes: 3 additions & 3 deletions static/examples/6.x/navigation-lifecycle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) {
Expand Down Expand Up @@ -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 (
Expand Down
Loading