From eab5b016d0077c75605b7c235509dd30e7820f8c Mon Sep 17 00:00:00 2001 From: Erivelton Elias Date: Wed, 26 Feb 2020 09:07:44 -0300 Subject: [PATCH 1/2] feat: improve the npm/yarn installation --- docusaurus.config.js | 1 + src/plugins/remark-npm2yarn/index.js | 91 +++++++++++++++++++ versioned_docs/version-1.x/getting-started.md | 6 +- .../version-1.x/redux-integration.md | 12 +-- versioned_docs/version-2.x/getting-started.md | 6 +- .../material-bottom-tab-navigator.md | 4 +- .../version-2.x/redux-integration.md | 12 +-- versioned_docs/version-3.x/getting-started.md | 12 +-- .../material-bottom-tab-navigator.md | 4 +- .../version-4.x/bottom-tab-navigator.md | 4 +- .../version-4.x/drawer-navigator.md | 4 +- versioned_docs/version-4.x/getting-started.md | 10 +- .../version-4.x/hello-react-navigation.md | 4 +- .../material-bottom-tab-navigator.md | 4 +- .../version-4.x/material-top-tab-navigator.md | 4 +- .../version-4.x/stack-navigator-1.0.md | 4 +- versioned_docs/version-4.x/stack-navigator.md | 4 +- versioned_docs/version-4.x/troubleshooting.md | 4 +- .../version-4.x/upgrading-from-3.x.md | 20 ++-- .../version-5.x/bottom-tab-navigator.md | 4 +- versioned_docs/version-5.x/compatibility.md | 4 +- .../version-5.x/drawer-based-navigation.md | 4 +- .../version-5.x/drawer-navigator.md | 4 +- versioned_docs/version-5.x/getting-started.md | 8 +- .../version-5.x/hello-react-navigation.md | 4 +- .../material-bottom-tab-navigator.md | 4 +- .../version-5.x/material-top-tab-navigator.md | 4 +- .../version-5.x/native-stack-navigator.md | 4 +- versioned_docs/version-5.x/stack-navigator.md | 4 +- .../version-5.x/tab-based-navigation.md | 4 +- versioned_docs/version-5.x/troubleshooting.md | 4 +- 31 files changed, 167 insertions(+), 95 deletions(-) create mode 100644 src/plugins/remark-npm2yarn/index.js 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..4cb2d13a010 --- /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 --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: + ` +`, + }, + { + 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..330fcd92797 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 --save 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..ffec183b42b 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 --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: diff --git a/versioned_docs/version-2.x/getting-started.md b/versioned_docs/version-2.x/getting-started.md index b0b8b2994fc..dbe602b73c1 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 --save 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..3cd127bdb62 100644 --- a/versioned_docs/version-2.x/material-bottom-tab-navigator.md +++ b/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). diff --git a/versioned_docs/version-2.x/redux-integration.md b/versioned_docs/version-2.x/redux-integration.md index 5b2269b7bfc..b5267985bbc 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 --save 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..4552ec4dd86 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 --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: 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..3cb062c5321 100644 --- a/versioned_docs/version-3.x/material-bottom-tab-navigator.md +++ b/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). diff --git a/versioned_docs/version-4.x/bottom-tab-navigator.md b/versioned_docs/version-4.x/bottom-tab-navigator.md index 772eb21c9d1..8c862bdf11c 100644 --- a/versioned_docs/version-4.x/bottom-tab-navigator.md +++ b/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 diff --git a/versioned_docs/version-4.x/drawer-navigator.md b/versioned_docs/version-4.x/drawer-navigator.md index ee1814d1dfd..8bfcd9b1c12 100644 --- a/versioned_docs/version-4.x/drawer-navigator.md +++ b/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 diff --git a/versioned_docs/version-4.x/getting-started.md b/versioned_docs/version-4.x/getting-started.md index 2e37ebdd369..ea6a072f2e8 100644 --- a/versioned_docs/version-4.x/getting-started.md +++ b/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 ``` diff --git a/versioned_docs/version-4.x/hello-react-navigation.md b/versioned_docs/version-4.x/hello-react-navigation.md index c069e93b861..cd1b85c7a44 100644 --- a/versioned_docs/version-4.x/hello-react-navigation.md +++ b/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 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..762dbbd8997 100644 --- a/versioned_docs/version-4.x/material-bottom-tab-navigator.md +++ b/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). 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..f8988717400 100644 --- a/versioned_docs/version-4.x/material-top-tab-navigator.md +++ b/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 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..10c40496572 100644 --- a/versioned_docs/version-4.x/stack-navigator-1.0.md +++ b/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 diff --git a/versioned_docs/version-4.x/stack-navigator.md b/versioned_docs/version-4.x/stack-navigator.md index d2dfe455d48..17c2baa8edd 100644 --- a/versioned_docs/version-4.x/stack-navigator.md +++ b/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 diff --git a/versioned_docs/version-4.x/troubleshooting.md b/versioned_docs/version-4.x/troubleshooting.md index 7f1f15ffada..a292cfbcc10 100644 --- a/versioned_docs/version-4.x/troubleshooting.md +++ b/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')" 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..9bd8f4519bc 100644 --- a/versioned_docs/version-4.x/upgrading-from-3.x.md +++ b/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 diff --git a/versioned_docs/version-5.x/bottom-tab-navigator.md b/versioned_docs/version-5.x/bottom-tab-navigator.md index 5e651ffb8fd..d023743fe16 100755 --- a/versioned_docs/version-5.x/bottom-tab-navigator.md +++ b/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 diff --git a/versioned_docs/version-5.x/compatibility.md b/versioned_docs/version-5.x/compatibility.md index fa9ae9d4045..e1311e29847 100755 --- a/versioned_docs/version-5.x/compatibility.md +++ b/versioned_docs/version-5.x/compatibility.md @@ -10,8 +10,8 @@ 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 -npm install @react-navigation/native @react-navigation/compat +```bash npm2yarn +npm install --save @react-navigation/native @react-navigation/compat ``` Then we can make minimal changes in our code to use it: diff --git a/versioned_docs/version-5.x/drawer-based-navigation.md b/versioned_docs/version-5.x/drawer-based-navigation.md index fb8503a4a1e..10b8609f50d 100755 --- a/versioned_docs/version-5.x/drawer-based-navigation.md +++ b/versioned_docs/version-5.x/drawer-based-navigation.md @@ -14,8 +14,8 @@ 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 -npm install @react-navigation/drawer +```bash npm2yarn +npm install --save @react-navigation/drawer ``` ## Minimal example of drawer-based navigation diff --git a/versioned_docs/version-5.x/drawer-navigator.md b/versioned_docs/version-5.x/drawer-navigator.md index 4c07cf9d0ea..b585fe79660 100755 --- a/versioned_docs/version-5.x/drawer-navigator.md +++ b/versioned_docs/version-5.x/drawer-navigator.md @@ -14,8 +14,8 @@ 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 -npm install @react-navigation/drawer +```bash npm2yarn +npm install --save @react-navigation/drawer ``` ## API Definition diff --git a/versioned_docs/version-5.x/getting-started.md b/versioned_docs/version-5.x/getting-started.md index 3c32a919358..e59cca4a12e 100755 --- a/versioned_docs/version-5.x/getting-started.md +++ b/versioned_docs/version-5.x/getting-started.md @@ -12,8 +12,8 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the required packages in your React Native project: -```sh -npm install @react-navigation/native +```bash npm2yarn +npm install --save @react-navigation/native ``` 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. @@ -36,8 +36,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 by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds. diff --git a/versioned_docs/version-5.x/hello-react-navigation.md b/versioned_docs/version-5.x/hello-react-navigation.md index b4927b192bd..c9bc7e2e104 100755 --- a/versioned_docs/version-5.x/hello-react-navigation.md +++ b/versioned_docs/version-5.x/hello-react-navigation.md @@ -14,8 +14,8 @@ 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 -npm install @react-navigation/stack +```bash npm2yarn +npm install --save @react-navigation/stack ``` > 💡 `@react-navigation/stack` depends on `@react-native-community/masked-view` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions. 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..4b860b2e364 100755 --- a/versioned_docs/version-5.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/material-bottom-tab-navigator.md @@ -12,8 +12,8 @@ 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 -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). 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..532aadc64d1 100755 --- a/versioned_docs/version-5.x/material-top-tab-navigator.md +++ b/versioned_docs/version-5.x/material-top-tab-navigator.md @@ -16,8 +16,8 @@ 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 -npm install @react-navigation/material-top-tabs react-native-tab-view +```bash npm2yarn +npm install --save @react-navigation/material-top-tabs react-native-tab-view ``` ## API Definition diff --git a/versioned_docs/version-5.x/native-stack-navigator.md b/versioned_docs/version-5.x/native-stack-navigator.md index 82d2287d566..d2515d481c9 100755 --- a/versioned_docs/version-5.x/native-stack-navigator.md +++ b/versioned_docs/version-5.x/native-stack-navigator.md @@ -14,8 +14,8 @@ 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 -npm install @react-navigation/native-stack +```bash npm2yarn +npm install --save @react-navigation/native-stack ``` Make sure to enable `react-native-screens`. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. `App.js`): diff --git a/versioned_docs/version-5.x/stack-navigator.md b/versioned_docs/version-5.x/stack-navigator.md index f7151bb4809..3cf84c6d0e4 100755 --- a/versioned_docs/version-5.x/stack-navigator.md +++ b/versioned_docs/version-5.x/stack-navigator.md @@ -16,8 +16,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/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 -npm install @react-navigation/stack +```bash npm2yarn +npm install --save @react-navigation/stack ``` ## API Definition diff --git a/versioned_docs/version-5.x/tab-based-navigation.md b/versioned_docs/version-5.x/tab-based-navigation.md index b27e455aba5..6e29db5085f 100755 --- a/versioned_docs/version-5.x/tab-based-navigation.md +++ b/versioned_docs/version-5.x/tab-based-navigation.md @@ -10,8 +10,8 @@ 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 -npm install @react-navigation/bottom-tabs +```bash npm2yarn +npm install --save @react-navigation/bottom-tabs ``` ## Minimal example of tab-based navigation diff --git a/versioned_docs/version-5.x/troubleshooting.md b/versioned_docs/version-5.x/troubleshooting.md index a9d3b625a3d..bc017b30c71 100755 --- a/versioned_docs/version-5.x/troubleshooting.md +++ b/versioned_docs/version-5.x/troubleshooting.md @@ -32,8 +32,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 ``` Sometimes it might even be due to a corrupt installation. If clearing cache didn't work, try deleting your `node_modules` folder and run `npm install` again. From 7b5a0afbd53276ad94a23fc68cb5828dc3baa5ab Mon Sep 17 00:00:00 2001 From: Erivelton Elias Date: Wed, 26 Feb 2020 11:38:03 -0300 Subject: [PATCH 2/2] removed --save flag --- src/plugins/remark-npm2yarn/index.js | 4 ++-- versioned_docs/version-1.x/getting-started.md | 2 +- versioned_docs/version-1.x/redux-integration.md | 2 +- versioned_docs/version-2.x/getting-started.md | 2 +- .../version-2.x/material-bottom-tab-navigator.md | 2 +- versioned_docs/version-2.x/redux-integration.md | 2 +- versioned_docs/version-3.x/getting-started.md | 4 ++-- .../version-3.x/material-bottom-tab-navigator.md | 2 +- versioned_docs/version-4.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-4.x/drawer-navigator.md | 2 +- versioned_docs/version-4.x/getting-started.md | 4 ++-- versioned_docs/version-4.x/hello-react-navigation.md | 2 +- .../version-4.x/material-bottom-tab-navigator.md | 2 +- .../version-4.x/material-top-tab-navigator.md | 2 +- versioned_docs/version-4.x/stack-navigator-1.0.md | 2 +- versioned_docs/version-4.x/stack-navigator.md | 2 +- versioned_docs/version-4.x/troubleshooting.md | 2 +- versioned_docs/version-4.x/upgrading-from-3.x.md | 10 +++++----- versioned_docs/version-5.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-5.x/compatibility.md | 2 +- versioned_docs/version-5.x/drawer-based-navigation.md | 2 +- versioned_docs/version-5.x/drawer-navigator.md | 2 +- versioned_docs/version-5.x/getting-started.md | 4 ++-- versioned_docs/version-5.x/hello-react-navigation.md | 2 +- .../version-5.x/material-bottom-tab-navigator.md | 2 +- .../version-5.x/material-top-tab-navigator.md | 2 +- versioned_docs/version-5.x/native-stack-navigator.md | 2 +- versioned_docs/version-5.x/stack-navigator.md | 2 +- versioned_docs/version-5.x/tab-based-navigation.md | 2 +- versioned_docs/version-5.x/troubleshooting.md | 2 +- 30 files changed, 38 insertions(+), 38 deletions(-) diff --git a/src/plugins/remark-npm2yarn/index.js b/src/plugins/remark-npm2yarn/index.js index 4cb2d13a010..48cdca551b4 100644 --- a/src/plugins/remark-npm2yarn/index.js +++ b/src/plugins/remark-npm2yarn/index.js @@ -13,8 +13,8 @@ const convertNpmToYarn = npmCode => { return ( npmCode .replace(/^npm i$/gm, 'yarn') - // install: 'npm install --save foo' -> 'yarn add foo' - .replace(/npm install --save/gm, 'yarn add') + // 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') ); diff --git a/versioned_docs/version-1.x/getting-started.md b/versioned_docs/version-1.x/getting-started.md index 330fcd92797..3c1807da989 100644 --- a/versioned_docs/version-1.x/getting-started.md +++ b/versioned_docs/version-1.x/getting-started.md @@ -19,7 +19,7 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the `react-navigation` package in your React Native project. ```bash npm2yarn -npm install --save react-navigation +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 ffec183b42b..08e26c9b8fe 100644 --- a/versioned_docs/version-1.x/redux-integration.md +++ b/versioned_docs/version-1.x/redux-integration.md @@ -25,7 +25,7 @@ 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 npm2yarn -npm install --save react-navigation-redux-helpers +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 dbe602b73c1..3ac2cc6f9fe 100644 --- a/versioned_docs/version-2.x/getting-started.md +++ b/versioned_docs/version-2.x/getting-started.md @@ -19,7 +19,7 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the `react-navigation` package in your React Native project. ```bash npm2yarn -npm install --save react-navigation +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 3cd127bdb62..56d88f11c35 100644 --- a/versioned_docs/version-2.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-2.x/material-bottom-tab-navigator.md @@ -11,7 +11,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 --save react-navigation-material-bottom-tabs react-native-paper +npm install 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). diff --git a/versioned_docs/version-2.x/redux-integration.md b/versioned_docs/version-2.x/redux-integration.md index b5267985bbc..84edff7733e 100644 --- a/versioned_docs/version-2.x/redux-integration.md +++ b/versioned_docs/version-2.x/redux-integration.md @@ -25,7 +25,7 @@ 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 npm2yarn -npm install --save react-navigation-redux-helpers +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 4552ec4dd86..1deaa4c2038 100644 --- a/versioned_docs/version-3.x/getting-started.md +++ b/versioned_docs/version-3.x/getting-started.md @@ -19,7 +19,7 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the `react-navigation` package in your React Native project. ```bash npm2yarn -npm install --save react-navigation +npm install react-navigation ``` Next, install `react-native-gesture-handler` and `react-native-reanimated`. @@ -33,7 +33,7 @@ expo install react-native-gesture-handler react-native-reanimated Otherwise, just use yarn or npm directly: ```bash npm2yarn -npm install --save react-native-gesture-handler react-native-reanimated +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 3cb062c5321..1e54e4a71a8 100644 --- a/versioned_docs/version-3.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-3.x/material-bottom-tab-navigator.md @@ -11,7 +11,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 --save react-navigation-material-bottom-tabs react-native-paper +npm install 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). diff --git a/versioned_docs/version-4.x/bottom-tab-navigator.md b/versioned_docs/version-4.x/bottom-tab-navigator.md index 8c862bdf11c..6b03f16e432 100644 --- a/versioned_docs/version-4.x/bottom-tab-navigator.md +++ b/versioned_docs/version-4.x/bottom-tab-navigator.md @@ -9,7 +9,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). ```bash npm2yarn -npm install --save react-navigation-tabs +npm install react-navigation-tabs ``` ## API diff --git a/versioned_docs/version-4.x/drawer-navigator.md b/versioned_docs/version-4.x/drawer-navigator.md index 8bfcd9b1c12..5b6a1500f79 100644 --- a/versioned_docs/version-4.x/drawer-navigator.md +++ b/versioned_docs/version-4.x/drawer-navigator.md @@ -7,7 +7,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). ```bash npm2yarn -npm install --save react-navigation-drawer +npm install react-navigation-drawer ``` ## API diff --git a/versioned_docs/version-4.x/getting-started.md b/versioned_docs/version-4.x/getting-started.md index ea6a072f2e8..cd78fff2451 100644 --- a/versioned_docs/version-4.x/getting-started.md +++ b/versioned_docs/version-4.x/getting-started.md @@ -29,7 +29,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 npm2yarn -npm install --save react-navigation +npm install 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. @@ -53,7 +53,7 @@ You can now continue to ["Hello React Navigation"](hello-react-navigation.md) to In your project directory, run: ```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 +npm install 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. diff --git a/versioned_docs/version-4.x/hello-react-navigation.md b/versioned_docs/version-4.x/hello-react-navigation.md index cd1b85c7a44..28d627dafe9 100644 --- a/versioned_docs/version-4.x/hello-react-navigation.md +++ b/versioned_docs/version-4.x/hello-react-navigation.md @@ -13,7 +13,7 @@ Lets start by demonstrating the most common navigator, `createStackNavigator`. Before continuing, first install [`react-navigation-stack`](https://github.com/react-navigation/stack): ```bash npm2yarn -npm install --save react-navigation-stack @react-native-community/masked-view +npm install react-navigation-stack @react-native-community/masked-view ``` ## Creating a stack navigator 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 762dbbd8997..074c4cdce5b 100644 --- a/versioned_docs/version-4.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-4.x/material-bottom-tab-navigator.md @@ -11,7 +11,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). ```bash npm2yarn -npm install --save react-navigation-material-bottom-tabs react-native-paper +npm install 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). 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 f8988717400..1dd42b4becd 100644 --- a/versioned_docs/version-4.x/material-top-tab-navigator.md +++ b/versioned_docs/version-4.x/material-top-tab-navigator.md @@ -9,7 +9,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). ```bash npm2yarn -npm install --save react-navigation-tabs +npm install react-navigation-tabs ``` ## API 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 10c40496572..0ecb2e80512 100644 --- a/versioned_docs/version-4.x/stack-navigator-1.0.md +++ b/versioned_docs/version-4.x/stack-navigator-1.0.md @@ -11,7 +11,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). ```bash npm2yarn -npm install --save react-navigation-stack@^1.10.3 +npm install react-navigation-stack@^1.10.3 ``` ## API diff --git a/versioned_docs/version-4.x/stack-navigator.md b/versioned_docs/version-4.x/stack-navigator.md index 17c2baa8edd..4e343f9d91c 100644 --- a/versioned_docs/version-4.x/stack-navigator.md +++ b/versioned_docs/version-4.x/stack-navigator.md @@ -11,7 +11,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). ```bash npm2yarn -npm install --save react-navigation-stack @react-native-community/masked-view +npm install react-navigation-stack @react-native-community/masked-view ``` ## API Definition diff --git a/versioned_docs/version-4.x/troubleshooting.md b/versioned_docs/version-4.x/troubleshooting.md index a292cfbcc10..40c7fb7bddf 100644 --- a/versioned_docs/version-4.x/troubleshooting.md +++ b/versioned_docs/version-4.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: ```bash npm2yarn -npm install --save name-of-the-module +npm install name-of-the-module ``` ## I'm getting an error "null is not an object (evaluating 'RNGestureHandlerModule.default.Direction')" 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 9bd8f4519bc..ea6f8018179 100644 --- a/versioned_docs/version-4.x/upgrading-from-3.x.md +++ b/versioned_docs/version-4.x/upgrading-from-3.x.md @@ -15,7 +15,7 @@ First, we need to install the `react-navigation` package along with the various To install them, run: ```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 +npm install 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. @@ -145,7 +145,7 @@ public class MainActivity extends ReactActivity { To upgrade `react-navigation-tabs`, run: ```bash npm2yarn -npm install --save react-navigation-tabs +npm install 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. @@ -166,7 +166,7 @@ This version upgrades [`react-native-tab-view`](https://github.com/react-native- To upgrade `react-navigation-drawer`, run: ```bash npm2yarn -npm install --save react-navigation-drawer +npm install 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`. @@ -176,7 +176,7 @@ This version upgrades now uses the [`react-native-reanimated`](https://github.co To upgrade `react-navigation-stack`, run: ```bash npm2yarn -npm install --save react-navigation-stack +npm install 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. @@ -190,7 +190,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: ```bash npm2yarn -npm install --save react-native-safe-area-context @react-native-community/masked-view +npm install react-native-safe-area-context @react-native-community/masked-view ``` ##### Stack Navigator config diff --git a/versioned_docs/version-5.x/bottom-tab-navigator.md b/versioned_docs/version-5.x/bottom-tab-navigator.md index d023743fe16..50d75597bee 100755 --- a/versioned_docs/version-5.x/bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/bottom-tab-navigator.md @@ -15,7 +15,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): ```bash npm2yarn -npm install --save @react-navigation/bottom-tabs +npm install @react-navigation/bottom-tabs ``` ## API Definition diff --git a/versioned_docs/version-5.x/compatibility.md b/versioned_docs/version-5.x/compatibility.md index e1311e29847..a5ec09d9b3d 100755 --- a/versioned_docs/version-5.x/compatibility.md +++ b/versioned_docs/version-5.x/compatibility.md @@ -11,7 +11,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): ```bash npm2yarn -npm install --save @react-navigation/native @react-navigation/compat +npm install @react-navigation/native @react-navigation/compat ``` Then we can make minimal changes in our code to use it: diff --git a/versioned_docs/version-5.x/drawer-based-navigation.md b/versioned_docs/version-5.x/drawer-based-navigation.md index 10b8609f50d..fa8df78415e 100755 --- a/versioned_docs/version-5.x/drawer-based-navigation.md +++ b/versioned_docs/version-5.x/drawer-based-navigation.md @@ -15,7 +15,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): ```bash npm2yarn -npm install --save @react-navigation/drawer +npm install @react-navigation/drawer ``` ## Minimal example of drawer-based navigation diff --git a/versioned_docs/version-5.x/drawer-navigator.md b/versioned_docs/version-5.x/drawer-navigator.md index b585fe79660..5f3eed051d7 100755 --- a/versioned_docs/version-5.x/drawer-navigator.md +++ b/versioned_docs/version-5.x/drawer-navigator.md @@ -15,7 +15,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): ```bash npm2yarn -npm install --save @react-navigation/drawer +npm install @react-navigation/drawer ``` ## API Definition diff --git a/versioned_docs/version-5.x/getting-started.md b/versioned_docs/version-5.x/getting-started.md index e59cca4a12e..a211ffd62c2 100755 --- a/versioned_docs/version-5.x/getting-started.md +++ b/versioned_docs/version-5.x/getting-started.md @@ -13,7 +13,7 @@ What follows within the _Fundamentals_ section of this documentation is a tour o Install the required packages in your React Native project: ```bash npm2yarn -npm install --save @react-navigation/native +npm install @react-navigation/native ``` 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. @@ -37,7 +37,7 @@ You can now continue to ["Hello React Navigation"](hello-react-navigation.md) to In your project directory, run: ```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 +npm install 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 by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds. diff --git a/versioned_docs/version-5.x/hello-react-navigation.md b/versioned_docs/version-5.x/hello-react-navigation.md index c9bc7e2e104..d1cae36f031 100755 --- a/versioned_docs/version-5.x/hello-react-navigation.md +++ b/versioned_docs/version-5.x/hello-react-navigation.md @@ -15,7 +15,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) : ```bash npm2yarn -npm install --save @react-navigation/stack +npm install @react-navigation/stack ``` > 💡 `@react-navigation/stack` depends on `@react-native-community/masked-view` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions. 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 4b860b2e364..79ed4c1454d 100755 --- a/versioned_docs/version-5.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/material-bottom-tab-navigator.md @@ -13,7 +13,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): ```bash npm2yarn -npm install --save @react-navigation/material-bottom-tabs react-native-paper +npm install @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). 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 532aadc64d1..972f16c03e9 100755 --- a/versioned_docs/version-5.x/material-top-tab-navigator.md +++ b/versioned_docs/version-5.x/material-top-tab-navigator.md @@ -17,7 +17,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): ```bash npm2yarn -npm install --save @react-navigation/material-top-tabs react-native-tab-view +npm install @react-navigation/material-top-tabs react-native-tab-view ``` ## API Definition diff --git a/versioned_docs/version-5.x/native-stack-navigator.md b/versioned_docs/version-5.x/native-stack-navigator.md index d2515d481c9..0339b9bc076 100755 --- a/versioned_docs/version-5.x/native-stack-navigator.md +++ b/versioned_docs/version-5.x/native-stack-navigator.md @@ -15,7 +15,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): ```bash npm2yarn -npm install --save @react-navigation/native-stack +npm install @react-navigation/native-stack ``` Make sure to enable `react-native-screens`. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. `App.js`): diff --git a/versioned_docs/version-5.x/stack-navigator.md b/versioned_docs/version-5.x/stack-navigator.md index 3cf84c6d0e4..3634349a8cc 100755 --- a/versioned_docs/version-5.x/stack-navigator.md +++ b/versioned_docs/version-5.x/stack-navigator.md @@ -17,7 +17,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): ```bash npm2yarn -npm install --save @react-navigation/stack +npm install @react-navigation/stack ``` ## API Definition diff --git a/versioned_docs/version-5.x/tab-based-navigation.md b/versioned_docs/version-5.x/tab-based-navigation.md index 6e29db5085f..648db177bbb 100755 --- a/versioned_docs/version-5.x/tab-based-navigation.md +++ b/versioned_docs/version-5.x/tab-based-navigation.md @@ -11,7 +11,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): ```bash npm2yarn -npm install --save @react-navigation/bottom-tabs +npm install @react-navigation/bottom-tabs ``` ## Minimal example of tab-based navigation diff --git a/versioned_docs/version-5.x/troubleshooting.md b/versioned_docs/version-5.x/troubleshooting.md index bc017b30c71..e9625a5c608 100755 --- a/versioned_docs/version-5.x/troubleshooting.md +++ b/versioned_docs/version-5.x/troubleshooting.md @@ -33,7 +33,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: ```bash npm2yarn -npm install --save name-of-the-module +npm install name-of-the-module ``` Sometimes it might even be due to a corrupt installation. If clearing cache didn't work, try deleting your `node_modules` folder and run `npm install` again.