Rescope @nrwl to @nx

@nx/react-native

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 @nx/react-native package to add React Native capabilities to it.

Keep Nx Package Versions In Sync

Make sure to install the @nx/react-native version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

❯

npm add -D @nx/react-native

Nx 15 and lower use @nrwl/ instead of @nx/

Generating Applications

To create additional React Native apps run:

❯

nx g @nx/react-native:app <your-app-name>

Nx 15 and lower use @nrwl/ instead of @nx/

Generating Libraries

To generate a new library run:

❯

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

Nx 15 and lower use @nrwl/ instead of @nx/

Generating Components

To generate a new component inside library run:

❯

nx g @nx/react-native:component your-component-name --project=your-lib-name --export

Nx 15 and lower use @nrwl/ instead of @nx/

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

Upgrade React Native

The Nx CLI provides the migrate command to help you stay up to date with the latest version of Nx.

Use upgrade-native Generator

To upgrade native iOS and Android code to latest, you can use the upgrade-native generator:

❯

nx generate @nx/react-native:upgrade-native <your-app-name>

Nx 15 and lower use @nrwl/ instead of @nx/

This is a command that will replace the iOS and Android native code folder entirely.

Upgrade Manually

You can also upgrade React Native iOS and Android code using the rn-diff-purge project.

Start Metro Server

To start the server that communicates with connected devices:

❯

nx start <your-app-name>

Run iOS

To build your app and start it on iOS simulator or device:

❯

nx run-ios <your-app-name>

Run Android

To build your app and start it on a connected Android emulator or device:

❯

nx run-android <your-app-name>

Build iOS

To build an iOS app:

❯

nx build-ios <your-app-name>

The build artifacts will be located under <your app folder>/ios/build.

You can specify the build folder by setting the buildFolder option:

❯

nx build ios <your-app-name> --buildFolder="./build"

Build Android

To build an Android app, run:

❯

nx build-android <your app name>

The build artifacts will be located under <your app folder>/android/app/build.

More Documentation

Package reference

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

Guides

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.

  • build-ios

    Build iOS app

  • 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.

  • pod-install

    Run pod install in the ios directory.

  • upgrade

    upgrade executor

Generators

  • initInternal

    Initialize the @nx/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 for all components declared in an application or library.

  • upgrade-native

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

  • web-configuration

    Set up web configuration for a React Native app