101 lines
3.3 KiB
Markdown
101 lines
3.3 KiB
Markdown
# React Native Plugin
|
|
|
|
|
|
|
|
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:
|
|
|
|
```bash
|
|
#yarn
|
|
yarn add -D @nrwl/react-native
|
|
```
|
|
|
|
```bash
|
|
#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:
|
|
|
|
```treeview
|
|
<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
|
|
|
|
- [Using Detox](/detox/overview)
|
|
- [Using Jest](/jest/overview)
|
|
|
|
## Executors / Builders
|
|
|
|
- [run-ios](/react-native/run-ios) - Builds your app and starts it on iOS simulator
|
|
- [run-android](/react-native/run-android) - Builds your app and starts it on a connected Android emulator or device
|
|
- [build-android](/react-native/build-android) - Release Build for Android
|
|
- [start](/react-native/package) - Starts the server that communicates with connected devices
|
|
- [bundle](/web/package) - Builds the JavaScript bundle for offline use
|
|
- [sync-deps](/react-native/sync-deps) - Syncs dependencies to package.json (required for autolinking)
|
|
- [ensure-symlink](/react-native/ensure-symlink) - Ensure workspace node_modules is symlink under app's node_modules folder
|
|
|
|
## Generators
|
|
|
|
- [application](/react-native/application) - Create a React Native application
|
|
- [component](/react-native/component) - Create a React Native component
|
|
- [library](/react-native/library) - Create a React Native library
|