docs(react-native): update plugin overview page and recipe (#22414)

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,18 +111,18 @@ nx g @nx/react-native:app <your-app-name>
 To generate a new library run:
 
 ```shell
-nx g @nx/react-native:lib your-lib-name
+nx g @nx/react-native:lib <your-lib-name>
 ```
 
 ### Generating Components
 
 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 <your-component-name> --directory=<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 `<component-directory>` 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
 

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:

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,18 +111,18 @@ nx g @nx/react-native:app <your-app-name>
 To generate a new library run:
 
 ```shell
-nx g @nx/react-native:lib your-lib-name
+nx g @nx/react-native:lib <your-lib-name>
 ```
 
 ### Generating Components
 
 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 <your-component-name> --directory=<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 `<component-directory>` 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