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 --save foo' -> 'yarn add foo'
+      .replace(/npm install --save/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 --save 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 --save 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 --save react-navigation
 ```
 
 ## Hybrid iOS Applications (Skip for RN only projects)

versioned_docs/version-2.x/material-bottom-tab-navigator.md

@@ -10,8 +10,8 @@ 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`
 
-```
-npm install react-navigation-material-bottom-tabs react-native-paper
+```bash npm2yarn
+npm install --save react-navigation-material-bottom-tabs react-native-paper
 ```
 
 This API also requires that you install `react-native-vector-icons`! If you are using Expo, it will just work out of the box. Otherwise, [follow these installation instructions](https://github.com/oblador/react-native-vector-icons#installation).

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 --save 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 --save 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 --save 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,8 +10,8 @@ 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`
 
-```
-npm install react-navigation-material-bottom-tabs react-native-paper
+```bash npm2yarn
+npm install --save react-navigation-material-bottom-tabs react-native-paper
 ```
 
 This API also requires that you install `react-native-vector-icons`! If you are using Expo, it will just work out of the box. Otherwise, [follow these installation instructions](https://github.com/oblador/react-native-vector-icons#installation).

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

@@ -8,8 +8,8 @@ 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
-npm install react-navigation-tabs
+```bash npm2yarn
+npm install --save react-navigation-tabs
 ```
 
 ## API

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

@@ -6,8 +6,8 @@ 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
-npm install react-navigation-drawer
+```bash npm2yarn
+npm install --save react-navigation-drawer
 ```
 
 ## API

versioned_docs/version-4.x/getting-started.md

@@ -28,8 +28,8 @@ Once the project is initialized, in the project directory run `expo install reac
 
 Install the `react-navigation` package in your React Native project.
 
-```bash
-npm install react-navigation
+```bash npm2yarn
+npm install --save react-navigation
 ```
 
 React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.
@@ -52,8 +52,8 @@ You can now continue to ["Hello React Navigation"](hello-react-navigation.md) to
 
 In your project directory, run:
 
-```sh
-npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+```bash npm2yarn
+npm install --save react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 ```
 
 > Note: You might get warnings related to peer dependencies after installation. They are usually caused my incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
@@ -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,8 +12,8 @@ Lets start by demonstrating the most common navigator, `createStackNavigator`.
 
 Before continuing, first install [`react-navigation-stack`](https://github.com/react-navigation/stack):
 
-```sh
-npm install react-navigation-stack @react-native-community/masked-view
+```bash npm2yarn
+npm install --save react-navigation-stack @react-native-community/masked-view
 ```
 
 ## Creating a stack navigator

versioned_docs/version-4.x/material-bottom-tab-navigator.md

@@ -10,8 +10,8 @@ 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
-npm install react-navigation-material-bottom-tabs react-native-paper
+```bash npm2yarn
+npm install --save react-navigation-material-bottom-tabs react-native-paper
 ```
 
 This API also requires that you install `react-native-vector-icons`! If you are using Expo (managed or bare), run `expo install @expo/vector-icons` instead. Otherwise, [follow these installation instructions](https://github.com/oblador/react-native-vector-icons#installation).

versioned_docs/version-4.x/material-top-tab-navigator.md

@@ -8,8 +8,8 @@ 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
-npm install react-navigation-tabs
+```bash npm2yarn
+npm install --save react-navigation-tabs
 ```
 
 ## API

versioned_docs/version-4.x/stack-navigator-1.0.md

@@ -10,8 +10,8 @@ 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
-npm install react-navigation-stack@^1.10.3
+```bash npm2yarn
+npm install --save react-navigation-stack@^1.10.3
 ```
 
 ## API

versioned_docs/version-4.x/stack-navigator.md

@@ -10,8 +10,8 @@ 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
-npm install react-navigation-stack @react-native-community/masked-view
+```bash npm2yarn
+npm install --save react-navigation-stack @react-native-community/masked-view
 ```
 
 ## API Definition

versioned_docs/version-4.x/troubleshooting.md

@@ -31,8 +31,8 @@ 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
-npm install name-of-the-module
+```bash npm2yarn
+npm install --save name-of-the-module
 ```
 
 ## I'm getting an error "null is not an object (evaluating 'RNGestureHandlerModule.default.Direction')"

versioned_docs/version-4.x/upgrading-from-3.x.md

@@ -14,8 +14,8 @@ First, we need to install the `react-navigation` package along with the various
 
 To install them, run:
 
-```sh
-npm install react-navigation react-navigation-stack@^1.7.3 react-navigation-tabs@^1.2.0 react-navigation-drawer@^1.4.0
+```bash npm2yarn
+npm install --save react-navigation react-navigation-stack@^1.7.3 react-navigation-tabs@^1.2.0 react-navigation-drawer@^1.4.0
 ```
 
 This will install the versions compatible with your code if you were using `react-navigation@3.x`, so you wouldn't need any more changes beyond changing the imports.
@@ -144,8 +144,8 @@ public class MainActivity extends ReactActivity {
 
 To upgrade `react-navigation-tabs`, run:
 
-```sh
-npm install react-navigation-tabs
+```bash npm2yarn
+npm install --save react-navigation-tabs
 ```
 
 This version upgrades [`react-native-tab-view`](https://github.com/react-native-community/react-native-tab-view) to 2.x. As a result, the animations in `createMaterialTopTabNavigator` now use the [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) library.
@@ -165,8 +165,8 @@ This version upgrades [`react-native-tab-view`](https://github.com/react-native-
 
 To upgrade `react-navigation-drawer`, run:
 
-```sh
-npm install react-navigation-drawer
+```bash npm2yarn
+npm install --save react-navigation-drawer
 ```
 
 This version upgrades now uses the [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) library for animations. This means, if you're using the `drawerProgress` value, you'll need to migrate your code to use `Animated` from `react-native-reanimated`.
@@ -175,8 +175,8 @@ This version upgrades now uses the [`react-native-reanimated`](https://github.co
 
 To upgrade `react-navigation-stack`, run:
 
-```sh
-npm install react-navigation-stack
+```bash npm2yarn
+npm install --save react-navigation-stack
 ```
 
 In this release, we have moved several options into `navigationOptions` so that you can configure options per screen instead of per navigator. This lets you do things like customize animations for a particular screen, set options based on `screenProps` etc. Usage of built-in components such as `Header` and `HeaderBackButton` has also been simplified. Other changes are made to improve consistency within the API.
@@ -189,8 +189,8 @@ 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
-npm install react-native-safe-area-context @react-native-community/masked-view
+```bash npm2yarn
+npm install --save react-native-safe-area-context @react-native-community/masked-view
 ```
 
 ##### Stack Navigator config

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

@@ -14,8 +14,8 @@ 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
-npm install @react-navigation/bottom-tabs
+```bash npm2yarn
+npm install --save @react-navigation/bottom-tabs
 ```
 
 ## API Definition