@nx/react-native 16.0.0-beta.1

package/src/generators/storybook-configuration/files/root/story-loader.js.template

@@ -0,0 +1,13 @@
+// Auto-generated file created by react-native-storybook-loader
+// Do not edit.
+//
+// https://github.com/elderfo/react-native-storybook-loader.git
+
+function loadStories() {}
+
+const stories = [];
+
+module.exports = {
+  loadStories,
+  stories,
+};

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.d.ts

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+import { StorybookConfigureSchema } from '../schema';
+/**
+ * Add resolverMainFields in metro.config.js
+ */
+export declare function addResolverMainFieldsToMetroConfig(host: Tree, schema: StorybookConfigureSchema): void;

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addResolverMainFieldsToMetroConfig = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+/**
+ * Add resolverMainFields in metro.config.js
+ */
+function addResolverMainFieldsToMetroConfig(host, schema) {
+    const { root } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+    const metroConfigPath = (0, path_1.join)(root, 'metro.config.js');
+    try {
+        devkit_1.logger.debug(`Updating resolverMainFields for ${metroConfigPath}`);
+        const metroConfigContent = host.read(metroConfigPath, 'utf-8');
+        if (metroConfigContent.includes('resolverMainFields:')) {
+            devkit_1.logger.warn((0, devkit_1.stripIndents) `${metroConfigPath} is already udpated.`);
+            return;
+        }
+        host.write(metroConfigPath, metroConfigContent.replace(/},\s+resolver: {/, `},resolver: { resolverMainFields: ['sbmodern', 'browser', 'main'],`));
+    }
+    catch (_a) {
+        devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update ${metroConfigPath} for project ${root}.`);
+    }
+}
+exports.addResolverMainFieldsToMetroConfig = addResolverMainFieldsToMetroConfig;
+//# sourceMappingURL=add-resolver-main-fields-to-metro-config.js.map

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-resolver-main-fields-to-metro-config.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.ts"],"names":[],"mappings":";;;AAAA,uCAKoB;AACpB,+BAA4B;AAI5B;;GAEG;AACH,SAAgB,kCAAkC,CAChD,IAAU,EACV,MAAgC;IAEhC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7D,MAAM,eAAe,GAAG,IAAA,WAAI,EAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAEtD,IAAI;QACF,eAAM,CAAC,KAAK,CAAC,mCAAmC,eAAe,EAAE,CAAC,CAAC;QACnE,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QAC/D,IAAI,kBAAkB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;YACtD,eAAM,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAA,GAAG,eAAe,sBAAsB,CAAC,CAAC;YAClE,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CACR,eAAe,EACf,kBAAkB,CAAC,OAAO,CACxB,kBAAkB,EAClB,oEAAoE,CACrE,CACF,CAAC;KACH;IAAC,WAAM;QACN,eAAM,CAAC,KAAK,CACV,IAAA,qBAAY,EAAA,oBAAoB,eAAe,gBAAgB,IAAI,GAAG,CACvE,CAAC;KACH;AACH,CAAC;AA3BD,gFA2BC"}

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.spec.ts

@@ -0,0 +1,161 @@
+import { addProjectConfiguration, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+
+import { formatFile } from '../../../utils/format-file';
+
+import { addResolverMainFieldsToMetroConfig } from './add-resolver-main-fields-to-metro-config';
+
+describe('addResolverMainFieldsToMetroConfig', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+    });
+  });
+
+  it(`should update metro.config.js and add key projectRoot`, async () => {
+    tree.write(
+      'apps/products/metro.config.js',
+      formatFile`
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig } = require('metro-config');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
+      },
+    }
+  );
+})();`
+    );
+    addResolverMainFieldsToMetroConfig(tree, {
+      name: 'products',
+    });
+
+    expect(
+      formatFile`${tree.read('apps/products/metro.config.js', 'utf-8')}`
+    ).toEqual(
+      formatFile`
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig } = require('metro-config');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
+      },
+    }
+  );
+})();`
+    );
+  });
+
+  it(`should not udpate metro.config.js if projectRoot already exists`, async () => {
+    tree.write(
+      'apps/products/metro.config.js',
+      `
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        resolverMainFields: ['main'],
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+      },
+    },
+  );
+})();
+`
+    );
+    addResolverMainFieldsToMetroConfig(tree, {
+      name: 'products',
+    });
+
+    expect(tree.read('apps/products/metro.config.js', 'utf-8')).toEqual(
+      `
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        resolverMainFields: ['main'],
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+      },
+    },
+  );
+})();
+`
+    );
+  });
+});

package/src/generators/storybook-configuration/lib/create-storybook-files.d.ts

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+import { StorybookConfigureSchema } from '../schema';
+/**
+ * This function generate ./storybook under project root.
+ */
+export declare function createStorybookFiles(host: Tree, schema: StorybookConfigureSchema): Promise<void>;

package/src/generators/storybook-configuration/lib/create-storybook-files.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStorybookFiles = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const chalk = require("chalk");
+/**
+ * This function generate ./storybook under project root.
+ */
+function createStorybookFiles(host, schema) {
+    var _a, _b;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { root, projectType, targets, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+        // do not proceed if not a react native project
+        if (((_a = targets === null || targets === void 0 ? void 0 : targets.start) === null || _a === void 0 ? void 0 : _a.executor) !== '@nrwl/react-native:start' &&
+            ((_b = targets === null || targets === void 0 ? void 0 : targets.start) === null || _b === void 0 ? void 0 : _b.executor) !== '@nrwl/expo:start') {
+            devkit_1.logger.error(`Unable to add storybook to ${schema.name}. It is not a Nx React Native / Expo project.`);
+            return;
+        }
+        const storybookUIFileName = schema.js ? 'storybook.js' : 'storybook.ts';
+        const storybookUIFilePath = (0, path_1.join)(root, `./${storybookUIFileName}`);
+        if (host.exists(storybookUIFilePath)) {
+            devkit_1.logger.warn(`${storybookUIFileName} file already exists for ${projectType} ${schema.name}! Skipping generating this file.`);
+            return;
+        }
+        if (projectType !== 'application') {
+            devkit_1.logger.info(`${chalk.bold.cyan('info')} To see your Storybook stories on the device, you should start your mobile app for the <platform> of your choice (typically ios or android).`);
+        }
+        // copy files to app's .storybook folder
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app'), (0, path_1.join)(root, 'src', 'storybook'), {
+            tmpl: '',
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(sourceRoot),
+        });
+        // copy files to workspace root's .storybook folder
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/root'), (0, path_1.join)(root, (0, devkit_1.offsetFromRoot)(root), '.storybook'), {
+            tmpl: '',
+        });
+        if (schema.js) {
+            (0, devkit_1.toJS)(host);
+        }
+    });
+}
+exports.createStorybookFiles = createStorybookFiles;
+//# sourceMappingURL=create-storybook-files.js.map

package/src/generators/storybook-configuration/lib/create-storybook-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-storybook-files.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/storybook-configuration/lib/create-storybook-files.ts"],"names":[],"mappings":";;;;AAAA,uCAOoB;AACpB,+BAA4B;AAC5B,+BAA+B;AAI/B;;GAEG;AACH,SAAsB,oBAAoB,CACxC,IAAU,EACV,MAAgC;;;QAEhC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,iCAAwB,EACzE,IAAI,EACJ,MAAM,CAAC,IAAI,CACZ,CAAC;QAEF,+CAA+C;QAC/C,IACE,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,QAAQ,MAAK,0BAA0B;YACvD,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,QAAQ,MAAK,kBAAkB,EAC/C;YACA,eAAM,CAAC,KAAK,CACV,8BAA8B,MAAM,CAAC,IAAI,+CAA+C,CACzF,CAAC;YACF,OAAO;SACR;QAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC;QACxE,MAAM,mBAAmB,GAAG,IAAA,WAAI,EAAC,IAAI,EAAE,KAAK,mBAAmB,EAAE,CAAC,CAAC;QAEnE,IAAI,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;YACpC,eAAM,CAAC,IAAI,CACT,GAAG,mBAAmB,4BAA4B,WAAW,IAAI,MAAM,CAAC,IAAI,kCAAkC,CAC/G,CAAC;YACF,OAAO;SACR;QACD,IAAI,WAAW,KAAK,aAAa,EAAE;YACjC,eAAM,CAAC,IAAI,CACT,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAChB,MAAM,CACP,8IAA8I,CAChJ,CAAC;SACH;QAED,wCAAwC;QACxC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,cAAc,CAAC,EAC/B,IAAA,WAAI,EAAC,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,EAC9B;YACE,IAAI,EAAE,EAAE;YACR,cAAc,EAAE,IAAA,uBAAc,EAAC,UAAU,CAAC;SAC3C,CACF,CAAC;QAEF,mDAAmD;QACnD,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,eAAe,CAAC,EAChC,IAAA,WAAI,EAAC,IAAI,EAAE,IAAA,uBAAc,EAAC,IAAI,CAAC,EAAE,YAAY,CAAC,EAC9C;YACE,IAAI,EAAE,EAAE;SACT,CACF,CAAC;QAEF,IAAI,MAAM,CAAC,EAAE,EAAE;YACb,IAAA,aAAI,EAAC,IAAI,CAAC,CAAC;SACZ;;CACF;AA7DD,oDA6DC"}

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.d.ts

@@ -0,0 +1,7 @@
+import { Tree } from '@nx/devkit';
+import { StorybookConfigureSchema } from '../schema';
+/**
+ * To replace the import statement for storybook.
+ * Need to import app with storybook toggle from .storybook/toggle-storybook
+ */
+export declare function replaceAppImportWithStorybookToggle(host: Tree, schema: StorybookConfigureSchema): void;

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceAppImportWithStorybookToggle = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+/**
+ * To replace the import statement for storybook.
+ * Need to import app with storybook toggle from .storybook/toggle-storybook
+ */
+function replaceAppImportWithStorybookToggle(host, schema) {
+    const { root, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+    const mainFilePath = (0, path_1.join)(sourceRoot, schema.js ? 'main.js' : 'main.tsx');
+    const appImportImport = `import App from './app/App';`;
+    const storybookeToggleImport = `import App from './storybook/toggle-storybook';`;
+    try {
+        devkit_1.logger.debug(`Updating import for ${mainFilePath}`);
+        const contents = host.read(mainFilePath, 'utf-8');
+        if (!contents.includes(appImportImport) ||
+            contents.includes(storybookeToggleImport)) {
+            devkit_1.logger.warn((0, devkit_1.stripIndents) `${mainFilePath} is already udpated.`);
+            return;
+        }
+        host.write(mainFilePath, contents.replace(appImportImport, storybookeToggleImport));
+    }
+    catch (_a) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to update import in ${mainFilePath} for project ${root}.`);
+    }
+}
+exports.replaceAppImportWithStorybookToggle = replaceAppImportWithStorybookToggle;
+//# sourceMappingURL=replace-app-import-with-storybook-toggle.js.map

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace-app-import-with-storybook-toggle.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts"],"names":[],"mappings":";;;AAAA,uCAKoB;AACpB,+BAA4B;AAI5B;;;GAGG;AACH,SAAgB,mCAAmC,CACjD,IAAU,EACV,MAAgC;IAEhC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzE,MAAM,YAAY,GAAG,IAAA,WAAI,EAAC,UAAU,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,8BAA8B,CAAC;IACvD,MAAM,sBAAsB,GAAG,iDAAiD,CAAC;IAEjF,IAAI;QACF,eAAM,CAAC,KAAK,CAAC,uBAAuB,YAAY,EAAE,CAAC,CAAC;QACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAClD,IACE,CAAC,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC;YACnC,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EACzC;YACA,eAAM,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAA,GAAG,YAAY,sBAAsB,CAAC,CAAC;YAC/D,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CACR,YAAY,EACZ,QAAQ,CAAC,OAAO,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAC1D,CAAC;KACH;IAAC,WAAM;QACN,eAAM,CAAC,IAAI,CACT,IAAA,qBAAY,EAAA,8BAA8B,YAAY,gBAAgB,IAAI,GAAG,CAC9E,CAAC;KACH;AACH,CAAC;AA7BD,kFA6BC"}

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts

@@ -0,0 +1,65 @@
+import { addProjectConfiguration, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+
+import { formatFile } from '../../../utils/format-file';
+
+import { replaceAppImportWithStorybookToggle } from './replace-app-import-with-storybook-toggle';
+
+describe('replaceAppImportWithStorybookToggle', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+    });
+  });
+
+  it('should update the main file with import from storybook', async () => {
+    tree.write(
+      '/apps/products/src/main.tsx',
+      formatFile`import { AppRegistry } from 'react-native';
+      import App from './app/App';
+      
+      AppRegistry.registerComponent('main', () => App);
+      `
+    );
+    replaceAppImportWithStorybookToggle(tree, {
+      name: 'products',
+      js: false,
+    });
+
+    const mainFile = tree.read('apps/products/src/main.tsx', 'utf-8');
+    expect(formatFile`${mainFile}`).toEqual(
+      formatFile`import { AppRegistry } from 'react-native';
+      import App from './storybook/toggle-storybook';
+      
+      AppRegistry.registerComponent('main', () => App);`
+    );
+  });
+
+  it('should not update the main file if import is already updated', async () => {
+    tree.write(
+      '/apps/products/src/main.tsx',
+      formatFile`import { AppRegistry } from 'react-native';
+      import App from './app/App';
+      
+      AppRegistry.registerComponent('main', () => App);
+      `
+    );
+    replaceAppImportWithStorybookToggle(tree, {
+      name: 'products',
+      js: false,
+    });
+
+    const mainFile = tree.read('apps/products/src/main.tsx', 'utf-8');
+    expect(formatFile`${mainFile}`).toEqual(
+      formatFile`import { AppRegistry } from 'react-native';
+      import App from './storybook/toggle-storybook';
+      
+      AppRegistry.registerComponent('main', () => App);`
+    );
+  });
+});

package/src/generators/storybook-configuration/schema.d.ts

@@ -0,0 +1,11 @@
+import { Linter } from '@nx/linter';
+
+export interface StorybookConfigureSchema {
+  name: string;
+  generateStories?: boolean;
+  js?: boolean;
+  tsConfiguration?: boolean;
+  linter?: Linter;
+  standaloneConfig?: boolean;
+  ignorePaths?: string[];
+}

package/src/generators/storybook-configuration/schema.json

@@ -0,0 +1,66 @@
+{
+  "$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",
+      "aliases": ["project", "projectName"],
+      "description": "Project for which to generate Storybook configuration.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "For which project do you want to generate Storybook configuration?",
+      "x-dropdown": "projects"
+    },
+    "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,
+      "x-priority": "important"
+    },
+    "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"],
+      "default": "eslint"
+    },
+    "standaloneConfig": {
+      "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
+      "type": "boolean",
+      "default": true,
+      "x-deprecated": "Nx only supports standaloneConfig"
+    },
+    "ignorePaths": {
+      "type": "array",
+      "description": "Paths to ignore when looking for components.",
+      "items": {
+        "type": "string",
+        "description": "Path to ignore."
+      },
+      "examples": [
+        "apps/my-app/src/not-stories/**",
+        "**/**/src/**/not-stories/**",
+        "libs/my-lib/**/*.something.ts",
+        "**/**/src/**/*.other.*",
+        "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+      ]
+    }
+  },
+  "required": ["name"]
+}

package/src/generators/upgrade-native/lib/create-native-files.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { UpgradeNativeConfigureSchema } from '../schema';
+export declare function createNativeFiles(host: Tree, schema: UpgradeNativeConfigureSchema, appProjectRoot: string): void;

package/src/generators/upgrade-native/lib/create-native-files.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNativeFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const normalize_options_1 = require("./normalize-options");
+function createNativeFiles(host, schema, appProjectRoot) {
+    const options = (0, normalize_options_1.normalizeOptions)(schema, appProjectRoot);
+    const iosProjectRoot = (0, devkit_1.joinPathFragments)(appProjectRoot, 'ios');
+    const androidProjectRoot = (0, devkit_1.joinPathFragments)(appProjectRoot, 'android');
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../../application/files/app/ios'), iosProjectRoot, options);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../../application/files/app/android'), androidProjectRoot, options);
+}
+exports.createNativeFiles = createNativeFiles;
+//# sourceMappingURL=create-native-files.js.map

package/src/generators/upgrade-native/lib/create-native-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-native-files.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/upgrade-native/lib/create-native-files.ts"],"names":[],"mappings":";;;AAAA,uCAAoE;AACpE,+BAA4B;AAC5B,2DAAuD;AAIvD,SAAgB,iBAAiB,CAC/B,IAAU,EACV,MAAoC,EACpC,cAAsB;IAEtB,MAAM,OAAO,GAAG,IAAA,oCAAgB,EAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,IAAA,0BAAiB,EAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAChE,MAAM,kBAAkB,GAAG,IAAA,0BAAiB,EAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IAExE,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,iCAAiC,CAAC,EAClD,cAAc,EACd,OAAO,CACR,CAAC;IAEF,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,qCAAqC,CAAC,EACtD,kBAAkB,EAClB,OAAO,CACR,CAAC;AACJ,CAAC;AAvBD,8CAuBC"}

package/src/generators/upgrade-native/lib/normalize-options.d.ts

@@ -0,0 +1,12 @@
+import { UpgradeNativeConfigureSchema } from '../schema';
+export interface NormalizedSchema {
+    name: string;
+    displayName: string;
+    className: string;
+    lowerCaseName: string;
+    entryFile: string;
+    entryFileIos: string;
+    e2eTestRunner: 'detox' | 'none';
+    offsetFromRoot: string;
+}
+export declare function normalizeOptions(options: UpgradeNativeConfigureSchema, appProjectRoot: string): NormalizedSchema;

package/src/generators/upgrade-native/lib/normalize-options.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+function normalizeOptions(options, appProjectRoot // app root
+) {
+    const { fileName, className } = (0, devkit_1.names)(options.name);
+    const entryFileIos = 'src/main';
+    const entryFile = options.js ? 'src/main.js' : 'src/main.tsx';
+    /**
+     * if options.name is "my-app"
+     * name: "my-app", className: 'MyApp', lowerCaseName: 'myapp', displayName: 'MyApp'
+     * if options.name is "myApp"
+     * name: "my-app", className: 'MyApp', lowerCaseName: 'myapp', displayName: 'MyApp'
+     */
+    return {
+        name: fileName,
+        className,
+        lowerCaseName: className.toLowerCase(),
+        displayName: options.displayName || className,
+        entryFile,
+        entryFileIos,
+        e2eTestRunner: options.e2eTestRunner,
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(appProjectRoot),
+    };
+}
+exports.normalizeOptions = normalizeOptions;
+//# sourceMappingURL=normalize-options.js.map

package/src/generators/upgrade-native/lib/normalize-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-options.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/upgrade-native/lib/normalize-options.ts"],"names":[],"mappings":";;;AAAA,uCAAmD;AAcnD,SAAgB,gBAAgB,CAC9B,OAAqC,EACrC,cAAsB,CAAC,WAAW;;IAElC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,UAAU,CAAC;IAChC,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;IAE9D;;;;;OAKG;IACH,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,SAAS;QACT,aAAa,EAAE,SAAS,CAAC,WAAW,EAAE;QACtC,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,SAAS;QAC7C,SAAS;QACT,YAAY;QACZ,aAAa,EAAE,OAAO,CAAC,aAAa;QACpC,cAAc,EAAE,IAAA,uBAAc,EAAC,cAAc,CAAC;KAC/C,CAAC;AACJ,CAAC;AAzBD,4CAyBC"}

package/src/generators/upgrade-native/schema.d.ts

@@ -0,0 +1,9 @@
+import { Linter } from '@nx/linter';
+
+export interface UpgradeNativeConfigureSchema {
+  name: string;
+  displayName?: string;
+  js: boolean; // default is false
+  e2eTestRunner: 'detox' | 'none'; // default is detox
+  install: boolean; // default is true
+}

package/src/generators/upgrade-native/schema.json

@@ -0,0 +1,41 @@
+{
+  "$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": "Application project name to upgrade native files.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-dropdown": "project"
+    },
+    "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,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["name"]
+}

package/src/generators/upgrade-native/upgrade-native.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This function is a destructive command that replace React Native iOS and Android code with latest.
+ * It would replace the Android and iOS folder entirely.
+ */
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { UpgradeNativeConfigureSchema } from './schema';
+export declare function reactNativeUpgradeNativeGenerator(host: Tree, schema: UpgradeNativeConfigureSchema): Promise<GeneratorCallback>;
+export default reactNativeUpgradeNativeGenerator;
+export declare const reactNativeUpgradeNativeSchematic: (generatorOptions: UpgradeNativeConfigureSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/upgrade-native/upgrade-native.js

@@ -0,0 +1,33 @@
+"use strict";
+/**
+ * This function is a destructive command that replace React Native iOS and Android code with latest.
+ * It would replace the Android and iOS folder entirely.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactNativeUpgradeNativeSchematic = exports.reactNativeUpgradeNativeGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+const pod_install_task_1 = require("../../utils/pod-install-task");
+const chmod_android_gradle_files_1 = require("../../utils/chmod-android-gradle-files");
+const create_native_files_1 = require("./lib/create-native-files");
+function reactNativeUpgradeNativeGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { projectType, root: appProjectRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+        const iosProjectRoot = (0, devkit_1.joinPathFragments)(host.root, appProjectRoot, 'ios');
+        const androidProjectRoot = (0, devkit_1.joinPathFragments)(host.root, appProjectRoot, 'android');
+        if (projectType !== 'application' ||
+            !(0, fs_1.existsSync)(iosProjectRoot) ||
+            !(0, fs_1.existsSync)(androidProjectRoot)) {
+            throw new Error(`Could not upgrade React Native code for ${schema.name}`);
+        }
+        (0, create_native_files_1.createNativeFiles)(host, schema, appProjectRoot);
+        const podInstallTask = (0, pod_install_task_1.runPodInstall)(iosProjectRoot, schema.install);
+        const chmodTaskGradlew = (0, chmod_android_gradle_files_1.chmodAndroidGradlewFilesTask)(androidProjectRoot);
+        return (0, devkit_1.runTasksInSerial)(podInstallTask, chmodTaskGradlew);
+    });
+}
+exports.reactNativeUpgradeNativeGenerator = reactNativeUpgradeNativeGenerator;
+exports.default = reactNativeUpgradeNativeGenerator;
+exports.reactNativeUpgradeNativeSchematic = (0, devkit_1.convertNxGenerator)(reactNativeUpgradeNativeGenerator);
+//# sourceMappingURL=upgrade-native.js.map

package/src/generators/upgrade-native/upgrade-native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upgrade-native.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/generators/upgrade-native/upgrade-native.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;;AAEH,uCAOoB;AACpB,2BAAgC;AAEhC,mEAA6D;AAC7D,uFAAsF;AAEtF,mEAA8D;AAG9D,SAAsB,iCAAiC,CACrD,IAAU,EACV,MAAoC;;QAEpC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,IAAA,iCAAwB,EACpE,IAAI,EACJ,MAAM,CAAC,IAAI,CACZ,CAAC;QACF,MAAM,cAAc,GAAG,IAAA,0BAAiB,EAAC,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;QAC3E,MAAM,kBAAkB,GAAG,IAAA,0BAAiB,EAC1C,IAAI,CAAC,IAAI,EACT,cAAc,EACd,SAAS,CACV,CAAC;QAEF,IACE,WAAW,KAAK,aAAa;YAC7B,CAAC,IAAA,eAAU,EAAC,cAAc,CAAC;YAC3B,CAAC,IAAA,eAAU,EAAC,kBAAkB,CAAC,EAC/B;YACA,MAAM,IAAI,KAAK,CAAC,2CAA2C,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;SAC3E;QAED,IAAA,uCAAiB,EAAC,IAAI,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC;QAEhD,MAAM,cAAc,GAAG,IAAA,gCAAa,EAAC,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QACrE,MAAM,gBAAgB,GAAG,IAAA,yDAA4B,EAAC,kBAAkB,CAAC,CAAC;QAE1E,OAAO,IAAA,yBAAgB,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAC5D,CAAC;CAAA;AA7BD,8EA6BC;AAED,kBAAe,iCAAiC,CAAC;AACpC,QAAA,iCAAiC,GAAG,IAAA,2BAAkB,EACjE,iCAAiC,CAClC,CAAC"}

package/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.d.ts

@@ -0,0 +1,8 @@
+import { Tree } from '@nx/devkit';
+/**
+ * Add support to display svg in react native:
+ * - Add react-native-svg-transform and react-native-svg packages to workspace's package.json.
+ * - Add typing to app's tsconfig.json.
+ * - Add react-native-svg to app's package.json.
+ */
+export default function update(tree: Tree): Promise<void>;