Automatically detect React Navigation version for examples (#1358)

Author: satya164

src/components/Pre.js

@@ -1,3 +1,4 @@
+import { useActiveVersion } from '@docusaurus/plugin-content-docs/client';
 import { useColorMode } from '@docusaurus/theme-common';
 import { usePluginData } from '@docusaurus/useGlobalData';
 import MDXPre from '@theme-original/MDXComponents/Pre';
@@ -7,12 +8,12 @@ export default function Pre({
   children,
   'data-name': name,
   'data-snack': snack,
-  'data-version': version,
   'data-dependencies': deps,
   'data-lang': lang,
   ...rest
 }) {
   const { colorMode } = useColorMode();
+  const activeVersion = useActiveVersion();
   const { versions } = usePluginData('react-navigation-versions');
 
   const child = React.Children.only(children);
@@ -82,6 +83,12 @@ export default function Pre({
         )
       : {};
 
+    const version = activeVersion?.name;
+
+    if (version == null || versions[version] == null) {
+      throw new Error(`Invalid version: ${version}`);
+    }
+
     Object.assign(
       dependencies,
       Object.entries(versions[version]).reduce((acc, [key, value]) => {

src/plugins/react-navigation-versions.mjs

@@ -3,7 +3,7 @@ export default function friendsPlugin(context, options) {
     name: 'react-navigation-versions',
     async contentLoaded({ content, actions }) {
       const queries = {
-        7: {
+        '7.x': {
           tag: 'next',
           packages: [
             '@react-navigation/bottom-tabs',

versioned_docs/version-7.x/auth-flow.md

@@ -68,7 +68,7 @@ function useIsSignedOut() {
 
 We'll discuss how to expose the context value later.
 
-```js name="Customizing tabs appearance" snack version=7
+```js name="Customizing tabs appearance" snack
 import * as React from 'react';
 import { View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -150,7 +150,7 @@ function SignUpScreen() {
 
 For example:
 
-```js name="Customizing tabs appearance" snack version=7
+```js name="Customizing tabs appearance" snack
 import * as React from 'react';
 import { View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
@@ -451,7 +451,7 @@ So our component will look like this:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store
+```js name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store
 // codeblock-focus-start
 import * as React from 'react';
 import * as SecureStore from 'expo-secure-store';
@@ -639,7 +639,7 @@ const Navigation = createStaticNavigation(RootStack);
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store
+```js name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store
 // codeblock-focus-start
 import * as React from 'react';
 import * as SecureStore from 'expo-secure-store';

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -25,7 +25,7 @@ To use this navigator, import it from `@react-navigation/bottom-tabs`:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Bottom Tab Navigator" snack version=7
+```js name="Bottom Tab Navigator" snack
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import {
@@ -80,7 +80,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Bottom Tab Navigator" snack version=7
+```js name="Bottom Tab Navigator" snack
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -669,7 +669,7 @@ Supported values for `animation` are:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Bottom Tabs animation" snack version=7
+```js name="Bottom Tabs animation" snack
 import * as React from 'react';
 import { View, Text, Easing } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -715,7 +715,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Bottom Tabs animation" snack version=7
+```js name="Bottom Tabs animation" snack
 import * as React from 'react';
 import { Text, View, Easing } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
@@ -922,7 +922,7 @@ Putting these together, you can customize the transition animation for a screen:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Bottom Tabs custom animation" snack version=7
+```js name="Bottom Tabs custom animation" snack
 import * as React from 'react';
 import { View, Text, Easing } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -980,7 +980,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Bottom Tabs custom animation" snack version=7
+```js name="Bottom Tabs custom animation" snack
 import * as React from 'react';
 import { Text, View, Easing } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';

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

@@ -18,7 +18,7 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Custom android back button" snack version=7
+```js name="Custom android back button" snack
 import * as React from 'react';
 import { Text, View, BackHandler, StyleSheet } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -131,7 +131,7 @@ const styles = StyleSheet.create({
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Custom android back button" snack version=7
+```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';

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

@@ -18,7 +18,7 @@ The `openDrawer` action can be used to open the drawer pane.
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer Actions - openDrawer" snack version=7
+```js name="Drawer Actions - openDrawer" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -103,7 +103,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer Actions - openDrawer" snack version=7
+```js name="Drawer Actions - openDrawer" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -196,7 +196,7 @@ The `closeDrawer` action can be used to close the drawer pane.
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer Actions - closeDrawer" snack version=7
+```js name="Drawer Actions - closeDrawer" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -279,7 +279,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic" >
 
-```js name="Drawer Actions - closeDrawer" snack version=7
+```js name="Drawer Actions - closeDrawer" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -370,7 +370,7 @@ The `toggleDrawer` action can be used to open the drawer pane if closed, or clos
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer Actions - toggleDrawer" snack version=7
+```js name="Drawer Actions - toggleDrawer" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -455,7 +455,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer Actions - toggleDrawer" snack version=7
+```js name="Drawer Actions - toggleDrawer" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -550,7 +550,7 @@ The `jumpTo` action can be used to jump to an existing route in the drawer navig
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer Actions - jumpTo" snack version=7
+```js name="Drawer Actions - jumpTo" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -635,7 +635,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer Actions - jumpTo" snack version=7
+```js name="Drawer Actions - jumpTo" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';

versioned_docs/version-7.x/drawer-based-navigation.md

@@ -23,7 +23,7 @@ To use this drawer navigator, import it from `@react-navigation/drawer`:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer navigation" snack version=7
+```js name="Drawer navigation" snack
 import * as React from 'react';
 import { View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -72,7 +72,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer navigation" snack version=7
+```js name="Drawer navigation" snack
 import * as React from 'react';
 import { View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -124,7 +124,7 @@ To open and close drawer, use the following helpers:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer open and close" snack version=7
+```js name="Drawer open and close" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import {
@@ -203,7 +203,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer open and close" snack version=7
+```js name="Drawer open and close" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -292,7 +292,7 @@ If you would like to toggle the drawer you call the following:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer toggle" snack version=7
+```js name="Drawer toggle" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import {
@@ -363,7 +363,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer toggle" snack version=7
+```js name="Drawer toggle" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -444,7 +444,7 @@ Each of these functions, behind the scenes, are simply dispatching actions:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigation dispatcher" snack version=7
+```js name="Navigation dispatcher" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import {
@@ -528,7 +528,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigation dispatcher" snack version=7
+```js name="Navigation dispatcher" snack
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import {

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

@@ -76,7 +76,7 @@ To use this navigator, import it from `@react-navigation/drawer`:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer Navigator" snack version=7
+```js name="Drawer Navigator" snack
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import {
@@ -131,7 +131,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer Navigator" snack version=7
+```js name="Drawer Navigator" snack
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -721,7 +721,7 @@ The `progress` object is a `SharedValue` that represents the animated position o
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Drawer animation progress" snack version=7
+```js name="Drawer animation progress" snack
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -774,7 +774,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Drawer animation progress" snack version=7
+```js name="Drawer animation progress" snack
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';

versioned_docs/version-7.x/elements.md

@@ -25,7 +25,7 @@ A component that can be used as a header. This is used by all the navigators by
 
 Usage:
 
-```js name="React Navigation Elements Header" snack version=7
+```js name="React Navigation Elements Header" snack
 import * as React from 'react';
 import { SafeAreaProviderCompat } from '@react-navigation/elements';
 import { NavigationContainer } from '@react-navigation/native';
@@ -53,7 +53,7 @@ To use the header in a navigator, you can use the `header` option in the screen
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Header with Native Stack" snack version=7
+```js name="Header with Native Stack" snack
 import * as React from 'react';
 import { Text, View, Button } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -93,7 +93,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Header with Native Stack" snack version=7
+```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';
@@ -399,7 +399,7 @@ For example, you can use this with `headerTransparent` to render a blur view to
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Header blur" snack version=7 dependencies=expo-blur
+```js name="Header blur" snack dependencies=expo-blur
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
@@ -466,7 +466,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Header blur" snack version=7 dependencies=expo-blur
+```js name="Header blur" snack dependencies=expo-blur
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';