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/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/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/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/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/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/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/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/navigate-replace-reset.js b/static/examples/6.x/navigate-replace-reset.js
index d14e6c708ce..700780763bb 100755
--- a/static/examples/6.x/navigate-replace-reset.js
+++ b/static/examples/6.x/navigate-replace-reset.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: { navigate } }) {
return (
@@ -75,7 +75,7 @@ function SettingsScreen({ navigation, route }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
function App() {
return (
diff --git a/static/examples/6.x/navigate-set-options.js b/static/examples/6.x/navigate-set-options.js
index 6001ec61ab3..ac3e7977bd0 100755
--- a/static/examples/6.x/navigate-set-options.js
+++ b/static/examples/6.x/navigate-set-options.js
@@ -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 (
@@ -36,7 +36,7 @@ function ProfileScreen({ navigation, route }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
function App() {
return (
diff --git a/static/examples/6.x/navigate-set-params.js b/static/examples/6.x/navigate-set-params.js
index 310f029ac6b..90048d6d261 100755
--- a/static/examples/6.x/navigate-set-params.js
+++ b/static/examples/6.x/navigate-set-params.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: { navigate } }) {
return (
@@ -48,7 +48,7 @@ function ProfileScreen({ navigation, route }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
function App() {
return (
diff --git a/static/examples/6.x/navigate.js b/static/examples/6.x/navigate.js
index 292a94487b0..cc289f49968 100755
--- a/static/examples/6.x/navigate.js
+++ b/static/examples/6.x/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: { navigate } }) {
return (
@@ -30,7 +30,7 @@ function ProfileScreen({ navigation, route }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
function App() {
return (
diff --git a/static/examples/6.x/navigation-context.js b/static/examples/6.x/navigation-context.js
index 732066bd0e6..eb679cb31eb 100755
--- a/static/examples/6.x/navigation-context.js
+++ b/static/examples/6.x/navigation-context.js
@@ -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 ;
}
-class SomeComponent extends React.Component {
- static contextType = NavigationContext;
-
- render() {
- // We can access navigation object via context
- const navigation = this.context;
- return (
-
- Some component inside HomeScreen
-
- );
- }
+function SomeComponent() {
+ // We can access navigation object via context
+ const navigation = React.useContext(NavigationContext);
+
+ return (
+
+ Some component inside HomeScreen
+
+ );
}
+
function ProfileScreen({ navigation }) {
return (
@@ -36,7 +34,7 @@ function ProfileScreen({ navigation }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
function App() {
return (
diff --git a/static/examples/6.x/navigation-in-component.js b/static/examples/6.x/navigation-in-component.js
index a42809568e2..c1ada76bc53 100755
--- a/static/examples/6.x/navigation-in-component.js
+++ b/static/examples/6.x/navigation-in-component.js
@@ -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();
@@ -33,7 +33,7 @@ function DetailsScreen({ navigation }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
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/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/no-nav-prop.js b/static/examples/6.x/no-nav-prop.js
index 06318f6b3ac..11524e11df1 100755
--- a/static/examples/6.x/no-nav-prop.js
+++ b/static/examples/6.x/no-nav-prop.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
const navigationRef = createNavigationContainerRef()
@@ -31,7 +31,7 @@ function Settings({ route }) {
);
}
-const RootStack = createStackNavigator();
+const RootStack = createNativeStackNavigator();
export default 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/parent-options-from-child-opt1.js b/static/examples/6.x/parent-options-from-child-opt1.js
index 9165d5058e5..f4fe4fde427 100755
--- a/static/examples/6.x/parent-options-from-child-opt1.js
+++ b/static/examples/6.x/parent-options-from-child-opt1.js
@@ -5,7 +5,7 @@ import {
getFocusedRouteNameFromRoute,
} 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 getHeaderTitle(route) {
// If the focused route is not found, we need to assume it's the initial screen
@@ -58,7 +58,7 @@ function HomeTabs() {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
export default function App() {
return (
diff --git a/static/examples/6.x/parent-options-from-child-opt2.js b/static/examples/6.x/parent-options-from-child-opt2.js
index fcfea2b065c..6d5baed5277 100755
--- a/static/examples/6.x/parent-options-from-child-opt2.js
+++ b/static/examples/6.x/parent-options-from-child-opt2.js
@@ -5,7 +5,7 @@ import {
getFocusedRouteNameFromRoute,
} 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 getHeaderTitle(route) {
// If the focused route is not found, we need to assume it's the initial screen
@@ -62,7 +62,7 @@ function HomeTabs({ navigation, route }) {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
export default function App() {
return (
diff --git a/static/examples/6.x/parent-options-from-child-start.js b/static/examples/6.x/parent-options-from-child-start.js
index 3806c3e1a96..d826eca86f7 100755
--- a/static/examples/6.x/parent-options-from-child-start.js
+++ b/static/examples/6.x/parent-options-from-child-start.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import { View, Button } 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 FeedScreen({ navigation }) {
return (
@@ -39,7 +39,7 @@ function HomeTabs() {
);
}
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
export default function App() {
return (
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/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/static/examples/6.x/redux-integration-nav-param.js b/static/examples/6.x/redux-integration-nav-param.js
index 1ba59aa5738..32153332d11 100755
--- a/static/examples/6.x/redux-integration-nav-param.js
+++ b/static/examples/6.x/redux-integration-nav-param.js
@@ -3,7 +3,7 @@ import { View, Text, Button, StyleSheet } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
// A very simple reducer
function counter(state, action) {
@@ -63,7 +63,7 @@ function StaticCounter({ route }) {
let CounterContainer = connect((state) => ({ count: state.count }))(Counter);
// Create our stack navigator
-let RootStack = createStackNavigator();
+let RootStack = createNativeStackNavigator();
// Render the app container component with the provider around it
export default function App() {
@@ -75,7 +75,7 @@ export default function App() {
({ title: route.params.count })}
+ options={({ route }) => ({ title: route.params.count.toString() })}
/>
diff --git a/static/examples/6.x/redux-integration.js b/static/examples/6.x/redux-integration.js
index b1a14e1ea99..e88347515d3 100755
--- a/static/examples/6.x/redux-integration.js
+++ b/static/examples/6.x/redux-integration.js
@@ -3,7 +3,7 @@ import { View, Text, Button, StyleSheet } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
// A very simple reducer
function counter(state, action) {
@@ -62,7 +62,7 @@ let StaticCounterContainer = connect((state) => ({ count: state.count }))(
);
// Create our stack navigator
-let RootStack = createStackNavigator();
+let RootStack = createNativeStackNavigator();
// Render the app container component with the provider around it
export default function App() {
diff --git a/static/examples/6.x/reorganized-navigators.js b/static/examples/6.x/reorganized-navigators.js
index 00d561245fe..bd7efe9df19 100755
--- a/static/examples/6.x/reorganized-navigators.js
+++ b/static/examples/6.x/reorganized-navigators.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import { View, Button } 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 FeedScreen({ navigation }) {
return (
@@ -23,7 +23,7 @@ function SettingsScreen() {
return ;
}
-const FeedStack = createStackNavigator();
+const FeedStack = createNativeStackNavigator();
function FeedStackScreen() {
return (
@@ -34,7 +34,7 @@ function FeedStackScreen() {
);
}
-const ProfileStack = createStackNavigator();
+const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen() {
return (
@@ -56,7 +56,7 @@ function HomeTabs() {
);
}
-const RootStack = createStackNavigator();
+const RootStack = createNativeStackNavigator();
export default function App() {
return (
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/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/simple-focus-and-blur.js b/static/examples/6.x/simple-focus-and-blur.js
index 0c99831181c..de69e7ab152 100755
--- a/static/examples/6.x/simple-focus-and-blur.js
+++ b/static/examples/6.x/simple-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';
function SettingsScreen({ navigation }) {
return (
@@ -37,7 +37,7 @@ function ProfileScreen({ navigation }) {
);
}
-const SettingsStack = createStackNavigator();
+const SettingsStack = createNativeStackNavigator();
export default 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/static/examples/6.x/simple-theme.js b/static/examples/6.x/simple-theme.js
index 2564449a7d2..d24e24b0716 100755
--- a/static/examples/6.x/simple-theme.js
+++ b/static/examples/6.x/simple-theme.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
const MyTheme = {
@@ -52,7 +52,7 @@ function HomeScreen({ navigation }) {
}
const Drawer = createDrawerNavigator();
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
function Root() {
return (
diff --git a/static/examples/6.x/stack-in-tab-nav-options-fixed.js b/static/examples/6.x/stack-in-tab-nav-options-fixed.js
index 600e125bc22..3cb47ac89c0 100755
--- a/static/examples/6.x/stack-in-tab-nav-options-fixed.js
+++ b/static/examples/6.x/stack-in-tab-nav-options-fixed.js
@@ -2,11 +2,11 @@ import * as React from 'react';
import { 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';
const Tab = createBottomTabNavigator();
-const HomeStack = createStackNavigator();
-const SettingsStack = createStackNavigator();
+const HomeStack = createNativeStackNavigator();
+const SettingsStack = createNativeStackNavigator();
function A() {
return ;
diff --git a/static/examples/6.x/stack-in-tab-nav-options.js b/static/examples/6.x/stack-in-tab-nav-options.js
index 5fc4f1d8faa..8a33e10478d 100755
--- a/static/examples/6.x/stack-in-tab-nav-options.js
+++ b/static/examples/6.x/stack-in-tab-nav-options.js
@@ -2,11 +2,11 @@ import * as React from 'react';
import { 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';
const Tab = createBottomTabNavigator();
-const HomeStack = createStackNavigator();
-const SettingsStack = createStackNavigator();
+const HomeStack = createNativeStackNavigator();
+const SettingsStack = createNativeStackNavigator();
function A() {
return ;
diff --git a/static/examples/6.x/state-persistance.js b/static/examples/6.x/state-persistance.js
index 1275e76013b..e5023d9a3f2 100755
--- a/static/examples/6.x/state-persistance.js
+++ b/static/examples/6.x/state-persistance.js
@@ -1,12 +1,12 @@
import * as React from 'react';
-import { View, Button, Linking, AsyncStorage } from 'react-native';
+import { Platform, View, Button, Linking, AsyncStorage } 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';
const Tab = createBottomTabNavigator();
-const HomeStack = createStackNavigator();
-const SettingsStack = createStackNavigator();
+const HomeStack = createNativeStackNavigator();
+const SettingsStack = createNativeStackNavigator();
function A() {
return ;
@@ -62,7 +62,7 @@ export default function App() {
const initialUrl = await Linking.getInitialURL();
if (Platform.OS !== 'web' && initialUrl == null) {
- const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
+ const savedState = await AsyncStorage.getItem(PERSISTENCE_KEY);
const state = savedState ? JSON.parse(savedState) : undefined;
if (state !== undefined) {
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 }) {
);
}
-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 }}
+ >
+
+
+
+ )}
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.
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`.
@@ -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.
diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md
index e441d86564a..7f2b788159a 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-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 (
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() {
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()`.
diff --git a/versioned_docs/version-6.x/navigation-container.md b/versioned_docs/version-6.x/navigation-container.md
index 45d6e141fc2..ae98174df37 100644
--- a/versioned_docs/version-6.x/navigation-container.md
+++ b/versioned_docs/version-6.x/navigation-container.md
@@ -16,9 +16,9 @@ Usage:
```js
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();
export default function App() {
return (
diff --git a/versioned_docs/version-6.x/navigation-context.md b/versioned_docs/version-6.x/navigation-context.md
index 6e15bca835e..1d2afa4e81a 100755
--- a/versioned_docs/version-6.x/navigation-context.md
+++ b/versioned_docs/version-6.x/navigation-context.md
@@ -15,12 +15,8 @@ Example:
```js
import { NavigationContext } from '@react-navigation/native';
-class SomeComponent extends React.Component {
- static contextType = NavigationContext;
-
- render() {
- // We can access navigation object via context
- const navigation = this.context;
- }
+function SomeComponent() {
+ // We can access navigation object via context
+ const navigation = React.useContext(NavigationContext);
}
```
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:
diff --git a/versioned_docs/version-6.x/navigation-prop.md b/versioned_docs/version-6.x/navigation-prop.md
index 734d2b8071f..68dd3fe2fca 100755
--- a/versioned_docs/version-6.x/navigation-prop.md
+++ b/versioned_docs/version-6.x/navigation-prop.md
@@ -78,7 +78,7 @@ function HomeScreen({ navigation: { navigate } }) {
}
```
-In a [stack navigator](stack-navigator.md), calling `navigate` with a screen name will result in different behavior based on if the screen is already present or not. If the screen is already present in the stack's history, it'll go back to that screen and remove any screens after that. If the screen is not present, it'll push a new screen.
+In a [native stack navigator](native-stack-navigator.md), calling `navigate` with a screen name will result in different behavior based on if the screen is already present or not. If the screen is already present in the stack's history, it'll go back to that screen and remove any screens after that. If the screen is not present, it'll push a new screen.
For example, if you have a stack with the history `Home > Profile > Settings` and you call `navigate(Profile)`, the resulting screens will be `Home > Profile` as it goes back to `Profile` and removes the `Settings` screen.
@@ -155,25 +155,23 @@ The `setParams` method lets us update the params (`route.params`) of the current
```js
function ProfileScreen({ navigation: { setParams } }) {
- render() {
- return (
-