React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides:


- Integration with libraries such as Jest, Detox, and Storybook.

- Scaffolding for creating buildable libraries that can be published to npm.

- Utilities for automatic workspace refactoring.

![React Logo](/shared/react-logo.png)

React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides:

- Integration with libraries such as Jest, Detox, and Storybook.
- Scaffolding for creating buildable libraries that can be published to npm.
- Utilities for automatic workspace refactoring.

## Setting Up React Native

### Create a New Workspace

The easiest way to create your workspace is via `npx`.

```bash
npx create-nx-workspace your-workspace-name \
--preset=react-native \
--appName=your-app-name
```

{% callout type="note" title="Don't know what you need?" %}
You can also run the command without arguments to go through the interactive prompts.
{% /callout %}

```bash
npx create-nx-workspace your-workspace-name
```

### Adding React Native to an Existing Workspace

For existing Nx workspaces, install the `@nrwl/react-native` package to add React Native capabilities to it.

```bash
npm install @nrwl/react-native --save-dev

# Or with yarn
yarn add @nrwl/react-native --dev
```

### Generating Applications

To create additional React Native apps run:

```bash
nx g @nrwl/react-native:app your-app-name
```

### Generating Libraries

To generate a new library run:

```bash
npx nx g @nrwl/react-native:lib your-lib-name
```

### Generating Components

To generate a new component inside library run:

```bash
npx nx g @nrwl/react-native:component your-component-name --project=your-lib-name --export
```

Replace `your-lib-name` with the app's name as defined in your workspace.json file.

## Using React Native

- [run-ios](/packages/react-native/executors/run-ios) - Builds your app and starts it on iOS simulator or device
- [run-android](/packages/react-native/executors/run-android) - Builds your app and starts it on a connected Android emulator or device
- [build-android](/packages/react-native/executors/build-android) - Release Build for Android
- [start](/packages/react-native/executors/start) - Starts the server that communicates with connected devices
- [bundle](/packages/react-native/executors/bundle) - Builds the JavaScript bundle for offline use
- [sync-deps](/packages/react-native/executors/sync-deps) - Syncs dependencies to package.json (required for autolinking)
- [ensure-symlink](/packages/react-native/executors/ensure-symlink) - Ensure workspace node_modules is symlink under app's node_modules folder

## More Documentation

- [Using Detox](/packages/detox)
- [Using Jest](/packages/jest)


Overview

run-android

Run Android without cache

Specify an `applicationId` to launch after build. If not specified, `package` from `AndroidManifest.xml` will be used.

Specify an `applicationIdSuffix` to launch after build.

Builds your app and starts it on a specific device/simulator with the given device id (listed by running `adb devices` on the command line).

Run Jetifier – the AndroidX transition tool. By default it runs before Gradle to ease working with libraries that don't support AndroidX yet.

The port where the packager server is listening on.

Syncs npm dependencies to `package.json` (for React Native autolink).

Run custom Gradle tasks. If this argument is provided, then `--variant` option is ignored. Example: `yarn react-native run-android --tasks clean,installDebug`.

Launches the Metro Bundler in a new window using the specified terminal path.

Specify your app's build variant (e.g. `debug`, `release`).

Run Android application

run-ios

Run iOS without cache

Explicitly set device to use by name. The value is not required if you have a single device connected.

Runs `pod install` for native modules before building iOS app.

Explicitly set simulator to use. Optionally include iOS version between parenthesis at the end to match an exact version: `iPhone X (12.1)`.

Syncs npm dependencies to `package.json` (for React Native autolink). Always true when `--install` is used.

Explicitly set the Xcode configuration to use.

Run iOS application

Builds the JavaScript bundle for offline use.

bundle

Directory name where to store assets referenced in the bundle.

The number of workers we should parallelize the transformer on.

Allows overriding whether bundle is minified.

File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map.

Path to make sourcemaps sources entries relative to, ex. /root/dir.

Offline JS Bundle for React Native

build-android

Generate apk file(s) rather than a bundle (`.aab`).

Generate a debug build instead of a release build.

Override default gradle task incase of multi build variants

Release Build for Android

Starts the Javascript server that communicates with connected devices.

start

Packager Server for React Native

Syncs dependencies to `package.json` (required for autolinking).

sync-deps

Updates `package.json` with project dependencies.

An array of additional npm packages to include.

Sync Deps for React Native

Ensure workspace `node_modules` is symlink under app's `node_modules` folder.

ensure-symlink

Ensure workspace node_modules is symlink under app's node_modules folder.

Ensure Symlink for React Native

storybook

The output file that will be written. It is relative to the project directory.

The pattern of files to look at. It can be a specific file, or any valid glob. Note: if using the CLI, globs with `**/*...` must be escaped with quotes

The directory or directories, relative to the project root, to search for files in.

React Native Storybook Load Stories

Initialize the `@nrwl/react-native` plugin.

init

Add Nx React Native Schematics

application

Use class components instead of functional components

The display name to show in the application. Defaults to name.

Generate JavaScript files rather than TypeScript files

Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.

Create a React Application for Nx

library

When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).

The library name used to import it, like `@myorg/my-awesome-lib`.

Generate JavaScript files rather than TypeScript files.

Use pascal case component file name (e.g. `App.tsx`).

Do not update `tsconfig.json` for development experience.

Whether to enable tsconfig strict mode or not.

Create a React Native Library for Nx

component

Generate a component in the `mylib` library

Generate a class component in the `mylib` library

Use class components instead of functional component.

Create the component under this directory (can be nested).

When true, the component is exported from the project `index.ts` (if it exists).

Create component at the source root rather than its own directory.

When true, does not create `spec.ts` test files for the new component.

Create a React Native Component for Nx

Set up Storybook for a React-native application or library.

storybook-configuration

Set up Storybook for a React-Native app or library.

Automatically generate *.stories.ts files for components declared in this project?

Paths to ignore when looking for components.

Generate JavaScript story files rather than TypeScript story files.

Project for which to generate Storybook configuration.

Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.

Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.

React native Storybook configuration

Generate Storybook story for a React-native component.

component-story

Generate storybook story for a react-native component.

Relative path to the component file from the library root.

React native component story

Create stories/specs for all components declared in an application or library.

stories

Generate stories/specs for all components declared in a React Native project.

Generate React Native Storybook stories

Destructive command to upgrade native iOS and Android code to latest.

upgrade-native

Upgrade native iOS and Android code to latest.

Application project name to upgrade native files.

@nrwl/react-native:storybook

Options playground

Options

outputFile

pattern

searchDir

silent