Migrate more files to use static2dynamic

Author: satya164

versioned_docs/version-7.x/drawer-actions.md

@@ -13,10 +13,7 @@ Most of the time, you won't use `NavigationContext` directly, as the provided `u
 
 Example:
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js name="Navigation context" snack
+```js name="Navigation context" snack static2dynamic
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -48,7 +45,9 @@ function SomeComponent() {
       </Button>
     </View>
   );
+  // codeblock-focus-start
 }
+// codeblock-focus-end
 
 function ProfileScreen() {
   const navigation = useNavigation();
@@ -60,82 +59,19 @@ function ProfileScreen() {
   );
 }
 
-const Stack = createNativeStackNavigator({
+const RootStack = createNativeStackNavigator({
   initialRouteName: 'Home',
   screens: {
     Home: HomeScreen,
     Profile: ProfileScreen,
   },
 });
 
-const Navigation = createStaticNavigation(Stack);
+const Navigation = createStaticNavigation(RootStack);
 
 function App() {
   return <Navigation />;
 }
 
 export default App;
 ```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js name="Navigation context" snack
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { Button } from '@react-navigation/elements';
-// codeblock-focus-start
-import { NavigationContext } from '@react-navigation/native';
-// codeblock-focus-end
-import { NavigationContainer } from '@react-navigation/native';
-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 = React.useContext(NavigationContext);
-
-  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>

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

@@ -22,7 +22,7 @@ You can pass a prop named `options` to the `Screen` component to configure a scr
 ```js name="Screen title option" snack static2dynamic
 import * as React from 'react';
 import { View, Text } from 'react-native';
-import Button from '@react-navigation/elements';
+import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
@@ -54,7 +54,7 @@ function ProfileScreen() {
 }
 
 // codeblock-focus-start
-const Stack = createNativeStackNavigator({
+const RootStack = createNativeStackNavigator({
   screens: {
     Home: {
       screen: HomeScreen,
@@ -71,7 +71,7 @@ const Stack = createNativeStackNavigator({
   },
 });
 
-const Navigation = createStaticNavigation(Stack);
+const Navigation = createStaticNavigation(RootStack);
 
 export default function App() {
   return <Navigation />;
@@ -81,11 +81,8 @@ export default function App() {
 
 You can also pass a function to `options`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for that screen, as well as the [`theme` object](themes.md). This can be useful if you want to perform navigation in your options:
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js
-const Stack = createNativeStackNavigator({
+```js static2dynamic
+const RootStack = createNativeStackNavigator({
   screens: {
     Home: {
       screen: HomeScreen,
@@ -100,25 +97,6 @@ const Stack = createNativeStackNavigator({
 });
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-<Stack.Screen
-  name="Home"
-  component={HomeScreen}
-  options={({ navigation }) => ({
-    title: 'Awesome app',
-    headerLeft: () => (
-      <DrawerButton onPress={() => navigation.toggleDrawer()} />
-    ),
-  })}
-/>
-```
-
-</TabItem>
-</Tabs>
-
 ### `screenOptions` prop on `Group`
 
 You can pass a prop named `screenOptions` to the `Group` component to configure screens inside the group, where you can specify an object with different options. The options specified in `screenOptions` apply to all of the screens in the group.
@@ -139,7 +117,7 @@ import {
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 // codeblock-focus-start
-const Stack = createNativeStackNavigator({
+const RootStack = createNativeStackNavigator({
   groups: {
     App: {
       screenOptions: {
@@ -180,7 +158,9 @@ function ScreenWithButton(screenName, navigateTo) {
     );
   };
 }
-const Navigation = createStaticNavigation(Stack);
+
+const Navigation = createStaticNavigation(RootStack);
+
 export default function App() {
   return <Navigation />;
 }
@@ -299,11 +279,8 @@ You can pass a prop named `screenOptions` to the navigator component, where you
 
 Example:
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js
-const Stack = createNativeStackNavigator({
+```js static2dynamic
+const RootStack = createNativeStackNavigator({
   screenOptions: {
     headerStyle: {
       backgroundColor: 'papayawhip',
@@ -316,35 +293,17 @@ const Stack = createNativeStackNavigator({
 });
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-<Stack.Navigator
-  screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
->
-  <Stack.Screen name="Home" component={HomeScreen} />
-  <Stack.Screen name="Profile" component={ProfileScreen} />
-</Stack.Navigator>
-```
-
-</TabItem>
-</Tabs>
-
 Similar to `options`, you can also pass a function to `screenOptions`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js name="Screen options for tab navigator" snack dependencies=@expo/vector-icons
+```js name="Screen options for tab navigator" snack dependencies=@expo/vector-icons static2dynamic
 import * as React from 'react';
 import { View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 // codeblock-focus-start
-const Tab = createBottomTabNavigator({
+const MyTabs = createBottomTabNavigator({
   screenOptions: ({ route }) => ({
     tabBarIcon: ({ color, size }) => {
       const icons = {
@@ -372,63 +331,13 @@ function EmptyScreen() {
   return <View />;
 }
 
-const Navigation = createStaticNavigation(Tab);
+const Navigation = createStaticNavigation(MyTabs);
 
 export default function App() {
   return <Navigation />;
 }
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js name="Screen options for tab navigator" snack dependencies=@expo/vector-icons
-import * as React from 'react';
-import { View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-
-const Tab = createBottomTabNavigator();
-
-function EmptyScreen() {
-  return <View />;
-}
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      // codeblock-focus-start
-      <Tab.Navigator
-        screenOptions={({ route }) => ({
-          tabBarIcon: ({ color, size }) => {
-            const icons = {
-              Home: 'home',
-              Profile: 'account',
-            };
-
-            return (
-              <MaterialCommunityIcons
-                name={icons[route.name]}
-                color={color}
-                size={size}
-              />
-            );
-          },
-        })}
-      >
-        <Tab.Screen name="Home" component={EmptyScreen} />
-        <Tab.Screen name="Profile" component={EmptyScreen} />
-      </Tab.Navigator>
-      // codeblock-focus-end
-    </NavigationContainer>
-  );
-}
-```
-
-</TabItem>
-</Tabs>
-
 ### `navigation.setOptions` method
 
 The `navigation` object has a `setOptions` method that lets you update the options for a screen from within a component. See [navigation object's docs](navigation-object.md#setoptions) for more details.