Skip to content

Commit 8803106

Browse files
satya164satya164
committed
Automatically detect React Navigation version for examples
1 parent bb7ba79 commit 8803106

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+223
-222
lines changed

‎src/components/Pre.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useActiveVersion } from '@docusaurus/plugin-content-docs/client';
12
import { useColorMode } from '@docusaurus/theme-common';
23
import { usePluginData } from '@docusaurus/useGlobalData';
34
import MDXPre from '@theme-original/MDXComponents/Pre';
@@ -7,13 +8,13 @@ export default function Pre({
78
children,
89
'data-name': name,
910
'data-snack': snack,
10-
'data-version': version,
1111
'data-dependencies': deps,
1212
'data-lang': lang,
1313
...rest
1414
}) {
1515
const { colorMode } = useColorMode();
1616
const { versions } = usePluginData('react-navigation-versions');
17+
const { name: version } = useActiveVersion();
1718

1819
const child = React.Children.only(children);
1920

‎src/plugins/react-navigation-versions.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default function friendsPlugin(context, options) {
33
name: 'react-navigation-versions',
44
async contentLoaded({ content, actions }) {
55
const queries = {
6-
7: {
6+
'7.x': {
77
tag: 'next',
88
packages: [
99
'@react-navigation/bottom-tabs',

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function useIsSignedOut() {
6868

6969
We'll discuss how to expose the context value later.
7070

71-
```js name="Customizing tabs appearance" snack version=7
71+
```js name="Customizing tabs appearance" snack
7272
import * as React from 'react';
7373
import { View } from 'react-native';
7474
import { createStaticNavigation } from '@react-navigation/native';
@@ -150,7 +150,7 @@ function SignUpScreen() {
150150

151151
For example:
152152

153-
```js name="Customizing tabs appearance" snack version=7
153+
```js name="Customizing tabs appearance" snack
154154
import * as React from 'react';
155155
import { View } from 'react-native';
156156
import { NavigationContainer } from '@react-navigation/native';
@@ -451,7 +451,7 @@ So our component will look like this:
451451
<Tabs groupId="config" queryString="config">
452452
<TabItem value="static" label="Static" default>
453453

454-
```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store
454+
```js name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store
455455
// codeblock-focus-start
456456
import * as React from 'react';
457457
import * as SecureStore from 'expo-secure-store';
@@ -639,7 +639,7 @@ const Navigation = createStaticNavigation(RootStack);
639639
</TabItem>
640640
<TabItem value="dynamic" label="Dynamic">
641641

642-
```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store
642+
```js name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store
643643
// codeblock-focus-start
644644
import * as React from 'react';
645645
import * as SecureStore from 'expo-secure-store';

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ To use this navigator, import it from `@react-navigation/bottom-tabs`:
2525
<Tabs groupId="config" queryString="config">
2626
<TabItem value="static" label="Static" default>
2727

28-
```js name="Bottom Tab Navigator" snack version=7
28+
```js name="Bottom Tab Navigator" snack
2929
import * as React from 'react';
3030
import { Text, View } from 'react-native';
3131
import {
@@ -80,7 +80,7 @@ export default function App() {
8080
</TabItem>
8181
<TabItem value="dynamic" label="Dynamic">
8282

83-
```js name="Bottom Tab Navigator" snack version=7
83+
```js name="Bottom Tab Navigator" snack
8484
import * as React from 'react';
8585
import { Text, View } from 'react-native';
8686
import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -669,7 +669,7 @@ Supported values for `animation` are:
669669
<Tabs groupId="config" queryString="config">
670670
<TabItem value="static" label="Static" default>
671671
672-
```js name="Bottom Tabs animation" snack version=7
672+
```js name="Bottom Tabs animation" snack
673673
import * as React from 'react';
674674
import { View, Text, Easing } from 'react-native';
675675
import { createStaticNavigation } from '@react-navigation/native';
@@ -715,7 +715,7 @@ export default function App() {
715715
</TabItem>
716716
<TabItem value="dynamic" label="Dynamic">
717717
718-
```js name="Bottom Tabs animation" snack version=7
718+
```js name="Bottom Tabs animation" snack
719719
import * as React from 'react';
720720
import { Text, View, Easing } from 'react-native';
721721
import { NavigationContainer } from '@react-navigation/native';
@@ -922,7 +922,7 @@ Putting these together, you can customize the transition animation for a screen:
922922
<Tabs groupId="config" queryString="config">
923923
<TabItem value="static" label="Static" default>
924924
925-
```js name="Bottom Tabs custom animation" snack version=7
925+
```js name="Bottom Tabs custom animation" snack
926926
import * as React from 'react';
927927
import { View, Text, Easing } from 'react-native';
928928
import { createStaticNavigation } from '@react-navigation/native';
@@ -980,7 +980,7 @@ export default function App() {
980980
</TabItem>
981981
<TabItem value="dynamic" label="Dynamic">
982982
983-
```js name="Bottom Tabs custom animation" snack version=7
983+
```js name="Bottom Tabs custom animation" snack
984984
import * as React from 'react';
985985
import { Text, View, Easing } from 'react-native';
986986
import { NavigationContainer } from '@react-navigation/native';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and
1818
<Tabs groupId="config" queryString="config">
1919
<TabItem value="static" label="Static" default>
2020

21-
```js name="Custom android back button" snack version=7
21+
```js name="Custom android back button" snack
2222
import * as React from 'react';
2323
import { Text, View, BackHandler, StyleSheet } from 'react-native';
2424
import { createStaticNavigation } from '@react-navigation/native';
@@ -131,7 +131,7 @@ const styles = StyleSheet.create({
131131
</TabItem>
132132
<TabItem value="dynamic" label="Dynamic">
133133

134-
```js name="Custom android back button" snack version=7
134+
```js name="Custom android back button" snack
135135
import * as React from 'react';
136136
import { Text, View, BackHandler, StyleSheet } from 'react-native';
137137
import { NavigationContainer } from '@react-navigation/native';

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The `openDrawer` action can be used to open the drawer pane.
1818
<Tabs groupId="config" queryString="config">
1919
<TabItem value="static" label="Static" default>
2020

21-
```js name="Drawer Actions - openDrawer" snack version=7
21+
```js name="Drawer Actions - openDrawer" snack
2222
import * as React from 'react';
2323
import { View, Text } from 'react-native';
2424
import { Button } from '@react-navigation/elements';
@@ -103,7 +103,7 @@ export default function App() {
103103
</TabItem>
104104
<TabItem value="dynamic" label="Dynamic">
105105
106-
```js name="Drawer Actions - openDrawer" snack version=7
106+
```js name="Drawer Actions - openDrawer" snack
107107
import * as React from 'react';
108108
import { View, Text } from 'react-native';
109109
import { Button } from '@react-navigation/elements';
@@ -196,7 +196,7 @@ The `closeDrawer` action can be used to close the drawer pane.
196196
<Tabs groupId="config" queryString="config">
197197
<TabItem value="static" label="Static" default>
198198
199-
```js name="Drawer Actions - closeDrawer" snack version=7
199+
```js name="Drawer Actions - closeDrawer" snack
200200
import * as React from 'react';
201201
import { View, Text } from 'react-native';
202202
import { Button } from '@react-navigation/elements';
@@ -279,7 +279,7 @@ export default function App() {
279279
</TabItem>
280280
<TabItem value="dynamic" label="Dynamic" >
281281
282-
```js name="Drawer Actions - closeDrawer" snack version=7
282+
```js name="Drawer Actions - closeDrawer" snack
283283
import * as React from 'react';
284284
import { View, Text } from 'react-native';
285285
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
370370
<Tabs groupId="config" queryString="config">
371371
<TabItem value="static" label="Static" default>
372372
373-
```js name="Drawer Actions - toggleDrawer" snack version=7
373+
```js name="Drawer Actions - toggleDrawer" snack
374374
import * as React from 'react';
375375
import { View, Text } from 'react-native';
376376
import { Button } from '@react-navigation/elements';
@@ -455,7 +455,7 @@ export default function App() {
455455
</TabItem>
456456
<TabItem value="dynamic" label="Dynamic">
457457
458-
```js name="Drawer Actions - toggleDrawer" snack version=7
458+
```js name="Drawer Actions - toggleDrawer" snack
459459
import * as React from 'react';
460460
import { View, Text } from 'react-native';
461461
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
550550
<Tabs groupId="config" queryString="config">
551551
<TabItem value="static" label="Static" default>
552552
553-
```js name="Drawer Actions - jumpTo" snack version=7
553+
```js name="Drawer Actions - jumpTo" snack
554554
import * as React from 'react';
555555
import { View, Text } from 'react-native';
556556
import { Button } from '@react-navigation/elements';
@@ -635,7 +635,7 @@ export default function App() {
635635
</TabItem>
636636
<TabItem value="dynamic" label="Dynamic">
637637
638-
```js name="Drawer Actions - jumpTo" snack version=7
638+
```js name="Drawer Actions - jumpTo" snack
639639
import * as React from 'react';
640640
import { View, Text } from 'react-native';
641641
import { Button } from '@react-navigation/elements';

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ To use this drawer navigator, import it from `@react-navigation/drawer`:
2323
<Tabs groupId="config" queryString="config">
2424
<TabItem value="static" label="Static" default>
2525

26-
```js name="Drawer navigation" snack version=7
26+
```js name="Drawer navigation" snack
2727
import * as React from 'react';
2828
import { View } from 'react-native';
2929
import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -72,7 +72,7 @@ export default function App() {
7272
</TabItem>
7373
<TabItem value="dynamic" label="Dynamic">
7474

75-
```js name="Drawer navigation" snack version=7
75+
```js name="Drawer navigation" snack
7676
import * as React from 'react';
7777
import { View } from 'react-native';
7878
import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -124,7 +124,7 @@ To open and close drawer, use the following helpers:
124124
<Tabs groupId="config" queryString="config">
125125
<TabItem value="static" label="Static" default>
126126

127-
```js name="Drawer open and close" snack version=7
127+
```js name="Drawer open and close" snack
128128
import * as React from 'react';
129129
import { View, Text } from 'react-native';
130130
import {
@@ -203,7 +203,7 @@ export default function App() {
203203
</TabItem>
204204
<TabItem value="dynamic" label="Dynamic">
205205

206-
```js name="Drawer open and close" snack version=7
206+
```js name="Drawer open and close" snack
207207
import * as React from 'react';
208208
import { View, Text } from 'react-native';
209209
import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -292,7 +292,7 @@ If you would like to toggle the drawer you call the following:
292292
<Tabs groupId="config" queryString="config">
293293
<TabItem value="static" label="Static" default>
294294

295-
```js name="Drawer toggle" snack version=7
295+
```js name="Drawer toggle" snack
296296
import * as React from 'react';
297297
import { View, Text } from 'react-native';
298298
import {
@@ -363,7 +363,7 @@ export default function App() {
363363
</TabItem>
364364
<TabItem value="dynamic" label="Dynamic">
365365

366-
```js name="Drawer toggle" snack version=7
366+
```js name="Drawer toggle" snack
367367
import * as React from 'react';
368368
import { View, Text } from 'react-native';
369369
import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -444,7 +444,7 @@ Each of these functions, behind the scenes, are simply dispatching actions:
444444
<Tabs groupId="config" queryString="config">
445445
<TabItem value="static" label="Static" default>
446446

447-
```js name="Navigation dispatcher" snack version=7
447+
```js name="Navigation dispatcher" snack
448448
import * as React from 'react';
449449
import { View, Text } from 'react-native';
450450
import {
@@ -528,7 +528,7 @@ export default function App() {
528528
</TabItem>
529529
<TabItem value="dynamic" label="Dynamic">
530530

531-
```js name="Navigation dispatcher" snack version=7
531+
```js name="Navigation dispatcher" snack
532532
import * as React from 'react';
533533
import { View, Text } from 'react-native';
534534
import {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ To use this navigator, import it from `@react-navigation/drawer`:
7676
<Tabs groupId="config" queryString="config">
7777
<TabItem value="static" label="Static" default>
7878

79-
```js name="Drawer Navigator" snack version=7
79+
```js name="Drawer Navigator" snack
8080
import * as React from 'react';
8181
import { Text, View } from 'react-native';
8282
import {
@@ -131,7 +131,7 @@ export default function App() {
131131
</TabItem>
132132
<TabItem value="dynamic" label="Dynamic">
133133

134-
```js name="Drawer Navigator" snack version=7
134+
```js name="Drawer Navigator" snack
135135
import * as React from 'react';
136136
import { Text, View } from 'react-native';
137137
import { NavigationContainer, useNavigation } from '@react-navigation/native';
@@ -721,7 +721,7 @@ The `progress` object is a `SharedValue` that represents the animated position o
721721
<Tabs groupId="config" queryString="config">
722722
<TabItem value="static" label="Static" default>
723723

724-
```js name="Drawer animation progress" snack version=7
724+
```js name="Drawer animation progress" snack
725725
import * as React from 'react';
726726
import { Text, View } from 'react-native';
727727
import { createStaticNavigation } from '@react-navigation/native';
@@ -774,7 +774,7 @@ export default function App() {
774774
</TabItem>
775775
<TabItem value="dynamic" label="Dynamic">
776776

777-
```js name="Drawer animation progress" snack version=7
777+
```js name="Drawer animation progress" snack
778778
import * as React from 'react';
779779
import { Text, View } from 'react-native';
780780
import { NavigationContainer } from '@react-navigation/native';

‎versioned_docs/version-7.x/elements.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ A component that can be used as a header. This is used by all the navigators by
2525

2626
Usage:
2727

28-
```js name="React Navigation Elements Header" snack version=7
28+
```js name="React Navigation Elements Header" snack
2929
import * as React from 'react';
3030
import { SafeAreaProviderCompat } from '@react-navigation/elements';
3131
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
5353
<Tabs groupId="config" queryString="config">
5454
<TabItem value="static" label="Static" default>
5555

56-
```js name="Header with Native Stack" snack version=7
56+
```js name="Header with Native Stack" snack
5757
import * as React from 'react';
5858
import { Text, View, Button } from 'react-native';
5959
import { createStaticNavigation } from '@react-navigation/native';
@@ -93,7 +93,7 @@ export default function App() {
9393
</TabItem>
9494
<TabItem value="dynamic" label="Dynamic">
9595

96-
```js name="Header with Native Stack" snack version=7
96+
```js name="Header with Native Stack" snack
9797
import * as React from 'react';
9898
import { Text, View, Button } from 'react-native';
9999
import { NavigationContainer } from '@react-navigation/native';
@@ -399,7 +399,7 @@ For example, you can use this with `headerTransparent` to render a blur view to
399399
<Tabs groupId="config" queryString="config">
400400
<TabItem value="static" label="Static" default>
401401

402-
```js name="Header blur" snack version=7 dependencies=expo-blur
402+
```js name="Header blur" snack dependencies=expo-blur
403403
import * as React from 'react';
404404
import { View, StyleSheet } from 'react-native';
405405
import {
@@ -466,7 +466,7 @@ export default App;
466466
</TabItem>
467467
<TabItem value="dynamic" label="Dynamic">
468468

469-
```js name="Header blur" snack version=7 dependencies=expo-blur
469+
```js name="Header blur" snack dependencies=expo-blur
470470
import * as React from 'react';
471471
import { View, StyleSheet } from 'react-native';
472472
import { NavigationContainer, useNavigation } from '@react-navigation/native';

0 commit comments

Comments
 (0)