@nrwl/react-native

React Logo

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.

npx create-nx-workspace your-workspace-name \
--preset=react-native \
--appName=your-app-name
Don't know what you need?

You can also run the command without arguments to go through the interactive prompts.

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.

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:

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

Generating Libraries

To generate a new library run:

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

Generating Components

To generate a new component inside library run:

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 tsconfig.base.json file or the name property of your package.json

Using React Native

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

More Documentation

Package reference

Here is a list of all the executors and generators available from this package.

Executors

  • run-android

    Runs Android application.

  • run-ios

    Runs iOS application.

  • bundle

    Builds the JavaScript bundle for offline use.

  • build-android

    Release Build for Android.

  • start

    Starts the Javascript server that communicates with connected devices.

  • sync-deps

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

  • ensure-symlink

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

  • storybook

    Serve React Native Storybook.

Generators

  • init

    Initialize the @nrwl/react-native plugin.

  • application

    Create a React Native application.

  • library

    Create a React Native library.

  • component

    Create a React Native component.

  • storybook-configuration

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

  • component-story

    Generate Storybook story for a React-native component.

  • stories

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

  • upgrade-native

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