React Native Plugin for Nx
Table of Contents
Getting started
Create a new Nx workspace:
npx create-nx-workspace --cli=nx --preset=empty
Install React Native plugin
npm install --save-dev @nrwl/react-native
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.