React Native Plugin

React Logo

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.

Adding the React Native plugin

Adding the React plugin to a workspace can be done with the following:

#yarn
yarn add -D @nrwl/react-native

#npm
npm install -D @nrwl/react-native

Note: You can create a new workspace that has React set up by doing npx create-nx-workspace@latest --preset=react-native

The file structure for a React application looks like:

<workspace name>/
├── apps/
│   ├── myapp/
│   │   ├── app.json
│   │   ├── metro.config.js
│   │   ├── android/
│   │   │   ├── app/
│   │   │   ├── gradle/
│   │   │   ├── build.gradle
│   │   │   ├── gradle.properties
│   │   │   ├── gradlew
│   │   │   ├── settings.gradle
│   │   ├── ios/
│   │   │   ├── Mobile/
│   │   │   ├── Mobile.xcodeproj/
│   │   │   ├── Mobile.xcworkspace/
│   │   │   ├── Podfile
│   │   │   ├── Podfile.lock
│   │   ├── src/
│   │   │   ├── main.tsx
│   │   │   └── app/
│   │   │       ├── App.tsx
│   │   │       └── App.spec.tsx
│   │   ├── .babelrc
│   │   ├── jest.config.js
│   │   ├── test-setup.ts
│   │   ├── package.json
│   │   ├── project.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.app.json
│   │   └── tsconfig.spec.json
│   └── myapp-e2e/
│       ├── .detoxrc.json
│       ├── src/
│       │   └── app.spec.ts
│       ├── .babelrc
│       ├── jest.config.json
│       ├── project.json
│       ├── tsconfig.e2e.json
│       └── tsconfig.json
├── libs/
├── tools/
├── babel.config.json
├── jest.config.js
├── jest.preset.js
├── nx.json
├── package.json
├── tsconfig.base.json
└── workspace.json

See Also

Executors / Builders

  • run-ios - Builds your app and starts it on iOS simulator
  • 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

Generators