React Native Plugin for Nx

{{what-is-nx}}

{{getting-started}}

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.