Add static examples

Author: patrycjakalinska

versioned_docs/version-7.x/navigation-context.md

@@ -4,19 +4,138 @@ title: NavigationContext
 sidebar_label: NavigationContext
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 `NavigationContext` provides the `navigation` object (same object as the [navigation](navigation-object.md) prop). In fact, [useNavigation](use-navigation.md) uses this context to get the `navigation` prop.
 
 Most of the time, you won't use `NavigationContext` directly, as the provided `useNavigation` covers most use cases. But just in case you have something else in mind, `NavigationContext` is available for you to use.
 
 Example:
 
-<samp id="navigation-context" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js name="Navigation context" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+// codeblock-focus-start
+import {
+  useNavigation,
+  createStaticNavigation,
+  NavigationContext,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+  return <SomeComponent />;
+}
+
+// codeblock-focus-start
+
+function SomeComponent() {
+  // We can access navigation object via context
+  const navigation = React.useContext(NavigationContext);
+  // codeblock-focus-end
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Some component inside HomeScreen</Text>
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Stack);
 
-```js
-import { NavigationContext } from '@react-navigation/native';
+function App() {
+  return <Navigation />;
+}
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="Navigation context" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+// codeblock-focus-start
+import {
+  NavigationContainer,
+  NavigationContext,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+  return <SomeComponent />;
+}
+
+// codeblock-focus-start
 
 function SomeComponent() {
   // We can access navigation object via context
   const navigation = React.useContext(NavigationContext);
+  // codeblock-focus-end
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Some component inside HomeScreen</Text>
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
 }
+
+export default App;
 ```
+
+</TabItem>
+</Tabs>