feat: improve the npm/yarn installation instruction

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

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 <something>'
+// 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:
+        `<Tabs defaultValue="npm" ` +
+        `values={[
+    { label: 'npm', value: 'npm', },
+    { label: 'Yarn', value: 'yarn', },
+  ]}
+>
+<TabItem value="npm">`,
+    },
+    {
+      type: node.type,
+      lang: node.lang,
+      value: npmCode,
+    },
+    {
+      type: 'jsx',
+      value: '</TabItem>\n<TabItem value="yarn">',
+    },
+    {
+      type: node.type,
+      lang: node.lang,
+      value: yarnCode,
+    },
+    {
+      type: 'jsx',
+      value: '</TabItem>\n</Tabs>',
+    },
+  ];
+};
+
+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;
+};

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.

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:
 

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)

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
 ```
 

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:
 

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:

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
 ```
 

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
 ```
 

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
 ```
 

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
   ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```
 

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
 ```