React Native Plugin for Nx

Smart, Fast and Extensible Build System

Nx is a next generation build system with first class monorepo support and powerful integrations.

Getting Started

Creating an Nx Workspace

Using npx

npx create-nx-workspace

Using npm init

npm init nx-workspace

Using yarn create

yarn create nx-workspace

The create-nx-workspace command will ask you to select a preset, which will configure some plugins and create your applications to help you get started.

? What to create in the new workspace (Use arrow keys)
❯ apps              [an empty workspace with no plugins with a layout that works best for building apps]
  core              [an empty workspace with no plugins set up to publish npm packages (similar to yarn workspaces)]
  ts                [an empty workspace with the JS/TS plugin preinstalled]
  react             [a workspace with a single React application]
  angular           [a workspace with a single Angular application]
  next.js           [a workspace with a single Next.js application]
  gatsby            [a workspace with a single Gatsby application]
  nest              [a workspace with a single Nest application]
  express           [a workspace with a single Express application]
  web components    [a workspace with a single app built using web components]
  react-native      [a workspace with a single React Native application]
  react-express     [a workspace with a full stack application (React + Express)]

Select the preset that works best for you.

Adding Nx to an Existing Monorepo

Run:

npx add-nx-to-monorepo@latest

Table of Contents

• Getting started
  • Create a new Nx workspace:
  • Install React Native plugin
  • Create an app
  • Start the JavaScript bundler
  • Run on devices
  • Release build
  • Test/lint the app
  • E2e test the app
    • Setup
      • Install applesimutils (Mac only)
      • Install Jest Globally
    • Commands
    • Manually Add E2E Folder
    • Change Testing Simulator/Emulator
• Using components from React library
• CLI Commands and Options
  • start
    • --port [number]
  • run-ios
    • --port [number]
    • --install
    • --sync
  • run-android
    • --port [number]
    • --sync
  • sync-deps
    • --include [string]
• Learn more
• Contributing
• Debugging

Getting started

Create a new Nx workspace:

npx create-nx-workspace --cli=nx --preset=empty

Install React Native plugin

# Using npm
npm install --save-dev @nrwl/react-native

# Using yarn
yarn add -D @nrwl/react-native

Create an app

npx nx g @nrwl/react-native:app <app-name>

When using Nx, you can create multiple applications and themes in the same workspace. If you don't want to prefix your commands with npx, install @nrwl/cli globally.

Start the JavaScript bundler

npx nx start <app-name>

This will start the bundler at http://localhost:8081.

Run on devices

Make sure the bundler server is running.

Android:

npx nx run-android <app-name>

iOS: (Mac only)

npx nx run-ios <app-name> --install

Note: The --install flag installs Xcode dependencies before building the iOS app. This option keeps dependencies up to date.

Release build

Android:

npx nx build-android <app-name>

iOS: (Mac only)

No CLI support yet. Run in the Xcode project. See: https://reactnative.dev/docs/running-on-device

Test/lint the app

npx nx test <app-name>
npx nx lint <app-name>

Using components from React library

You can use a component from React library generated using Nx package for React. Once you run:

npx nx g @nrwl/react-native:lib ui-button

This will generate the UiButton component, which you can use in your app.

import { UiButton } from '@myorg/ui-button';

CLI Commands and Options

Usage:

npx nx [command] [app] [...options]

start

Starts the JS bundler that communicates with connected devices.

--port [number]

The port to listen on.

run-ios

Builds your app and starts it on iOS simulator.

--port [number]

The port of the JS bundler.

--install

Install dependencies for the Xcode project before building iOS app.

--sync

Sync app dependencies to its package.json. On by default, use --no-sync to turn it off.

run-android

Builds your app and starts it on iOS simulator.

--port [number]

The port of the JS bundler.

--sync

Sync app dependencies to its package.json. On by default, use --no-sync to turn it off.

sync-deps

Sync app dependencies to its package.json.

--include [string]

A comma-separate list of additional packages to include.

e.g. nx sync-deps [app] --include react-native-gesture,react-native-safe-area-context

Learn more

Visit the Nx Documentation to learn more.