Use static2dynamic for more examples

Author: satya164

versioned_docs/version-8.x/custom-android-back-button-handling.md

@@ -4,19 +4,13 @@ title: Custom Android back button behavior
 sidebar_label: Android back button behavior
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling.
 
 As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of [`BackHandler`](https://reactnative.dev/docs/backhandler.html) which comes with react-native, along with the `useFocusEffect` hook to add our custom `hardwareBackPress` listener.
 
 Returning `true` from `onBackPress` denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js name="Custom android back button" snack
+```js name="Custom android back button" snack static2dynamic
 import * as React from 'react';
 import { Text, View, BackHandler, StyleSheet } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -126,125 +120,6 @@ const styles = StyleSheet.create({
 });
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js name="Custom android back button" snack
-import * as React from 'react';
-import { Text, View, BackHandler, StyleSheet } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { useFocusEffect } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { PlatformPressable, Button } from '@react-navigation/elements';
-
-const Stack = createNativeStackNavigator();
-
-const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];
-
-// codeblock-focus-start
-function ScreenWithCustomBackBehavior() {
-  // codeblock-focus-end
-
-  const [selected, setSelected] = React.useState(listData[0].key);
-  const [isSelectionModeEnabled, setIsSelectionModeEnabled] =
-    React.useState(false);
-  // codeblock-focus-start
-  // ...
-
-  useFocusEffect(
-    React.useCallback(() => {
-      const onBackPress = () => {
-        if (isSelectionModeEnabled) {
-          setIsSelectionModeEnabled(false);
-          return true;
-        } else {
-          return false;
-        }
-      };
-
-      const subscription = BackHandler.addEventListener(
-        'hardwareBackPress',
-        onBackPress
-      );
-
-      return () => subscription.remove();
-    }, [isSelectionModeEnabled])
-  );
-  // codeblock-focus-end
-
-  return (
-    <View style={styles.container}>
-      {listData.map((item) => (
-        <React.Fragment key={item.key}>
-          {isSelectionModeEnabled ? (
-            <PlatformPressable
-              onPress={() => {
-                setSelected(item.key);
-              }}
-              style={{
-                textDecorationLine: item.key === selected ? 'underline' : '',
-              }}
-            >
-              <Text
-                style={{
-                  textDecorationLine: item.key === selected ? 'underline' : '',
-                  ...styles.text,
-                }}
-              >
-                {item.key}
-              </Text>
-            </PlatformPressable>
-          ) : (
-            <Text style={styles.text}>
-              {item.key === selected ? 'Selected: ' : ''}
-              {item.key}
-            </Text>
-          )}
-        </React.Fragment>
-      ))}
-      <Button
-        onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
-      >
-        Toggle selection mode
-      </Button>
-      <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
-    </View>
-  );
-  // codeblock-focus-start
-
-  // ...
-}
-// codeblock-focus-end
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="CustomScreen"
-          component={ScreenWithCustomBackBehavior}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 20,
-    marginBottom: 20,
-  },
-});
-```
-
-</TabItem>
-</Tabs>
-
 The presented approach will work well for screens that are shown in a `StackNavigator`. Custom back button handling in other situations may not be supported at the moment (eg. A known case when this does not work is when you want to handle back button press in an open drawer. PRs for such use cases are welcome!).
 
 If instead of overriding system back button, you'd like to prevent going back from the screen, see docs for [preventing going back](preventing-going-back.md).

versioned_docs/version-8.x/custom-navigators.md

@@ -4,9 +4,6 @@ title: Custom navigators
 sidebar_label: Custom navigators
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 In essence, a navigator is a React component that takes a set of screens and options, and renders them based on its [navigation state](navigation-state.md), generally with additional UI such as headers, tab bars, or drawers.
 
 React Navigation provides a few built-in navigators, but they might not always fit your needs if you want a very custom behavior or UI. In such cases, you can build your own custom navigators using React Navigation's APIs.

versioned_docs/version-8.x/customizing-bottom-tabs.md

@@ -4,9 +4,6 @@ title: Customizing bottom tab bar
 sidebar_label: Customizing tab bar
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 This guide covers customizing the tab bar in [`createBottomTabNavigator`](bottom-tab-navigator.md). Make sure to install and configure the library according to the [installation instructions](bottom-tab-navigator.md#installation) first.
 
 ## Add icons for each tab

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

@@ -4,9 +4,6 @@ title: DrawerActions reference
 sidebar_label: DrawerActions
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 `DrawerActions` is an object containing methods for generating actions specific to drawer-based navigators. Its methods expand upon the actions available in [CommonActions](navigation-actions.md).
 
 The following actions are supported:

versioned_docs/version-8.x/elements.md

@@ -50,10 +50,7 @@ export default function App() {
 
 To use the header in a navigator, you can use the `header` option in the screen options:
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js name="Header with Native Stack" snack
+```js name="Header with Native Stack" snack static2dynamic
 import * as React from 'react';
 import { Text, View, Button } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -94,58 +91,6 @@ export default function App() {
 }
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js name="Header with Native Stack" snack
-import * as React from 'react';
-import { Text, View, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-// codeblock-focus-start
-import { Header, getHeaderTitle } from '@react-navigation/elements';
-
-const Stack = createNativeStackNavigator();
-
-function MyStack() {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        header: ({ options, route, back }) => (
-          <Header
-            {...options}
-            back={back}
-            title={getHeaderTitle(options, route.name)}
-          />
-        ),
-      }}
-    >
-      <Stack.Screen name="Home" component={HomeScreen} />
-    </Stack.Navigator>
-  );
-}
-// codeblock-focus-end
-
-function HomeScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Home Screen</Text>
-    </View>
-  );
-}
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <MyStack />
-    </NavigationContainer>
-  );
-}
-```
-
-</TabItem>
-</Tabs>
-
 :::note
 
 This doesn't replicate the behavior of the header in stack and native stack navigators as the stack navigator also includes animations, and the native stack navigator header is provided by the native platform.

versioned_docs/version-8.x/function-after-focusing-screen.md

@@ -23,10 +23,7 @@ With this approach, we will only be able to call an action when the screen focus
 
 Example:
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js name="Focus event listener" snack
+```js name="Focus event listener" snack static2dynamic
 // codeblock-focus-start
 import * as React from 'react';
 import { View } from 'react-native';
@@ -82,58 +79,6 @@ export default function App() {
 }
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js name="Focus event listener" snack
-// codeblock-focus-start
-import * as React from 'react';
-import { View } from 'react-native';
-
-// codeblock-focus-end
-import { NavigationContainer, useNavigation } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-// codeblock-focus-start
-function ProfileScreen() {
-  const navigation = useNavigation('Profile');
-
-  React.useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
-      alert('Screen is focused');
-      // The screen is focused
-      // Call any action
-    });
-
-    // Return the function to unsubscribe from the event so it gets removed on unmount
-    return unsubscribe;
-  }, [navigation]);
-
-  return <View />;
-}
-// codeblock-focus-end
-
-function HomeScreen() {
-  return <View />;
-}
-
-const Tab = createBottomTabNavigator();
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Tab.Navigator>
-        <Tab.Screen name="Home" component={HomeScreen} />
-        <Tab.Screen name="Profile" component={ProfileScreen} />
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
-}
-```
-
-</TabItem>
-</Tabs>
-
 See the [navigation events guide](navigation-events.md) for more details on the event listener API.
 
 In most cases, it's recommended to use the `useFocusEffect` hook instead of adding the listener manually. See below for details.
@@ -144,10 +89,7 @@ React Navigation provides a [hook](use-focus-effect.md) that runs an effect when
 
 This is particularly handy when we are trying to stop something when the page is unfocused, like stopping a video or audio file from playing, or stopping the tracking of a user's location.
 
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-```js name="useFocusEffect hook" snack
+```js name="useFocusEffect hook" snack static2dynamic
 import * as React from 'react';
 import { View } from 'react-native';
 import {
@@ -198,54 +140,6 @@ export default function App() {
 }
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js name="useFocusEffect hook" snack
-import * as React from 'react';
-import { View } from 'react-native';
-import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-// codeblock-focus-start
-function ProfileScreen() {
-  useFocusEffect(
-    React.useCallback(() => {
-      alert('Screen was focused');
-      // Do something when the screen is focused
-      return () => {
-        alert('Screen was unfocused');
-        // Do something when the screen is unfocused
-        // Useful for cleanup functions
-      };
-    }, [])
-  );
-
-  return <View />;
-}
-// codeblock-focus-end
-
-function HomeScreen() {
-  return <View />;
-}
-
-const Tab = createBottomTabNavigator();
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Tab.Navigator>
-        <Tab.Screen name="Home" component={HomeScreen} />
-        <Tab.Screen name="Profile" component={ProfileScreen} />
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
-}
-```
-
-</TabItem>
-</Tabs>
-
 See the [`useFocusEffect`](https://reactnavigation.org/docs/use-focus-effect/) documentation for more details.
 
 ## Re-rendering screen with the `useIsFocused` hook

versioned_docs/version-8.x/header-buttons.md

@@ -4,9 +4,6 @@ title: Header buttons
 sidebar_label: Header buttons
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 Now that we know how to customize the look of our headers, let's make them interactive!
 
 ## Adding a button to the header