Migrate 'Route object' examples to static API in v7 (#1321)

Author: patrycjakalinska

versioned_docs/version-7.x/route-object.md

@@ -4,6 +4,9 @@ title: Route object reference
 sidebar_label: Route object
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Each `screen` component in your app is provided with the `route` object as a prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).
 
 - `route`
@@ -12,9 +15,51 @@ Each `screen` component in your app is provided with the `route` object as a pro
   - `path` - An optional string containing the path that opened the screen, exists when the screen was opened via a deep link.
   - `params` - An optional object containing params which is defined while navigating e.g. `navigate('Twitter', { user: 'Dan Abramov' })`.
 
-<samp id="route-prop" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js name="Route prop" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator({
+  screens: {
+    Profile: ProfileScreen,
+  },
+});
+
+// codeblock-focus-start
+function ProfileScreen({ route }) {
+  return (
+    <View>
+      <Text>This is the profile screen of the app</Text>
+      <Text>{route.name}</Text>
+    </View>
+  );
+}
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(Stack);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="Route prop" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-```js
+const Stack = createNativeStackNavigator();
+
+// codeblock-focus-start
 function ProfileScreen({ route }) {
   return (
     <View>
@@ -23,4 +68,18 @@ function ProfileScreen({ route }) {
     </View>
   );
 }
+// codeblock-focus-end
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
 ```
+
+</TabItem>
+</Tabs>