@nrwl/react-native

---

React Native Plugin for Nx

What is Nx?

🔎 Smart, Extensible Build Framework

Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more.

Best-in-Class Support for Monorepos

Nx provides distributed graph-based task execution and computation caching.

Nx is smart. It analyzes your workspace and figures out what can be affected by every code change. That's why Nx doesn't rebuild and retest everything on every commit--it only rebuilds what is necessary .

Nx partitions commands into a graph of smaller tasks. Nx then runs those tasks in parallel, and it can even distribute them across multiple machines without any configuration.

Nx also uses a distributed computation cache. If someone has already built or tested similar code, Nx will use their results to speed up the command for everyone else.

Holistic Dev Experience Powered by an Advanced CLI and Editor Plugins

Nx helps scale your development from one team building one application to many teams building multiple frontend and backend applications all in the same workspace. When using Nx, developers have a holistic dev experience powered by an advanced CLI (with editor plugins), capabilities for controlled code sharing and consistent code generation.

Rich Plugin Ecosystem

Nx is an open platform with plugins for many modern tools and frameworks. It has support for TypeScript, React, Angular, Cypress, Jest, Prettier, Nest.js, Next.js, Storybook, Ionic among others. With Nx, you get a consistent dev experience regardless of the tools used.

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)
❯ empty             [an empty workspace with a layout that works best for building apps]
  npm               [an empty workspace set up to publish npm packages (similar to and compatible with yarn workspaces)]
  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-express     [a workspace with a full stack application (React + Express)]
  angular-nest      [a workspace with a full stack application (Angular + Nest)]

Select the preset that works best for you.

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.