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
To create a new workspace with React Native, run the following command:
❯
npx create-nx-workspace@latest your-workspace-name --preset=react-native --appName=your-app-name
You can also run the command without arguments to go through the interactive prompts.
❯
npx create-nx-workspace your-workspace-name
Installation
Keep Nx Package Versions In SyncMake 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.
In any Nx workspace, you can install @nx/react-native by running the following command:
❯
nx add @nx/react-native
This will install the correct version of @nx/react-native.
How @nx/react-native Infers Tasks
Inferred TasksSince Nx 18, Nx plugins can infer tasks for your projects based on the configuration of different tools. You can read more about it at the Inferred Tasks concept page.
The @nx/react-native plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file:
app.config.jsapp.json
View Inferred Tasks
To view inferred tasks for a project, open the project details view in Nx Console or run nx show project my-project --web in the command line.
@nx/react-native Configuration
The @nx/react-native/plugin is configured in the plugins array in nx.json.
1{
2 "plugins": [
3 {
4 "plugin": "@nx/react-native/plugin",
5 "options": {
6 "startTargetName": "start",
7 "podInstallTargetName": "pod-install",
8 "bundleTargetName": "bundle",
9 "runIosTargetName": "run-ios",
10 "runAndroidTargetName": "run-android",
11 "buildIosTargetName": "build-ios",
12 "buildAndroidTargetName": "build-android"
13 }
14 }
15 ]
16}
17Once a React Native configuration file has been identified, the targets are created with the name you specify under startTargetName, podInstallTargetName, bundleTargetName, runIosTargetName, runAndroidTargetname, buildIosTargetName or buildAndroidTargetName in the nx.json plugins array. The default names for the inferred targets are start, pod-install, bundle, run-ios, run-android, build-ios and build-android.
Generating Applications
To create additional React Native apps run:
❯
nx g @nx/react-native:app <your-app-name>
Generating Libraries
To generate a new library run:
❯
nx g @nx/react-native:lib <your-lib-name>
Generating Components
To generate a new component inside library run:
❯
nx g @nx/react-native:component <your-component-name> --directory=<component-directory> --export
Replace <component-directory> with the directory where you want to place the component. It must be a path to a directory relative to the workspace root and located inside the library project root.
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>
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.