Skip to content

Commit f90842f

Browse files
kacperkapusciakkacperkapusciak
authored
Use native-stack instead of stack by default (#1004)
* docs: use native-stack in hello-react-navigation * docs: use native-stack in navigating * docs: use native-stack in params * docs: use native-stack in headers * docs: use native-stack in header-buttons * docs: use native-stack in nesting-navigators * docs: use native-stack in navigation-lifecycle * docs: use native-stack in next-steps * docs: use native-stack in glossary-of-terms * docs: use native-stack in troubleshooting * docs: use native-stack in tab-based-navigation * docs: use native-stack in auth-flow * docs: use native-stack in handling-safe-area * docs: use native-stack in hiding-tabbar-in-screens * docs: use native-stack in status-bar * docs: use native-stack in screen-option-resolution * docs: use native-stack in connecting-navigation-prop * Revert "docs: use native-stack in auth-flow" This reverts commit 807761c. * docs: remove redundant installation step * Revert "docs: use native-stack in nesting-navigators" This reverts commit 088736b. * docs: fix headerCenter -> headerTitle * docs: use native-stack in navigating-without-navigation-prop example * docs: use native-stack in themes * docs: use native-stack in state-persistance sample * docs: use native-stack in redux-integration sample * docs: update react-native-screens section * docs: use native-stack in navigation-container * docs: use native-stack in group * docs: use native-stack in navigation-prop * docs: use native-stack in navigation-context * docs: use native-stack in use-navigation-state * docs: use native-stack in use-route * docs: use native-stack in use-navigation * docs: move screens config to getting-started
1 parent f9aef8a commit f90842f

File tree

68 files changed

+241
-248
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+241
-248
lines changed

‎static/examples/6.x/basic-header-config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
22
import { View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

6-
const Stack = createStackNavigator();
6+
const Stack = createNativeStackNavigator();
77

88
function HomeScreen() {
99
return (

‎static/examples/6.x/custom-header-title-component.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { View, Text, Image } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen() {
77
return (
@@ -20,7 +20,7 @@ function LogoTitle() {
2020
);
2121
}
2222

23-
const Stack = createStackNavigator();
23+
const Stack = createNativeStackNavigator();
2424

2525
function App() {
2626
return (

‎static/examples/6.x/focus-and-blur.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
66

77
function SettingsScreen({ navigation }) {
@@ -62,8 +62,8 @@ function DetailsScreen({ navigation }) {
6262
);
6363
}
6464
const Tab = createBottomTabNavigator();
65-
const SettingsStack = createStackNavigator();
66-
const HomeStack = createStackNavigator();
65+
const SettingsStack = createNativeStackNavigator();
66+
const HomeStack = createNativeStackNavigator();
6767

6868
export default function App() {
6969
return (

‎static/examples/6.x/go-back.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation }) {
77
return (
@@ -29,7 +29,7 @@ function DetailsScreen({ navigation }) {
2929
);
3030
}
3131

32-
const Stack = createStackNavigator();
32+
const Stack = createNativeStackNavigator();
3333

3434
function App() {
3535
return (

‎static/examples/6.x/header-interaction.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, Text, Image } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function LogoTitle() {
77
return (
@@ -26,7 +26,7 @@ function HomeScreen({ navigation }) {
2626
return <Text>Count: {count}</Text>;
2727
}
2828

29-
const Stack = createStackNavigator();
29+
const Stack = createNativeStackNavigator();
3030

3131
function App() {
3232
return (

‎static/examples/6.x/header-styles.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen() {
77
return (
@@ -11,7 +11,7 @@ function HomeScreen() {
1111
);
1212
}
1313

14-
const Stack = createStackNavigator();
14+
const Stack = createNativeStackNavigator();
1515

1616
function App() {
1717
return (

‎static/examples/6.x/hello-react-navigation-full.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen() {
77
return (
@@ -19,7 +19,7 @@ function DetailsScreen() {
1919
);
2020
}
2121

22-
const Stack = createStackNavigator();
22+
const Stack = createNativeStackNavigator();
2323

2424
function App() {
2525
return (

‎static/examples/6.x/hello-react-navigation-with-options.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen() {
77
return (
@@ -11,7 +11,7 @@ function HomeScreen() {
1111
);
1212
}
1313

14-
const Stack = createStackNavigator();
14+
const Stack = createNativeStackNavigator();
1515

1616
function App() {
1717
return (

‎static/examples/6.x/hello-react-navigation.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen() {
77
return (
@@ -11,7 +11,7 @@ function HomeScreen() {
1111
);
1212
}
1313

14-
const Stack = createStackNavigator();
14+
const Stack = createNativeStackNavigator();
1515

1616
function App() {
1717
return (

‎static/examples/6.x/hidden-components.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { Text, View } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
44
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5-
import { createStackNavigator } from '@react-navigation/stack';
5+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
66

77
function Demo() {
88
return (
@@ -14,7 +14,7 @@ function Demo() {
1414
</View>
1515
);
1616
}
17-
const Stack = createStackNavigator();
17+
const Stack = createNativeStackNavigator();
1818
const Tab = createBottomTabNavigator();
1919

2020
export default function App() {
@@ -25,12 +25,16 @@ export default function App() {
2525
screenOptions={{ headerShown: false }}
2626
>
2727
<Stack.Screen name="Home">
28-
{() => (
29-
<Tab.Navigator initialRouteName="Analitics" tabBar={() => null}>
30-
<Tab.Screen name="Analitics" component={Demo} />
31-
<Tab.Screen name="Profile" component={Demo} />
32-
</Tab.Navigator>
33-
)}
28+
{() => (
29+
<Tab.Navigator
30+
initialRouteName="Analitics"
31+
tabBar={() => null}
32+
screenOptions={{ headerShown: false }}
33+
>
34+
<Tab.Screen name="Analitics" component={Demo} />
35+
<Tab.Screen name="Profile" component={Demo} />
36+
</Tab.Navigator>
37+
)}
3438
</Stack.Screen>
3539

3640
<Stack.Screen name="Settings" component={Demo} />

‎static/examples/6.x/multiple-navigate.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation }) {
77
return (
@@ -27,7 +27,7 @@ function DetailsScreen({ navigation }) {
2727
);
2828
}
2929

30-
const Stack = createStackNavigator();
30+
const Stack = createNativeStackNavigator();
3131

3232
function App() {
3333
return (

‎static/examples/6.x/multiple-push.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation }) {
77
return (
@@ -27,7 +27,7 @@ function DetailsScreen({ navigation }) {
2727
);
2828
}
2929

30-
const Stack = createStackNavigator();
30+
const Stack = createNativeStackNavigator();
3131

3232
function App() {
3333
return (

‎static/examples/6.x/navigate-replace-reset.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation: { navigate } }) {
77
return (
@@ -75,7 +75,7 @@ function SettingsScreen({ navigation, route }) {
7575
);
7676
}
7777

78-
const Stack = createStackNavigator();
78+
const Stack = createNativeStackNavigator();
7979

8080
function App() {
8181
return (

‎static/examples/6.x/navigate-set-options.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text, TextInput } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation: { navigate } }) {
77
return (
@@ -36,7 +36,7 @@ function ProfileScreen({ navigation, route }) {
3636
);
3737
}
3838

39-
const Stack = createStackNavigator();
39+
const Stack = createNativeStackNavigator();
4040

4141
function App() {
4242
return (

‎static/examples/6.x/navigate-set-params.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation: { navigate } }) {
77
return (
@@ -48,7 +48,7 @@ function ProfileScreen({ navigation, route }) {
4848
);
4949
}
5050

51-
const Stack = createStackNavigator();
51+
const Stack = createNativeStackNavigator();
5252

5353
function App() {
5454
return (

‎static/examples/6.x/navigate.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function HomeScreen({ navigation: { navigate } }) {
77
return (
@@ -30,7 +30,7 @@ function ProfileScreen({ navigation, route }) {
3030
);
3131
}
3232

33-
const Stack = createStackNavigator();
33+
const Stack = createNativeStackNavigator();
3434

3535
function App() {
3636
return (

‎static/examples/6.x/navigation-context.js

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,28 @@ import {
44
NavigationContainer,
55
NavigationContext,
66
} from '@react-navigation/native';
7-
import { createStackNavigator } from '@react-navigation/stack';
7+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
88

99
function HomeScreen() {
1010
return <SomeComponent />;
1111
}
1212

13-
class SomeComponent extends React.Component {
14-
static contextType = NavigationContext;
15-
16-
render() {
17-
// We can access navigation object via context
18-
const navigation = this.context;
19-
return (
20-
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
21-
<Text>Some component inside HomeScreen</Text>
22-
<Button
23-
onPress={() => navigation.navigate('Profile')}
24-
title="Go to Profile"
25-
/>
26-
</View>
27-
);
28-
}
13+
function SomeComponent() {
14+
// We can access navigation object via context
15+
const navigation = React.useContext(NavigationContext);
16+
17+
return (
18+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
19+
<Text>Some component inside HomeScreen</Text>
20+
<Button
21+
onPress={() => navigation.navigate('Profile')}
22+
title="Go to Profile"
23+
/>
24+
</View>
25+
);
2926
}
3027

28+
3129
function ProfileScreen({ navigation }) {
3230
return (
3331
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -36,7 +34,7 @@ function ProfileScreen({ navigation }) {
3634
);
3735
}
3836

39-
const Stack = createStackNavigator();
37+
const Stack = createNativeStackNavigator();
4038

4139
function App() {
4240
return (

‎static/examples/6.x/navigation-in-component.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { useNavigation, NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
function GoToButton({ screenName }) {
77
const navigation = useNavigation();
@@ -33,7 +33,7 @@ function DetailsScreen({ navigation }) {
3333
);
3434
}
3535

36-
const Stack = createStackNavigator();
36+
const Stack = createNativeStackNavigator();
3737

3838
function App() {
3939
return (

‎static/examples/6.x/navigation-lifecycle.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
66

77
function SettingsScreen({ navigation }) {
@@ -52,8 +52,8 @@ function DetailsScreen({ navigation }) {
5252
);
5353
}
5454
const Tab = createBottomTabNavigator();
55-
const SettingsStack = createStackNavigator();
56-
const HomeStack = createStackNavigator();
55+
const SettingsStack = createNativeStackNavigator();
56+
const HomeStack = createNativeStackNavigator();
5757

5858
export default function App() {
5959
return (

0 commit comments

Comments
 (0)