diff --git a/docusaurus.config.js b/docusaurus.config.js index 7706f228d98..9eb1caaa3c6 100755 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -116,6 +116,7 @@ module.exports = { sidebarPath: require.resolve('./sidebars.js'), editUrl: 'https://github.com/react-navigation/react-navigation.github.io/edit/source/', + remarkPlugins: [require('./src/plugins/remark-npm2yarn')], }, theme: { customCss: require.resolve('./src/css/custom.css'), diff --git a/src/plugins/remark-npm2yarn/index.js b/src/plugins/remark-npm2yarn/index.js new file mode 100644 index 00000000000..48cdca551b4 --- /dev/null +++ b/src/plugins/remark-npm2yarn/index.js @@ -0,0 +1,91 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// This is a very naive implementation of converting npm commands to yarn commands +// Works well for our use case since we only use either 'npm install', or 'npm run ' +// Its impossible to convert it right since some commands at npm are not available in yarn and vice/versa +const convertNpmToYarn = npmCode => { + // global install: 'npm i' -> 'yarn' + return ( + npmCode + .replace(/^npm i$/gm, 'yarn') + // install: 'npm install foo' -> 'yarn add foo' + .replace(/npm install/gm, 'yarn add') + // run command: 'npm run start' -> 'yarn run start' + .replace(/npm run/gm, 'yarn run') + ); +}; + +const transformNode = node => { + const npmCode = node.value; + const yarnCode = convertNpmToYarn(node.value); + return [ + { + type: 'jsx', + value: + ` +`, + }, + { + type: node.type, + lang: node.lang, + value: npmCode, + }, + { + type: 'jsx', + value: '\n', + }, + { + type: node.type, + lang: node.lang, + value: yarnCode, + }, + { + type: 'jsx', + value: '\n', + }, + ]; +}; + +const matchNode = node => node.type === 'code' && node.meta === 'npm2yarn'; +const nodeForImport = { + type: 'import', + value: + "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';", +}; + +module.exports = () => { + let transformed = false; + const transformer = node => { + if (matchNode(node)) { + transformed = true; + return transformNode(node); + } + if (Array.isArray(node.children)) { + let index = 0; + while (index < node.children.length) { + const result = transformer(node.children[index]); + if (result) { + node.children.splice(index, 1, ...result); + index += result.length; + } else { + index += 1; + } + } + } + if (node.type === 'root' && transformed) { + node.children.unshift(nodeForImport); + } + return null; + }; + return transformer; +}; \ No newline at end of file diff --git a/versioned_docs/version-1.x/getting-started.md b/versioned_docs/version-1.x/getting-started.md index d5e4d906680..3c1807da989 100644 --- a/versioned_docs/version-1.x/getting-started.md +++ b/versioned_docs/version-1.x/getting-started.md @@ -18,10 +18,8 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the `react-navigation` package in your React Native project. -```bash -yarn add react-navigation -# or with npm -# npm install --save react-navigation +```bash npm2yarn +npm install react-navigation ``` You're good to go! Continue to ["Hello React Navigation"](hello-react-navigation.md) to start writing some code. diff --git a/versioned_docs/version-1.x/redux-integration.md b/versioned_docs/version-1.x/redux-integration.md index e8cf51b0384..08e26c9b8fe 100644 --- a/versioned_docs/version-1.x/redux-integration.md +++ b/versioned_docs/version-1.x/redux-integration.md @@ -24,15 +24,9 @@ Some folks like to have their navigation state stored in the same place as the r First, you need to add the `react-navigation-redux-helpers` package to your project. - ```bash - yarn add react-navigation-redux-helpers - ``` - - or - - ```bash - npm install --save react-navigation-redux-helpers - ``` +```bash npm2yarn +npm install react-navigation-redux-helpers +``` With Redux, your app's state is defined by a reducer. Each navigation router effectively has a reducer, called `getStateForAction`. The following is a minimal example of how you might use navigators within a Redux application: diff --git a/versioned_docs/version-2.x/getting-started.md b/versioned_docs/version-2.x/getting-started.md index b0b8b2994fc..3ac2cc6f9fe 100644 --- a/versioned_docs/version-2.x/getting-started.md +++ b/versioned_docs/version-2.x/getting-started.md @@ -18,10 +18,8 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the `react-navigation` package in your React Native project. -```bash -yarn add react-navigation -# or with npm -# npm install --save react-navigation +```bash npm2yarn +npm install react-navigation ``` ## Hybrid iOS Applications (Skip for RN only projects) diff --git a/versioned_docs/version-2.x/material-bottom-tab-navigator.md b/versioned_docs/version-2.x/material-bottom-tab-navigator.md index dbdd114aaac..56d88f11c35 100644 --- a/versioned_docs/version-2.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-2.x/material-bottom-tab-navigator.md @@ -10,7 +10,7 @@ A material-design themed tab bar on the bottom of the screen that lets you switc To use this navigator, you need to install `react-navigation-material-bottom-tabs` -``` +```bash npm2yarn npm install react-navigation-material-bottom-tabs react-native-paper ``` diff --git a/versioned_docs/version-2.x/redux-integration.md b/versioned_docs/version-2.x/redux-integration.md index 5b2269b7bfc..84edff7733e 100644 --- a/versioned_docs/version-2.x/redux-integration.md +++ b/versioned_docs/version-2.x/redux-integration.md @@ -24,15 +24,9 @@ The following steps apply to `react-navigation@^2.3.0` and `react-navigation-red First, you need to add the `react-navigation-redux-helpers` package to your project. - ```bash - yarn add react-navigation-redux-helpers - ``` - - or - - ```bash - npm install --save react-navigation-redux-helpers - ``` +```bash npm2yarn +npm install react-navigation-redux-helpers +``` The following is a minimal example of how you might use navigators within a Redux application: diff --git a/versioned_docs/version-3.x/getting-started.md b/versioned_docs/version-3.x/getting-started.md index de9ee520a87..1deaa4c2038 100644 --- a/versioned_docs/version-3.x/getting-started.md +++ b/versioned_docs/version-3.x/getting-started.md @@ -18,10 +18,8 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the `react-navigation` package in your React Native project. -```bash -yarn add react-navigation -# or with npm -# npm install react-navigation +```bash npm2yarn +npm install react-navigation ``` Next, install `react-native-gesture-handler` and `react-native-reanimated`. @@ -34,10 +32,8 @@ expo install react-native-gesture-handler react-native-reanimated Otherwise, just use yarn or npm directly: -```bash -yarn add react-native-gesture-handler react-native-reanimated -# or with npm -# npm install react-native-gesture-handler react-native-reanimated +```bash npm2yarn +npm install react-native-gesture-handler react-native-reanimated ``` Next, if you are not using the Expo managed workflow then you need to link these libraries if you haven't already. The steps depends on your React Native version: diff --git a/versioned_docs/version-3.x/material-bottom-tab-navigator.md b/versioned_docs/version-3.x/material-bottom-tab-navigator.md index fdac5d06f76..1e54e4a71a8 100644 --- a/versioned_docs/version-3.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-3.x/material-bottom-tab-navigator.md @@ -10,7 +10,7 @@ A material-design themed tab bar on the bottom of the screen that lets you switc To use this navigator, you need to install `react-navigation-material-bottom-tabs` -``` +```bash npm2yarn npm install react-navigation-material-bottom-tabs react-native-paper ``` diff --git a/versioned_docs/version-4.x/bottom-tab-navigator.md b/versioned_docs/version-4.x/bottom-tab-navigator.md index 772eb21c9d1..6b03f16e432 100644 --- a/versioned_docs/version-4.x/bottom-tab-navigator.md +++ b/versioned_docs/version-4.x/bottom-tab-navigator.md @@ -8,7 +8,7 @@ A simple tab bar on the bottom of the screen that lets you switch between differ To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-tabs`](https://github.com/react-navigation/tabs). -```sh +```bash npm2yarn npm install react-navigation-tabs ``` diff --git a/versioned_docs/version-4.x/drawer-navigator.md b/versioned_docs/version-4.x/drawer-navigator.md index ee1814d1dfd..5b6a1500f79 100644 --- a/versioned_docs/version-4.x/drawer-navigator.md +++ b/versioned_docs/version-4.x/drawer-navigator.md @@ -6,7 +6,7 @@ sidebar_label: createDrawerNavigator To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-drawer`](https://github.com/react-navigation/drawer). -```sh +```bash npm2yarn npm install react-navigation-drawer ``` diff --git a/versioned_docs/version-4.x/getting-started.md b/versioned_docs/version-4.x/getting-started.md index 2e37ebdd369..cd78fff2451 100644 --- a/versioned_docs/version-4.x/getting-started.md +++ b/versioned_docs/version-4.x/getting-started.md @@ -28,7 +28,7 @@ Once the project is initialized, in the project directory run `expo install reac Install the `react-navigation` package in your React Native project. -```bash +```bash npm2yarn npm install react-navigation ``` @@ -52,7 +52,7 @@ You can now continue to ["Hello React Navigation"](hello-react-navigation.md) to In your project directory, run: -```sh +```bash npm2yarn npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view ``` @@ -90,7 +90,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve You also need to configure [jetifier](https://github.com/mikehardy/jetifier) to support dependencies using `androidx`: - ```sh + ```bash npm2yarn npm install --save-dev jetifier ``` diff --git a/versioned_docs/version-4.x/hello-react-navigation.md b/versioned_docs/version-4.x/hello-react-navigation.md index c069e93b861..28d627dafe9 100644 --- a/versioned_docs/version-4.x/hello-react-navigation.md +++ b/versioned_docs/version-4.x/hello-react-navigation.md @@ -12,7 +12,7 @@ Lets start by demonstrating the most common navigator, `createStackNavigator`. Before continuing, first install [`react-navigation-stack`](https://github.com/react-navigation/stack): -```sh +```bash npm2yarn npm install react-navigation-stack @react-native-community/masked-view ``` diff --git a/versioned_docs/version-4.x/material-bottom-tab-navigator.md b/versioned_docs/version-4.x/material-bottom-tab-navigator.md index 02f08c4f439..074c4cdce5b 100644 --- a/versioned_docs/version-4.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-4.x/material-bottom-tab-navigator.md @@ -10,7 +10,7 @@ A material-design themed tab bar on the bottom of the screen that lets you switc To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-material-bottom-tabs`](https://github.com/react-navigation/material-bottom-tabs) and [react-native-paper](https://github.com/callstack/react-native-paper). -```sh +```bash npm2yarn npm install react-navigation-material-bottom-tabs react-native-paper ``` diff --git a/versioned_docs/version-4.x/material-top-tab-navigator.md b/versioned_docs/version-4.x/material-top-tab-navigator.md index 3b607cae238..1dd42b4becd 100644 --- a/versioned_docs/version-4.x/material-top-tab-navigator.md +++ b/versioned_docs/version-4.x/material-top-tab-navigator.md @@ -8,7 +8,7 @@ A material-design themed tab bar on the top of the screen that lets you switch b To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-tabs`](https://github.com/react-navigation/tabs). -```sh +```bash npm2yarn npm install react-navigation-tabs ``` diff --git a/versioned_docs/version-4.x/stack-navigator-1.0.md b/versioned_docs/version-4.x/stack-navigator-1.0.md index 2473b8a5659..0ecb2e80512 100644 --- a/versioned_docs/version-4.x/stack-navigator-1.0.md +++ b/versioned_docs/version-4.x/stack-navigator-1.0.md @@ -10,7 +10,7 @@ By default the stack navigator is configured to have the familiar iOS and Androi To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-stack`](https://github.com/react-navigation/stack/tree/1.0). -```sh +```bash npm2yarn npm install react-navigation-stack@^1.10.3 ``` diff --git a/versioned_docs/version-4.x/stack-navigator.md b/versioned_docs/version-4.x/stack-navigator.md index d2dfe455d48..4e343f9d91c 100644 --- a/versioned_docs/version-4.x/stack-navigator.md +++ b/versioned_docs/version-4.x/stack-navigator.md @@ -10,7 +10,7 @@ By default the stack navigator is configured to have the familiar iOS and Androi To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-stack`](https://github.com/react-navigation/stack). -```sh +```bash npm2yarn npm install react-navigation-stack @react-native-community/masked-view ``` diff --git a/versioned_docs/version-4.x/troubleshooting.md b/versioned_docs/version-4.x/troubleshooting.md index 7f1f15ffada..40c7fb7bddf 100644 --- a/versioned_docs/version-4.x/troubleshooting.md +++ b/versioned_docs/version-4.x/troubleshooting.md @@ -31,7 +31,7 @@ npx react-native start --reset-cache If the module points to an npm package (i.e. the name of the module doesn't with `./`), then it's probably due to a missing peer dependency. To fix this, install the dependency in your project: -```sh +```bash npm2yarn npm install name-of-the-module ``` diff --git a/versioned_docs/version-4.x/upgrading-from-3.x.md b/versioned_docs/version-4.x/upgrading-from-3.x.md index cd3c6ab705b..ea6f8018179 100644 --- a/versioned_docs/version-4.x/upgrading-from-3.x.md +++ b/versioned_docs/version-4.x/upgrading-from-3.x.md @@ -14,7 +14,7 @@ First, we need to install the `react-navigation` package along with the various To install them, run: -```sh +```bash npm2yarn npm install react-navigation react-navigation-stack@^1.7.3 react-navigation-tabs@^1.2.0 react-navigation-drawer@^1.4.0 ``` @@ -144,7 +144,7 @@ public class MainActivity extends ReactActivity { To upgrade `react-navigation-tabs`, run: -```sh +```bash npm2yarn npm install react-navigation-tabs ``` @@ -165,7 +165,7 @@ This version upgrades [`react-native-tab-view`](https://github.com/react-native- To upgrade `react-navigation-drawer`, run: -```sh +```bash npm2yarn npm install react-navigation-drawer ``` @@ -175,7 +175,7 @@ This version upgrades now uses the [`react-native-reanimated`](https://github.co To upgrade `react-navigation-stack`, run: -```sh +```bash npm2yarn npm install react-navigation-stack ``` @@ -189,7 +189,7 @@ From this version, all state changes have an animation, including `replace` and The new version requires 2 new peer dependencies. To install them in your project, run: -```sh +```bash npm2yarn npm install react-native-safe-area-context @react-native-community/masked-view ``` diff --git a/versioned_docs/version-5.x/bottom-tab-navigator.md b/versioned_docs/version-5.x/bottom-tab-navigator.md index 5e651ffb8fd..50d75597bee 100755 --- a/versioned_docs/version-5.x/bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/bottom-tab-navigator.md @@ -14,7 +14,7 @@ A simple tab bar on the bottom of the screen that lets you switch between differ To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs): -```sh +```bash npm2yarn npm install @react-navigation/bottom-tabs ``` diff --git a/versioned_docs/version-5.x/compatibility.md b/versioned_docs/version-5.x/compatibility.md index fa9ae9d4045..a5ec09d9b3d 100755 --- a/versioned_docs/version-5.x/compatibility.md +++ b/versioned_docs/version-5.x/compatibility.md @@ -10,7 +10,7 @@ React Navigation 5 has a completely new API, so our old code using React Navigat To use the compatibility layer, we need to install [`@react-navigation/compat`](https://github.com/react-navigation/react-navigation/tree/master/packages/compat): -```sh +```bash npm2yarn npm install @react-navigation/native @react-navigation/compat ``` diff --git a/versioned_docs/version-5.x/drawer-based-navigation.md b/versioned_docs/version-5.x/drawer-based-navigation.md index fb8503a4a1e..fa8df78415e 100755 --- a/versioned_docs/version-5.x/drawer-based-navigation.md +++ b/versioned_docs/version-5.x/drawer-based-navigation.md @@ -14,7 +14,7 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Before continuing, first install [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer): -```sh +```bash npm2yarn npm install @react-navigation/drawer ``` diff --git a/versioned_docs/version-5.x/drawer-navigator.md b/versioned_docs/version-5.x/drawer-navigator.md index 4c07cf9d0ea..5f3eed051d7 100755 --- a/versioned_docs/version-5.x/drawer-navigator.md +++ b/versioned_docs/version-5.x/drawer-navigator.md @@ -14,7 +14,7 @@ Component that renders a navigation drawer which can be opened and closed via ge To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer): -```sh +```bash npm2yarn npm install @react-navigation/drawer ``` diff --git a/versioned_docs/version-5.x/getting-started.md b/versioned_docs/version-5.x/getting-started.md index 3c32a919358..a211ffd62c2 100755 --- a/versioned_docs/version-5.x/getting-started.md +++ b/versioned_docs/version-5.x/getting-started.md @@ -12,7 +12,7 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the required packages in your React Native project: -```sh +```bash npm2yarn npm install @react-navigation/native ``` @@ -36,7 +36,7 @@ You can now continue to ["Hello React Navigation"](hello-react-navigation.md) to In your project directory, run: -```sh +```bash npm2yarn npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view ``` diff --git a/versioned_docs/version-5.x/hello-react-navigation.md b/versioned_docs/version-5.x/hello-react-navigation.md index b4927b192bd..d1cae36f031 100755 --- a/versioned_docs/version-5.x/hello-react-navigation.md +++ b/versioned_docs/version-5.x/hello-react-navigation.md @@ -14,7 +14,7 @@ Lets start by demonstrating the most common navigator, `createStackNavigator`. The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library. To use the stack navigator, we need to install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/master/packages/stack) : -```sh +```bash npm2yarn npm install @react-navigation/stack ``` diff --git a/versioned_docs/version-5.x/material-bottom-tab-navigator.md b/versioned_docs/version-5.x/material-bottom-tab-navigator.md index 8bdb14aa34d..79ed4c1454d 100755 --- a/versioned_docs/version-5.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/material-bottom-tab-navigator.md @@ -12,7 +12,7 @@ This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-pap To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/material-bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs): -```sh +```bash npm2yarn npm install @react-navigation/material-bottom-tabs react-native-paper ``` diff --git a/versioned_docs/version-5.x/material-top-tab-navigator.md b/versioned_docs/version-5.x/material-top-tab-navigator.md index 6d250bb570f..972f16c03e9 100755 --- a/versioned_docs/version-5.x/material-top-tab-navigator.md +++ b/versioned_docs/version-5.x/material-top-tab-navigator.md @@ -16,7 +16,7 @@ This wraps [`react-native-tab-view`](https://github.com/react-native-community/r To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/material-top-tabs`](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs): -```sh +```bash npm2yarn npm install @react-navigation/material-top-tabs react-native-tab-view ``` diff --git a/versioned_docs/version-5.x/native-stack-navigator.md b/versioned_docs/version-5.x/native-stack-navigator.md index 82d2287d566..0339b9bc076 100755 --- a/versioned_docs/version-5.x/native-stack-navigator.md +++ b/versioned_docs/version-5.x/native-stack-navigator.md @@ -14,7 +14,7 @@ This navigator uses native navigation primitives (`UINavigationController` on iO To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/native-stack`](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack): -```sh +```bash npm2yarn npm install @react-navigation/native-stack ``` diff --git a/versioned_docs/version-5.x/stack-navigator.md b/versioned_docs/version-5.x/stack-navigator.md index f7151bb4809..3634349a8cc 100755 --- a/versioned_docs/version-5.x/stack-navigator.md +++ b/versioned_docs/version-5.x/stack-navigator.md @@ -16,7 +16,7 @@ By default the stack navigator is configured to have the familiar iOS and Androi To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/master/packages/stack): -```sh +```bash npm2yarn npm install @react-navigation/stack ``` diff --git a/versioned_docs/version-5.x/tab-based-navigation.md b/versioned_docs/version-5.x/tab-based-navigation.md index b27e455aba5..648db177bbb 100755 --- a/versioned_docs/version-5.x/tab-based-navigation.md +++ b/versioned_docs/version-5.x/tab-based-navigation.md @@ -10,7 +10,7 @@ This guide covers [`createBottomTabNavigator`](bottom-tab-navigator.md). You may Before continuing, first install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs): -```sh +```bash npm2yarn npm install @react-navigation/bottom-tabs ``` diff --git a/versioned_docs/version-5.x/troubleshooting.md b/versioned_docs/version-5.x/troubleshooting.md index a9d3b625a3d..e9625a5c608 100755 --- a/versioned_docs/version-5.x/troubleshooting.md +++ b/versioned_docs/version-5.x/troubleshooting.md @@ -32,7 +32,7 @@ npx react-native start --reset-cache If the module points to an npm package (i.e. the name of the module doesn't with `./`), then it's probably due to a missing peer dependency. To fix this, install the dependency in your project: -```sh +```bash npm2yarn npm install name-of-the-module ```