{ "githubRoot": "https://github.com/nrwl/nx/blob/master", "name": "react-native", "description": "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.\n\nThe Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Detox, and Storybook.\n\n- Scaffolding for creating buildable libraries that can be published to npm.\n\n- Utilities for automatic workspace refactoring.", "root": "/packages/react-native", "source": "/packages/react-native/src", "documentation": [ { "id": "overview", "name": "Overview", "path": "/packages/react-native", "file": "shared/react-native-plugin", "content": "![React Logo](/shared/react-logo.png)\n\nReact 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.\n\nThe Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Jest, Detox, and Storybook.\n- Scaffolding for creating buildable libraries that can be published to npm.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React Native\n\n### Create a New Workspace\n\nThe easiest way to create your workspace is via `npx`.\n\n```bash\nnpx create-nx-workspace your-workspace-name \\\n--preset=react-native \\\n--appName=your-app-name\n```\n\n**Note:** You can also run the command without arguments to go through the interactive prompts.\n\n```bash\nnpx create-nx-workspace your-workspace-name\n```\n\n### Adding React Native to an Existing Workspace\n\nFor existing Nx workspaces, install the `@nrwl/react-native` package to add React Native capabilities to it.\n\n```bash\nnpm install @nrwl/react-native --save-dev\n\n# Or with yarn\nyarn add @nrwl/react-native --dev\n```\n\n### Generating Applications\n\nTo create additional React Native apps run:\n\n```bash\nnx g @nrwl/react-native:app your-app-name\n```\n\n### Generating Libraries\n\nTo generate a new library run:\n\n```bash\nnpx nx g @nrwl/react-native:lib your-lib-name\n```\n\n### Generating Components\n\nTo generate a new component inside library run:\n\n```bash\nnpx nx g @nrwl/react-native:component your-component-name --project=your-lib-name --export\n```\n\nReplace `your-lib-name` with the app's name as defined in your workspace.json file.\n\n## Using React Native\n\n- [run-ios](/react-native/run-ios) - Builds your app and starts it on iOS simulator or device\n- [run-android](/react-native/run-android) - Builds your app and starts it on a connected Android emulator or device\n- [build-android](/react-native/build-android) - Release Build for Android\n- [start](/react-native/package) - Starts the server that communicates with connected devices\n- [bundle](/web/package) - Builds the JavaScript bundle for offline use\n- [sync-deps](/react-native/sync-deps) - Syncs dependencies to package.json (required for autolinking)\n- [ensure-symlink](/react-native/ensure-symlink) - Ensure workspace node_modules is symlink under app's node_modules folder\n\n## More Documentation\n\n- [Using Detox](/detox/overview)\n- [Using Jest](/jest/overview)\n" } ], "generators": [ { "name": "init", "factory": "./src/generators/init/init#reactNativeInitGenerator", "schema": { "cli": "nx", "$id": "NxReactNativeInit", "$schema": "http://json-schema.org/schema", "title": "Add Nx React Native Schematics", "description": "Add Nx React native schematics.", "type": "object", "properties": { "unitTestRunner": { "description": "Adds the specified unit test runner.", "type": "string", "enum": ["jest", "none"], "default": "jest" }, "skipFormat": { "description": "Skip formatting files.", "type": "boolean", "default": false }, "e2eTestRunner": { "description": "Adds the specified E2E test runner.", "type": "string", "enum": ["detox", "none"], "default": "detox" }, "js": { "type": "boolean", "default": false, "description": "Use JavaScript instead of TypeScript" } }, "required": [], "presets": [] }, "description": "Initialize the `@nrwl/react-native` plugin.", "hidden": true, "implementation": "/packages/react-native/src/generators/init/init#reactNativeInitGenerator.ts", "aliases": [], "path": "/packages/react-native/src/generators/init/schema.json" }, { "name": "application", "factory": "./src/generators/application/application#reactNativeApplicationGenerator", "schema": { "cli": "nx", "$id": "NxReactNativeApplication", "$schema": "http://json-schema.org/schema", "title": "Create a React Application for Nx", "description": "Create a React Application for Nx.", "examples": [ { "command": "nx g app myapp --directory=nested", "description": "Generate `apps/nested/myapp`" }, { "command": "nx g app myapp --classComponent", "description": "Use class components instead of functional components" } ], "type": "object", "properties": { "name": { "description": "The name of the application.", "type": "string", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "What name would you like to use for the application?" }, "displayName": { "description": "The display name to show in the application. Defaults to name.", "type": "string" }, "directory": { "description": "The directory of the new application.", "type": "string", "alias": "d" }, "skipFormat": { "description": "Skip formatting files", "type": "boolean", "default": false }, "linter": { "description": "The tool to use for running lint checks.", "type": "string", "enum": ["eslint", "tslint"], "default": "eslint" }, "unitTestRunner": { "type": "string", "enum": ["jest", "none"], "description": "Test runner to use for unit tests", "default": "jest" }, "tags": { "type": "string", "description": "Add tags to the application (used for linting).", "alias": "t" }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files", "default": false }, "setParserOptionsProject": { "type": "boolean", "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", "default": false }, "e2eTestRunner": { "description": "Adds the specified e2e test runner.", "type": "string", "enum": ["detox", "none"], "default": "detox" }, "install": { "type": "boolean", "description": "Runs `pod install` for native modules before building iOS app.", "default": true } }, "required": [], "presets": [] }, "aliases": ["app"], "x-type": "application", "description": "Create a React Native application.", "implementation": "/packages/react-native/src/generators/application/application#reactNativeApplicationGenerator.ts", "hidden": false, "path": "/packages/react-native/src/generators/application/schema.json" }, { "name": "library", "factory": "./src/generators/library/library#reactNativeLibraryGenerator", "schema": { "cli": "nx", "$id": "NxReactNativeLibrary", "$schema": "http://json-schema.org/schema", "title": "Create a React Native Library for Nx", "description": "Create a React Native Library for Nx.", "type": "object", "examples": [ { "command": "nx g lib mylib --directory=myapp", "description": "Generate `libs/myapp/mylib`" } ], "properties": { "name": { "type": "string", "description": "Library name.", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "What name would you like to use for the library?", "pattern": "^[a-zA-Z].*$" }, "directory": { "type": "string", "description": "A directory where the lib is placed.", "alias": "d" }, "linter": { "description": "The tool to use for running lint checks.", "type": "string", "enum": ["eslint", "tslint"], "default": "eslint" }, "unitTestRunner": { "type": "string", "enum": ["jest", "none"], "description": "Test runner to use for unit tests.", "default": "jest" }, "tags": { "type": "string", "description": "Add tags to the library (used for linting).", "alias": "t" }, "skipFormat": { "description": "Skip formatting files.", "type": "boolean", "default": false }, "skipTsConfig": { "type": "boolean", "default": false, "description": "Do not update `tsconfig.json` for development experience." }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case component file name (e.g. `App.tsx`).", "alias": "P", "default": false }, "publishable": { "type": "boolean", "description": "Create a publishable library." }, "buildable": { "type": "boolean", "default": false, "description": "Generate a buildable library." }, "importPath": { "type": "string", "description": "The library name used to import it, like `@myorg/my-awesome-lib`." }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files.", "default": false }, "globalCss": { "type": "boolean", "description": "When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).", "default": false }, "strict": { "type": "boolean", "description": "Whether to enable tsconfig strict mode or not.", "default": true }, "setParserOptionsProject": { "type": "boolean", "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", "default": false } }, "required": ["name"], "presets": [] }, "aliases": ["lib"], "x-type": "library", "description": "Create a React Native library.", "implementation": "/packages/react-native/src/generators/library/library#reactNativeLibraryGenerator.ts", "hidden": false, "path": "/packages/react-native/src/generators/library/schema.json" }, { "name": "component", "factory": "./src/generators/component/component#reactNativeComponentGenerator", "schema": { "cli": "nx", "$id": "NxReactNativeApplication", "$schema": "http://json-schema.org/schema", "title": "Create a React Native Component for Nx", "description": "Create a React native Component for Nx.", "type": "object", "examples": [ { "command": "nx g component my-component --project=mylib", "description": "Generate a component in the `mylib` library" }, { "command": "nx g component my-component --project=mylib --classComponent", "description": "Generate a class component in the `mylib` library" } ], "properties": { "project": { "type": "string", "description": "The name of the project.", "alias": "p", "$default": { "$source": "projectName" }, "x-prompt": "What is the name of the project for this component?" }, "name": { "type": "string", "description": "The name of the component.", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "What name would you like to use for the component?" }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files.", "default": false }, "skipTests": { "type": "boolean", "description": "When true, does not create `spec.ts` test files for the new component.", "default": false }, "directory": { "type": "string", "description": "Create the component under this directory (can be nested).", "alias": "d" }, "flat": { "type": "boolean", "description": "Create component at the source root rather than its own directory.", "default": false }, "export": { "type": "boolean", "description": "When true, the component is exported from the project `index.ts` (if it exists).", "alias": "e", "default": false, "x-prompt": "Should this component be exported in the project?" }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case component file name (e.g. `App.tsx`).", "alias": "P", "default": false }, "classComponent": { "type": "boolean", "alias": "C", "description": "Use class components instead of functional component.", "default": false } }, "required": ["name", "project"], "presets": [] }, "description": "Create a React Native component.", "aliases": ["c"], "implementation": "/packages/react-native/src/generators/component/component#reactNativeComponentGenerator.ts", "hidden": false, "path": "/packages/react-native/src/generators/component/schema.json" }, { "name": "storybook-configuration", "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator", "schema": { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "NxReactNativeStorybookConfigure", "title": "React native Storybook configuration", "description": "Set up Storybook for a React-Native app or library.", "type": "object", "properties": { "name": { "type": "string", "description": "Project name.", "$default": { "$source": "argv", "index": 0 } }, "generateStories": { "type": "boolean", "description": "Automatically generate *.stories.ts files for components declared in this project?", "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?", "default": true }, "js": { "type": "boolean", "description": "Generate JavaScript story files rather than TypeScript story files.", "default": false }, "tsConfiguration": { "type": "boolean", "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.", "default": false }, "linter": { "description": "The tool to use for running lint checks.", "type": "string", "enum": ["eslint", "tslint"], "default": "eslint" }, "standaloneConfig": { "description": "Split the project configuration into `/project.json` rather than including it inside `workspace.json`.", "type": "boolean" } }, "required": ["name"], "presets": [] }, "description": "Set up Storybook for a React-native application or library.", "hidden": false, "implementation": "/packages/react-native/src/generators/storybook-configuration/configuration#storybookConfigurationGenerator.ts", "aliases": [], "path": "/packages/react-native/src/generators/storybook-configuration/schema.json" }, { "name": "component-story", "factory": "./src/generators/component-story/component-story#componentStoryGenerator", "schema": { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "NxReactNativeComponentStory", "title": "React native component story", "description": "Generate storybook story for a react-native component.", "type": "object", "properties": { "project": { "type": "string", "description": "The project name where to add the components.", "examples": ["shared-ui-component"], "$default": { "$source": "projectName", "index": 0 }, "x-prompt": "What's the name of the project where the component lives?" }, "componentPath": { "type": "string", "description": "Relative path to the component file from the library root.", "examples": ["lib/components"], "x-prompt": "What's path of the component relative to the project's lib root?" } }, "required": ["project", "componentPath"], "presets": [] }, "description": "Generate Storybook story for a React-native component.", "hidden": false, "implementation": "/packages/react-native/src/generators/component-story/component-story#componentStoryGenerator.ts", "aliases": [], "path": "/packages/react-native/src/generators/component-story/schema.json" }, { "name": "stories", "factory": "./src/generators/stories/stories#storiesGenerator", "schema": { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "NxReactNativeStorybookStories", "title": "React native Storybook stories", "description": "React native Storybook stories.", "type": "object", "properties": { "project": { "type": "string", "description": "Library or application name.", "$default": { "$source": "projectName", "index": 0 }, "x-prompt": "What's the name of the project for which you want to generate stories?" } }, "required": ["project"], "presets": [] }, "description": "Create stories/specs for all components declared in an application or library.", "hidden": false, "implementation": "/packages/react-native/src/generators/stories/stories#storiesGenerator.ts", "aliases": [], "path": "/packages/react-native/src/generators/stories/schema.json" }, { "name": "upgrade-native", "factory": "./src/generators/upgrade-native/upgrade-native#reactNativeUpgradeNativeGenerator", "schema": { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "NxReactNativeUpgradeNativeConfigure", "title": "React native upgrade native configuration", "description": "Upgrade native iOS and Android code to latest.", "type": "object", "properties": { "name": { "type": "string", "description": "Project name.", "$default": { "$source": "argv", "index": 0 } }, "displayName": { "description": "The display name to show in the application. Defaults to name.", "type": "string" }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files", "default": false }, "e2eTestRunner": { "description": "Adds the specified e2e test runner.", "type": "string", "enum": ["detox", "none"], "default": "detox" }, "install": { "type": "boolean", "description": "Runs `pod install` for native modules before building iOS app.", "default": true } }, "required": ["name"], "presets": [] }, "description": "Destructive command to upgrade native iOS and Android code to latest.", "hidden": false, "implementation": "/packages/react-native/src/generators/upgrade-native/upgrade-native#reactNativeUpgradeNativeGenerator.ts", "aliases": [], "path": "/packages/react-native/src/generators/upgrade-native/schema.json" } ], "executors": [ { "name": "run-android", "implementation": "/packages/react-native/src/executors/run-android/run-android.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeRunAndroid", "$schema": "http://json-schema.org/schema", "title": "Run Android application", "description": "Run Android target options.", "type": "object", "presets": [ { "name": "Run Android without cache", "keys": ["variant", "sync", "port", "packager", "resetCache"] } ], "properties": { "variant": { "type": "string", "description": "Specify your app's build variant (e.g. `debug`, `release`).", "default": "debug", "examples": ["debug", "release"] }, "appId": { "type": "string", "description": "Specify an `applicationId` to launch after build. If not specified, `package` from `AndroidManifest.xml` will be used." }, "appIdSuffix": { "type": "string", "description": "Specify an `applicationIdSuffix` to launch after build." }, "mainActivity": { "type": "string", "description": "Name of the activity to start.", "default": "MainActivity" }, "deviceId": { "type": "string", "description": "Builds your app and starts it on a specific device/simulator with the given device id (listed by running `adb devices` on the command line)." }, "tasks": { "type": "string", "description": "Run custom Gradle tasks. If this argument is provided, then `--variant` option is ignored. Example: `yarn react-native run-android --tasks clean,installDebug`." }, "jetifier": { "type": "boolean", "description": "Run Jetifier – the AndroidX transition tool. By default it runs before Gradle to ease working with libraries that don't support AndroidX yet.", "default": true }, "sync": { "type": "boolean", "description": "Syncs npm dependencies to `package.json` (for React Native autolink).", "default": true }, "port": { "type": "number", "description": "The port where the packager server is listening on.", "default": 8081 }, "terminal": { "type": "string", "description": "Launches the Metro Bundler in a new window using the specified terminal path." }, "packager": { "type": "boolean", "description": "Starts the packager server.", "default": true }, "resetCache": { "type": "boolean", "description": "Resets metro cache.", "default": false }, "interactive": { "type": "boolean", "description": "Run packager server in interactive mode.", "default": true } } }, "description": "Runs Android application.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/run-android/schema.json" }, { "name": "run-ios", "implementation": "/packages/react-native/src/executors/run-ios/run-ios.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeRunIos", "$schema": "http://json-schema.org/schema", "title": "Run iOS application", "description": "Run iOS target options.", "type": "object", "presets": [ { "name": "Run iOS without cache", "keys": [ "xcodeConfiguration", "install", "sync", "port", "packager", "resetCache" ] } ], "properties": { "xcodeConfiguration": { "type": "string", "description": "Explicitly set the Xcode configuration to use.", "default": "Debug", "examples": ["Debug", "Release"] }, "scheme": { "type": "string", "description": "Explicitly set the Xcode scheme to use." }, "simulator": { "type": "string", "description": "Explicitly set simulator to use. Optionally include iOS version between parenthesis at the end to match an exact version: `iPhone X (12.1)`.", "default": "iPhone X", "examples": ["iPhone X"] }, "device": { "type": "string", "description": "Explicitly set device to use by name. The value is not required if you have a single device connected." }, "install": { "type": "boolean", "description": "Runs `pod install` for native modules before building iOS app.", "default": true }, "sync": { "type": "boolean", "description": "Syncs npm dependencies to `package.json` (for React Native autolink). Always true when `--install` is used.", "default": true }, "port": { "type": "number", "description": "The port where the packager server is listening on.", "default": 8081 }, "terminal": { "type": "string", "description": "Launches the Metro Bundler in a new window using the specified terminal path." }, "packager": { "type": "boolean", "description": "Starts the packager server.", "default": true }, "resetCache": { "type": "boolean", "description": "Resets metro cache.", "default": false }, "interactive": { "type": "boolean", "description": "Run packager server in interactive mode.", "default": true } } }, "description": "Runs iOS application.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/run-ios/schema.json" }, { "name": "bundle", "implementation": "/packages/react-native/src/executors/bundle/bundle.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeBundle", "$schema": "http://json-schema.org/schema", "title": "Offline JS Bundle for React Native", "description": "JS Bundle target options.", "type": "object", "properties": { "dev": { "type": "boolean", "description": "Generate a development build.", "default": true }, "entryFile": { "type": "string", "description": "The entry file relative to project root." }, "bundleOutput": { "type": "string", "description": "The output path of the generated files." }, "maxWorkers": { "type": "number", "description": "The number of workers we should parallelize the transformer on." }, "sourceMap": { "type": "boolean", "description": "Whether source maps should be generated or not." }, "platform": { "description": "Platform to build for (`ios`, `android`).", "type": "string" } }, "required": ["platform", "entryFile", "bundleOutput"], "presets": [] }, "description": "Builds the JavaScript bundle for offline use.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/bundle/schema.json" }, { "name": "build-android", "implementation": "/packages/react-native/src/executors/build-android/build-android.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeBuildAndroid", "$schema": "http://json-schema.org/schema", "title": "Release Build for Android", "description": "Build target options for Android.", "type": "object", "properties": { "apk": { "type": "boolean", "description": "Generate apk file(s) rather than a bundle (`.aab`)." }, "debug": { "type": "boolean", "description": "Generate a debug build instead of a release build." }, "gradleTask": { "type": "string", "description": "Override default gradle task incase of multi build variants" } }, "required": [], "presets": [] }, "description": "Release Build for Android.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/build-android/schema.json" }, { "name": "start", "implementation": "/packages/react-native/src/executors/start/start.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeStart", "$schema": "http://json-schema.org/schema", "title": "Packager Server for React Native", "description": "Packager Server target options.", "type": "object", "properties": { "port": { "type": "number", "description": "The port to listen on.", "default": 8081 }, "resetCache": { "type": "boolean", "description": "Resets metro cache.", "default": false }, "interactive": { "type": "boolean", "description": "Run packager server in interactive mode.", "default": true } }, "presets": [] }, "description": "Starts the Javascript server that communicates with connected devices.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/start/schema.json" }, { "name": "sync-deps", "implementation": "/packages/react-native/src/executors/sync-deps/sync-deps.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeSyncDeps", "$schema": "http://json-schema.org/schema", "title": "Sync Deps for React Native", "description": "Updates `package.json` with project dependencies.", "type": "object", "properties": { "include": { "type": "string", "description": "A comma-separated list of additional npm packages to include. e.g. `nx sync-deps --include=react-native-gesture-handler,react-native-safe-area-context`" } }, "presets": [] }, "description": "Syncs dependencies to `package.json` (required for autolinking).", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/sync-deps/schema.json" }, { "name": "ensure-symlink", "implementation": "/packages/react-native/src/executors/ensure-symlink/ensure-symlink.impl.ts", "schema": { "cli": "nx", "$id": "NxReactNativeEnsureSymlink", "$schema": "http://json-schema.org/schema", "title": "Ensure Symlink for React Native", "description": "Ensure workspace node_modules is symlink under app's node_modules folder.", "type": "object", "properties": {}, "presets": [] }, "description": "Ensure workspace `node_modules` is symlink under app's `node_modules` folder.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/ensure-symlink/schema.json" }, { "name": "storybook", "implementation": "/packages/react-native/src/executors/storybook/storybook.impl.ts", "schema": { "title": "React Native Storybook Load Stories", "cli": "nx", "description": "Load stories for react native.", "type": "object", "properties": { "searchDir": { "type": "string", "description": "The directory or directories, relative to the project root, to search for files in." }, "outputFile": { "type": "string", "description": "The output file that will be written. It is relative to the project directory.", "default": "./.storybook/story-loader.js" }, "pattern": { "type": "string", "description": "The pattern of files to look at. It can be a specific file, or any valid glob. Note: if using the CLI, globs with `**/*...` must be escaped with quotes", "default": "**/*.stories.@(js|jsx|ts|tsx|md)" }, "silent": { "type": "boolean", "description": "Silences output.", "default": false } }, "required": ["searchDir", "outputFile", "pattern"], "presets": [] }, "description": "Serve React Native Storybook.", "aliases": [], "hidden": false, "path": "/packages/react-native/src/executors/storybook/schema.json" } ] }