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',