Overview

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:

Integration with libraries such as Jest, Detox, and Storybook.
Scaffolding for creating buildable libraries that can be published to npm.
Utilities for automatic workspace refactoring.

Setting Up React Native

Create a New Workspace

To create a new workspace with React Native, run the following command:

❯

npx create-nx-workspace@latest --preset=react-native --appName=your-app-name

Don't know what you need?

You can also run the command without arguments to go through the interactive prompts.

❯

npx create-nx-workspace your-workspace-name

Installation

Keep Nx Package Versions In Sync

Make sure to install the @nx/react-native version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

In any Nx workspace, you can install @nx/react-native by running the following command:

❯

nx add @nx/react-native

Nx 15 and lower use @nrwl/ instead of @nx/

This will install the correct version of @nx/react-native.

How @nx/react-native Infers Tasks

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
app.json

View Inferred Tasks

To view inferred tasks for a project, open the project details view in Nx Console or run nx show project my-project --web in the command line.

@nx/react-native Configuration

The @nx/react-native/plugin is configured in the plugins array in nx.json.

nx.json
{
  "plugins": [
    {
      "plugin": "@nx/react-native/plugin",
      "options": {
        "startTargetName": "start",
        "podInstallTargetName": "pod-install",
        "bundleTargetName": "bundle",
        "runIosTargetName": "run-ios",
        "runAndroidTargetName": "run-android",
        "buildIosTargetName": "build-ios",
        "buildAndroidTargetName": "build-android"
      }
    }
  ]
}
Nx 15 and lower use @nrwl/ instead of @nx/

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.