React Native Plugin for Nx

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>

E2e test the app

Setup

Install applesimutils (Mac only)

applesimutils is a collection of utils for Apple simulators.

brew tap wix/brew
brew install applesimutils

Install Jest Globally

npm install -g jest

Commands

A built app must exist before run test commands.

• nx build-ios <app-name-e2e>: build the iOS app (Mac only)
• nx test-ios <app-name-e2e>: run e2e tests on the built iOS app (Mac only)
• nx build-ios <app-name-e2e> --prod and nx test-ios <app-name-e2e> --prod: build and run release version of iOS app. Note: you might need open the xcode project under iOS and choose a team under "Sign & Capabilities".
• nx build-android <app-name-e2e>: build the android app
• nx test-android <app-name-e2d>: run e2e tests on the built android app
• nx build-android <app-name-e2e> --prod and nx test-android <app-name-e2e> --prod: build and run release version of android app.

Manually Add E2E Folder

A <app-name-e2e> folder is automatically generate when you create a react native app. However, if you want to add e2e folder manually, you need to:

• Install @nrwl/detox

  # Using npm
  npm install --save-dev @nrwl/detox
  
  # Using yarn
  yarn add -D @nrwl/detox

• Run nx generate @nrwl/detox:app <app-name-e2e>

• Follow instructions https://github.com/wix/Detox/blob/master/docs/Introduction.Android.md to manully change android files.

Change Testing Simulator/Emulator

For iOS, in terminal, run xcrun simctl list to view a list of simulators on your Mac. To open your active simulator, run open -a simulator. In <app-name-e2e>/.detoxrc.json, you could change the simulator under devices.simulator.device.

For Android: in terminal, run emulator -list-avds to view a list of emulators installed. To open your emulator, run emulator -avd <your emulator name>. In <app-name-e2e>/.detoxrc.json, you could change the simulator under devices.emulator.device.

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.

Contributing

To publish packages to a local registry, do the following:

• Download Nx main repo. In the nx main repo, run yarn local-registry start in Terminal 1 (keep it running)
• In the Nx main repo, run yarn local-registry clear in Terminal 2
• In the current NX-react-native repo, run yarn local-registry enable in Terminal 3
• Run yarn build in Terminal 3
• Run yarn release 999.9.9 latest --local in Terminal 3
• Run cd /tmp in Terminal 3
• Run npx create-nx-workspace in Terminal 3

Debugging

• If you got a pod install error like "None of your spec sources contain a spec satisfying the dependency", go to ios folder and run pod install --repo-update in your terminal.
• If you got an error "error: Signing for "App" requires a development team. Select a development team in the Signing & Capabilities editor." when build for iOS, you need to open the xcode project under iOS and choose a team under "Sign & Capabilities".