From 2678bdf72b6133fe9888f2b81264473543906819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= Date: Thu, 21 Mar 2024 10:29:24 +0100 Subject: [PATCH] docs(react-native): update plugin overview page and recipe (#22414) --- .../react-native/documents/overview.md | 40 ++++++++++++------- docs/shared/guides/react-native.md | 32 ++++++++++++++- .../react-native/react-native-plugin.md | 40 ++++++++++++------- 3 files changed, 82 insertions(+), 30 deletions(-) diff --git a/docs/generated/packages/react-native/documents/overview.md b/docs/generated/packages/react-native/documents/overview.md index 25a8d81c79631..ca09c262d065a 100644 --- a/docs/generated/packages/react-native/documents/overview.md +++ b/docs/generated/packages/react-native/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Overview of the Nx React Native Plugin +description: The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. This page also explains how to configure React Native on your Nx workspace. +--- + React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform. The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides: @@ -13,7 +18,7 @@ The Nx Plugin for React Native contains generators for managing React Native app To create a new workspace with React Native, run the following command: ```shell -npx create-nx-workspace@latest --preset=react-native --appName=your-app-name +npx create-nx-workspace@latest your-workspace-name --preset=react-native --appName=your-app-name ``` {% callout type="note" title="Don't know what you need?" %} @@ -41,8 +46,24 @@ nx add @nx/react-native This will install the correct version of `@nx/react-native`. +{% /tab %} +{% tab label="Nx < 18" %} + +Install the `@nx/react-native` package with your package manager. + +```shell +npm add -D @nx/react-native +``` + +{% /tab %} +{% /tabs %} + ### How @nx/react-native Infers Tasks +{% callout type="note" title="Inferred Tasks" %} +Since Nx 18, Nx plugins can infer tasks for your projects based on the configuration of different tools. You can read more about it at the [Inferred Tasks concept page](/concepts/inferred-tasks). +{% /callout %} + The `@nx/react-native` plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file: - `app.config.js` @@ -75,16 +96,7 @@ The `@nx/react-native/plugin` is configured in the `plugins` array in `nx.json`. } ``` -Once a React Native configuration file has been identified, the targets are created with the name you specify under `startTargetName`, `podInstallTargetName`, `bundleTargetName`, `runIosTargetName`, `runAndroidTargetname`, `buildIosTargetName` or `buildAndroidTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `start`, `pod-install`, `bundle`, `run-ios`, `run-anroid`, `build-ios` and `build-android`. - -{% /tab %} -{% tab label="Nx < 18" %} - -Install the `@nx/react-native` package with your package manager. - -```shell -npm add -D @nx/react-native -``` +Once a React Native configuration file has been identified, the targets are created with the name you specify under `startTargetName`, `podInstallTargetName`, `bundleTargetName`, `runIosTargetName`, `runAndroidTargetname`, `buildIosTargetName` or `buildAndroidTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `start`, `pod-install`, `bundle`, `run-ios`, `run-android`, `build-ios` and `build-android`. ### Generating Applications @@ -99,7 +111,7 @@ nx g @nx/react-native:app To generate a new library run: ```shell -nx g @nx/react-native:lib your-lib-name +nx g @nx/react-native:lib ``` ### Generating Components @@ -107,10 +119,10 @@ nx g @nx/react-native:lib your-lib-name To generate a new component inside library run: ```shell -nx g @nx/react-native:component your-component-name --project=your-lib-name --export +nx g @nx/react-native:component --directory= --export ``` -Replace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json` +Replace `` with the directory where you want to place the component. It must be a path to a directory relative to the workspace root and located inside the library project root. ### Upgrade React Native diff --git a/docs/shared/guides/react-native.md b/docs/shared/guides/react-native.md index 65a9ca5a2ec50..01694d8ef4ac8 100644 --- a/docs/shared/guides/react-native.md +++ b/docs/shared/guides/react-native.md @@ -118,16 +118,44 @@ npx nx build-ios mobile **Android:** +{% tabs %} +{% tab label="Using inferred tasks" %} + +{% callout type="note" title="Inferred Tasks" %} +Since Nx 18, Nx plugins can infer tasks for your projects based on the configuration of different tools. You can read more about it at the [Inferred Tasks concept page](/concepts/inferred-tasks). +{% /callout %} + +```shell +npx nx test mobile-e2e -- --configuration="android.emu.debug" +``` + +{% /tab %} +{% tab label="Using explicit targets with executors" %} + ```shell npx nx test-android mobile-e2e ``` +{% /tab %} + **iOS:** (Mac only) +{% tabs %} +{% tab label="Using inferred tasks" %} + +```shell +npx nx test mobile-e2e -- --configuration="ios.sim.debug" +``` + +{% /tab %} +{% tab label="Using explicit targets with executors" %} + ```shell npx nx test-ios mobile-e2e ``` +{% /tab %} + When using React Native in Nx, you get the out-of-the-box support for TypeScript, Detox, and Jest. ### Adding React Native to an Existing Workspace @@ -200,7 +228,7 @@ Run: To generate a new component inside `shared-ui-layout` run: ```shell -npx nx g @nx/react-native:component layout --project=shared-ui-layout --export +npx nx g @nx/react-native:component layout --directory=libs/shared-ui-layout/src/lib/layout --export ``` And you will see the following updated for `shared-ui-layout`: @@ -246,7 +274,7 @@ For libraries intended to be built and published to a registry (e.g. npm) you ca ```shell npx nx g @nx/react-native:lib shared-ui-layout --directory=libs/shared-ui-layout --publishable --importPath=@happynrwl/ui-components -npx nx g @nx/react-native:component layout --project=shared-ui-layout --export +npx nx g @nx/react-native:component layout --directory=libs/shared-ui-layout/src/lib/layout --export ``` Run `npx nx build shared-ui-layout` to build the library. It will generate the following: diff --git a/docs/shared/packages/react-native/react-native-plugin.md b/docs/shared/packages/react-native/react-native-plugin.md index 25a8d81c79631..ca09c262d065a 100644 --- a/docs/shared/packages/react-native/react-native-plugin.md +++ b/docs/shared/packages/react-native/react-native-plugin.md @@ -1,3 +1,8 @@ +--- +title: Overview of the Nx React Native Plugin +description: The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. This page also explains how to configure React Native on your Nx workspace. +--- + React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform. The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides: @@ -13,7 +18,7 @@ The Nx Plugin for React Native contains generators for managing React Native app To create a new workspace with React Native, run the following command: ```shell -npx create-nx-workspace@latest --preset=react-native --appName=your-app-name +npx create-nx-workspace@latest your-workspace-name --preset=react-native --appName=your-app-name ``` {% callout type="note" title="Don't know what you need?" %} @@ -41,8 +46,24 @@ nx add @nx/react-native This will install the correct version of `@nx/react-native`. +{% /tab %} +{% tab label="Nx < 18" %} + +Install the `@nx/react-native` package with your package manager. + +```shell +npm add -D @nx/react-native +``` + +{% /tab %} +{% /tabs %} + ### How @nx/react-native Infers Tasks +{% callout type="note" title="Inferred Tasks" %} +Since Nx 18, Nx plugins can infer tasks for your projects based on the configuration of different tools. You can read more about it at the [Inferred Tasks concept page](/concepts/inferred-tasks). +{% /callout %} + The `@nx/react-native` plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file: - `app.config.js` @@ -75,16 +96,7 @@ The `@nx/react-native/plugin` is configured in the `plugins` array in `nx.json`. } ``` -Once a React Native configuration file has been identified, the targets are created with the name you specify under `startTargetName`, `podInstallTargetName`, `bundleTargetName`, `runIosTargetName`, `runAndroidTargetname`, `buildIosTargetName` or `buildAndroidTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `start`, `pod-install`, `bundle`, `run-ios`, `run-anroid`, `build-ios` and `build-android`. - -{% /tab %} -{% tab label="Nx < 18" %} - -Install the `@nx/react-native` package with your package manager. - -```shell -npm add -D @nx/react-native -``` +Once a React Native configuration file has been identified, the targets are created with the name you specify under `startTargetName`, `podInstallTargetName`, `bundleTargetName`, `runIosTargetName`, `runAndroidTargetname`, `buildIosTargetName` or `buildAndroidTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `start`, `pod-install`, `bundle`, `run-ios`, `run-android`, `build-ios` and `build-android`. ### Generating Applications @@ -99,7 +111,7 @@ nx g @nx/react-native:app To generate a new library run: ```shell -nx g @nx/react-native:lib your-lib-name +nx g @nx/react-native:lib ``` ### Generating Components @@ -107,10 +119,10 @@ nx g @nx/react-native:lib your-lib-name To generate a new component inside library run: ```shell -nx g @nx/react-native:component your-component-name --project=your-lib-name --export +nx g @nx/react-native:component --directory= --export ``` -Replace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json` +Replace `` with the directory where you want to place the component. It must be a path to a directory relative to the workspace root and located inside the library project root. ### Upgrade React Native