docs: use native-stack in navigation-prop

Author: kacperkapusciak

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 (

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 (

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 (

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 (

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 (

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 (
-      <Button
-        onPress={() =>
-          setParams({
-            friends:
-              route.params.friends[0] === 'Brent'
-                ? ['Wojciech', 'Szymon', 'Jakub']
-                : ['Brent', 'Satya', 'Michaś'],
-            title:
-              route.params.title === "Brent's Profile"
-                ? "Lucy's Profile"
-                : "Brent's Profile",
-          })
-        }
-        title="Swap title and friends"
-      />
-    );
-  }
+  return (
+    <Button
+      onPress={() =>
+        setParams({
+          friends:
+            route.params.friends[0] === 'Brent'
+              ? ['Wojciech', 'Szymon', 'Jakub']
+              : ['Brent', 'Satya', 'Michaś'],
+          title:
+            route.params.title === "Brent's Profile"
+              ? "Lucy's Profile"
+              : "Brent's Profile",
+        })
+      }
+      title="Swap title and friends"
+    />
+  );
 }
 ```