@nx/react-native 16.0.0-beta.1

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@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.
+ */
+function update(tree) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const projects = (0, devkit_1.getProjects)(tree);
+        projects.forEach((project) => {
+            var _a, _b;
+            if (((_b = (_a = project.targets) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.executor) !== '@nrwl/react-native:start')
+                return;
+            addReactNativeSvgToAppPackageJson(tree, project);
+            addReactNativeSvgToTsconfig(tree, project);
+            mockSvgInJestConfig(tree, project);
+        });
+        yield (0, devkit_1.formatFiles)(tree);
+    });
+}
+exports.default = update;
+function addReactNativeSvgToAppPackageJson(host, project) {
+    const packageJSonPath = `${project.root}/package.json`;
+    if (!host.exists(packageJSonPath))
+        return;
+    (0, devkit_1.updateJson)(host, packageJSonPath, (json) => {
+        const dependencies = json.dependencies || {};
+        dependencies['react-native-svg'] = '*';
+        return json;
+    });
+}
+function addReactNativeSvgToTsconfig(host, project) {
+    const tsconfigPath = `${project.root}/tsconfig.json`;
+    if (!host.exists(tsconfigPath))
+        return;
+    const offset = (0, devkit_1.offsetFromRoot)(project.root);
+    (0, devkit_1.updateJson)(host, tsconfigPath, (json) => {
+        const files = json.files || [];
+        files.push(`${offset}node_modules/@nrwl/react-native/typings/svg.d.ts`);
+        json.files = files;
+        return json;
+    });
+}
+function mockSvgInJestConfig(host, project) {
+    var _a, _b, _c;
+    const jestConfigPath = (_c = (_b = (_a = project.targets) === null || _a === void 0 ? void 0 : _a.test) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.jestConfig;
+    if (!jestConfigPath || !host.exists(jestConfigPath))
+        return;
+    try {
+        const contents = host.read(jestConfigPath, 'utf-8');
+        if (contents.includes('moduleNameMapper'))
+            return;
+        host.write(jestConfigPath, contents.replace(/,([^,]*)$/, `, moduleNameMapper: {'\\.svg': '@nrwl/react-native/plugins/jest/svg-mock'}, $1`));
+    }
+    catch (_d) {
+        devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update ${jestConfigPath} for project ${project.root}.`);
+    }
+}
+//# sourceMappingURL=add-react-native-svg-12-10-0.js.map

package/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-react-native-svg-12-10-0.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.ts"],"names":[],"mappings":";;;AAAA,uCASoB;AAEpB;;;;;GAKG;AACH,SAA8B,MAAM,CAAC,IAAU;;QAC7C,MAAM,QAAQ,GAAG,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;;YAC3B,IAAI,CAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,0CAAE,QAAQ,MAAK,0BAA0B;gBAAE,OAAO;YAE5E,iCAAiC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YACjD,2BAA2B,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAC3C,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA;AAZD,yBAYC;AAED,SAAS,iCAAiC,CACxC,IAAU,EACV,OAA6B;IAE7B,MAAM,eAAe,GAAG,GAAG,OAAO,CAAC,IAAI,eAAe,CAAC;IACvD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;QAAE,OAAO;IAC1C,IAAA,mBAAU,EAAC,IAAI,EAAE,eAAe,EAAE,CAAC,IAAI,EAAE,EAAE;QACzC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC;QAC7C,YAAY,CAAC,kBAAkB,CAAC,GAAG,GAAG,CAAC;QACvC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,2BAA2B,CAClC,IAAU,EACV,OAA6B;IAE7B,MAAM,YAAY,GAAG,GAAG,OAAO,CAAC,IAAI,gBAAgB,CAAC;IACrD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;QAAE,OAAO;IACvC,MAAM,MAAM,GAAG,IAAA,uBAAc,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAA,mBAAU,EAAC,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC/B,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,kDAAkD,CAAC,CAAC;QACxE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,mBAAmB,CAAC,IAAU,EAAE,OAA6B;;IACpE,MAAM,cAAc,GAAG,MAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,IAAI,0CAAE,OAAO,0CAAE,UAAU,CAAC;IAClE,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;QAAE,OAAO;IAC5D,IAAI;QACF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACpD,IAAI,QAAQ,CAAC,QAAQ,CAAC,kBAAkB,CAAC;YAAE,OAAO;QAClD,IAAI,CAAC,KAAK,CACR,cAAc,EACd,QAAQ,CAAC,OAAO,CACd,WAAW,EACX,gFAAgF,CACjF,CACF,CAAC;KACH;IAAC,WAAM;QACN,eAAM,CAAC,KAAK,CACV,IAAA,qBAAY,EAAA,oBAAoB,cAAc,gBAAgB,OAAO,CAAC,IAAI,GAAG,CAC9E,CAAC;KACH;AACH,CAAC"}

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

@@ -0,0 +1,79 @@
+import { addProjectConfiguration, readJson, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import {
+  reactNativeSvgTransformerVersion,
+  reactNativeSvgVersion,
+} from '../../utils/versions';
+import update from './add-react-native-svg-12-10-0';
+
+describe('Add react-native-svg to dev dependencies', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+      targets: {
+        start: {
+          executor: '@nrwl/react-native:start',
+          options: {
+            port: 8081,
+          },
+        },
+        test: {
+          executor: '@nrwl/jest:jest',
+          options: {
+            jestConfig: 'apps/products/jest.config.js',
+            passWithNoTests: true,
+          },
+        },
+      },
+    });
+  });
+
+  it(`should add react-native-svg to app's tsconfig.json and package.json`, async () => {
+    tree.write('apps/products/tsconfig.json', '{}');
+    tree.write(
+      'apps/products/package.json',
+      JSON.stringify({
+        dependencies: {},
+      })
+    );
+    tree.write(
+      'apps/products/jest.config.js',
+      `module.exports = {
+      preset: 'react-native',
+    };`
+    );
+    await update(tree);
+
+    const tsconfig = readJson(tree, 'apps/products/tsconfig.json');
+    expect(tsconfig.files).toEqual([
+      '../../node_modules/@nrwl/react-native/typings/svg.d.ts',
+    ]);
+
+    const packageJson = readJson(tree, 'apps/products/package.json');
+    expect(packageJson.dependencies).toEqual({ 'react-native-svg': '*' });
+
+    const jestConfig = tree.read('apps/products/jest.config.js', 'utf-8');
+    expect(jestConfig).toContain(
+      `moduleNameMapper: { '.svg': '@nrwl/react-native/plugins/jest/svg-mock' },`
+    );
+  });
+
+  it(`should not add react-native-svg to app's tsconfig.json and package.json if files do not exist`, async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: { 'react-native': '*' },
+        devDependencies: {},
+      })
+    );
+
+    await update(tree);
+
+    expect(() => readJson(tree, 'apps/products/tsconfig.json')).toThrow();
+    expect(() => readJson(tree, 'apps/products/package.json')).toThrow();
+  });
+});

package/src/migrations/update-12-5-0/update-jest-for-react-native.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-12-5-0/update-jest-for-react-native.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const path_1 = require("path");
+/**
+ * This function update jest.config.js and test.setup.ts for react native project for Jest 27.
+ * Inside jest.config.js, remove ...workspacePreset because it has testEnvironment set as jsdom.
+ * Just set preset as react-native is sufficient.
+ * Also remove the jest.useFakeTimers() in test.setup.ts.
+ */
+function updateJestConfig(tree) {
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nrwl/jest:jest', (options, project) => {
+        if (!options.jestConfig) {
+            return;
+        }
+        const jestConfigPath = options.jestConfig;
+        const jestConfig = require((0, path_1.join)(tree.root, jestConfigPath));
+        const testEnvironment = jestConfig.testEnvironment;
+        const preset = jestConfig.preset;
+        if (testEnvironment === 'node' || preset !== 'react-native') {
+            return;
+        }
+        try {
+            const contents = tree.read(jestConfigPath, 'utf-8');
+            tree.write(jestConfigPath, contents
+                .replace(`...workspacePreset,`, "resolver: '@nrwl/jest/plugins/resolver',")
+                .replace(`const workspacePreset = require('../../jest.preset');`, ''));
+        }
+        catch (_a) {
+            devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update jest.config.js for project ${project}.`);
+        }
+        try {
+            const { root } = (0, devkit_1.readProjectConfiguration)(tree, project);
+            let setupTestPath;
+            if (tree.exists((0, path_1.join)(root, `test-setup.ts`))) {
+                setupTestPath = (0, path_1.join)(root, `test-setup.ts`);
+            }
+            else if (tree.exists((0, path_1.join)(root, `test-setup.js`))) {
+                setupTestPath = (0, path_1.join)(root, `test-setup.js`);
+            }
+            if (setupTestPath) {
+                const contents = tree.read(setupTestPath, 'utf-8');
+                tree.write(setupTestPath, contents
+                    .replace(`jest.useFakeTimers();`, '')
+                    .replace(`import { jest } from '@jest/globals';`, ''));
+            }
+        }
+        catch (_b) {
+            devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update test-setup for project ${project}.`);
+        }
+    });
+}
+function update(tree) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        updateJestConfig(tree);
+        yield (0, devkit_1.formatFiles)(tree);
+    });
+}
+exports.default = update;
+//# sourceMappingURL=update-jest-for-react-native.js.map

package/src/migrations/update-12-5-0/update-jest-for-react-native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-jest-for-react-native.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/migrations/update-12-5-0/update-jest-for-react-native.ts"],"names":[],"mappings":";;;AAAA,uCAMoB;AACpB,6FAA0F;AAC1F,+BAA4B;AAG5B;;;;;GAKG;AACH,SAAS,gBAAgB,CAAC,IAAU;IAClC,IAAA,+CAAsB,EACpB,IAAI,EACJ,iBAAiB,EACjB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YACvB,OAAO;SACR;QAED,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC;QAC1C,MAAM,UAAU,GAAG,OAAO,CAAC,IAAA,WAAI,EAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;QAC5D,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC;QACnD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAEjC,IAAI,eAAe,KAAK,MAAM,IAAI,MAAM,KAAK,cAAc,EAAE;YAC3D,OAAO;SACR;QAED,IAAI;YACF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,CAAC,KAAK,CACR,cAAc,EACd,QAAQ;iBACL,OAAO,CACN,qBAAqB,EACrB,0CAA0C,CAC3C;iBACA,OAAO,CACN,uDAAuD,EACvD,EAAE,CACH,CACJ,CAAC;SACH;QAAC,WAAM;YACN,eAAM,CAAC,KAAK,CACV,IAAA,qBAAY,EAAA,+CAA+C,OAAO,GAAG,CACtE,CAAC;SACH;QAED,IAAI;YACF,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YACzD,IAAI,aAAqB,CAAC;YAC1B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAA,WAAI,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC,EAAE;gBAC5C,aAAa,GAAG,IAAA,WAAI,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;aAC7C;iBAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAA,WAAI,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC,EAAE;gBACnD,aAAa,GAAG,IAAA,WAAI,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;aAC7C;YAED,IAAI,aAAa,EAAE;gBACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;gBACnD,IAAI,CAAC,KAAK,CACR,aAAa,EACb,QAAQ;qBACL,OAAO,CAAC,uBAAuB,EAAE,EAAE,CAAC;qBACpC,OAAO,CAAC,uCAAuC,EAAE,EAAE,CAAC,CACxD,CAAC;aACH;SACF;QAAC,WAAM;YACN,eAAM,CAAC,KAAK,CACV,IAAA,qBAAY,EAAA,2CAA2C,OAAO,GAAG,CAClE,CAAC;SACH;IACH,CAAC,CACF,CAAC;AACJ,CAAC;AAED,SAA8B,MAAM,CAAC,IAAU;;QAC7C,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA;AAHD,yBAGC"}

package/src/migrations/update-13-5-0/add-babel-config-root-13-5-0.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-13-5-0/add-babel-config-root-13-5-0.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const add_babel_inputs_1 = require("@nx/js/src/utils/add-babel-inputs");
+function update(tree) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const projects = (0, devkit_1.getProjects)(tree);
+        if (tree.exists('/babel.config.json') || tree.exists('/babel.config.js')) {
+            return;
+        }
+        const hasReactNaiveProject = Array.from(projects)
+            .map(([_, project]) => project)
+            .some((project) => { var _a, _b; return ((_b = (_a = project.targets) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.executor) === '@nrwl/react-native:start'; });
+        if (hasReactNaiveProject) {
+            (0, add_babel_inputs_1.addBabelInputs)(tree);
+        }
+        yield (0, devkit_1.formatFiles)(tree);
+    });
+}
+exports.default = update;
+//# sourceMappingURL=add-babel-config-root-13-5-0.js.map

package/src/migrations/update-13-5-0/add-babel-config-root-13-5-0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-babel-config-root-13-5-0.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/migrations/update-13-5-0/add-babel-config-root-13-5-0.ts"],"names":[],"mappings":";;;AAAA,uCAA4D;AAC5D,wEAAmE;AAEnE,SAA8B,MAAM,CAAC,IAAU;;QAC7C,MAAM,QAAQ,GAAG,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE;YACxE,OAAO;SACR;QAED,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC9C,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC;aAC9B,IAAI,CACH,CAAC,OAAO,EAAE,EAAE,eACV,OAAA,CAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,0CAAE,QAAQ,MAAK,0BAA0B,CAAA,EAAA,CAClE,CAAC;QAEJ,IAAI,oBAAoB,EAAE;YACxB,IAAA,iCAAc,EAAC,IAAI,CAAC,CAAC;SACtB;QAED,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA;AAnBD,yBAmBC"}

package/src/migrations/update-13-5-0/add-babel-config-root-13-5-0.spec.ts

@@ -0,0 +1,48 @@
+import { addProjectConfiguration, readJson, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import update from './add-babel-config-root-13-5-0';
+
+describe('Add react-native-svg to dev dependencies', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+      targets: {
+        start: {
+          executor: '@nrwl/react-native:start',
+          options: {
+            port: 8081,
+          },
+        },
+        test: {
+          executor: '@nrwl/jest:jest',
+          options: {
+            jestConfig: 'apps/products/jest.config.js',
+            passWithNoTests: true,
+          },
+        },
+      },
+    });
+  });
+
+  it(`should add babel.config.json at root`, async () => {
+    await update(tree);
+
+    const babelConfigJson = readJson(tree, 'babel.config.json');
+    expect(babelConfigJson).toEqual({
+      babelrcRoots: ['*'],
+    });
+  });
+
+  it(`should not change babel.config.json if it already exists`, async () => {
+    tree.write('babel.config.json', '{}');
+
+    await update(tree);
+
+    const babelConfigJson = readJson(tree, 'babel.config.json');
+    expect(babelConfigJson).toEqual({});
+  });
+});

package/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.d.ts

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+/**
+ * Update svg typings in tsconfig for react native app
+ * Replace node_modules/@nrwl/react/typings/image.d.ts with node_modules/@nrwl/react-native/typings/svg.d.ts
+ */
+export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+/**
+ * Update svg typings in tsconfig for react native app
+ * Replace node_modules/@nrwl/react/typings/image.d.ts with node_modules/@nrwl/react-native/typings/svg.d.ts
+ */
+function update(tree) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const projects = (0, devkit_1.getProjects)(tree);
+        projects.forEach((project) => {
+            var _a, _b;
+            if (((_b = (_a = project.targets) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.executor) !== '@nrwl/react-native:start')
+                return;
+            updateReactNativeSvgTypingInTsconfig(tree, project);
+        });
+        yield (0, devkit_1.formatFiles)(tree);
+    });
+}
+exports.default = update;
+function updateReactNativeSvgTypingInTsconfig(host, project) {
+    const tsconfigPath = `${project.root}/tsconfig.json`;
+    if (!host.exists(tsconfigPath))
+        return;
+    const offset = (0, devkit_1.offsetFromRoot)(project.root);
+    (0, devkit_1.updateJson)(host, tsconfigPath, (json) => {
+        const files = json.files || [];
+        const imageTypingIndex = files.findIndex((file) => file === `${offset}node_modules/@nrwl/react/typings/image.d.ts`);
+        const reactNativeSvgTypingPath = `${offset}node_modules/@nrwl/react-native/typings/svg.d.ts`;
+        if (imageTypingIndex === -1) {
+            files.push(reactNativeSvgTypingPath);
+        }
+        else {
+            files[imageTypingIndex] = reactNativeSvgTypingPath;
+        }
+        json.files = files;
+        return json;
+    });
+}
+//# sourceMappingURL=update-react-native-typing-svg-13-5-0.js.map

package/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-react-native-typing-svg-13-5-0.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.ts"],"names":[],"mappings":";;;AAAA,uCAOoB;AAEpB;;;GAGG;AACH,SAA8B,MAAM,CAAC,IAAU;;QAC7C,MAAM,QAAQ,GAAG,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;;YAC3B,IAAI,CAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,0CAAE,QAAQ,MAAK,0BAA0B;gBAAE,OAAO;YAC5E,oCAAoC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA;AATD,yBASC;AAED,SAAS,oCAAoC,CAC3C,IAAU,EACV,OAA6B;IAE7B,MAAM,YAAY,GAAG,GAAG,OAAO,CAAC,IAAI,gBAAgB,CAAC;IACrD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;QAAE,OAAO;IACvC,MAAM,MAAM,GAAG,IAAA,uBAAc,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAA,mBAAU,EAAC,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC/B,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CACtC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,MAAM,6CAA6C,CAC1E,CAAC;QACF,MAAM,wBAAwB,GAAG,GAAG,MAAM,kDAAkD,CAAC;QAC7F,IAAI,gBAAgB,KAAK,CAAC,CAAC,EAAE;YAC3B,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACtC;aAAM;YACL,KAAK,CAAC,gBAAgB,CAAC,GAAG,wBAAwB,CAAC;SACpD;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC"}

package/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.spec.ts

@@ -0,0 +1,61 @@
+import { addProjectConfiguration, readJson, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import update from './update-react-native-typing-svg-13-5-0';
+
+describe('Update svg typings in tsconfig for react native app', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+      targets: {
+        start: {
+          executor: '@nrwl/react-native:start',
+          options: {
+            port: 8081,
+          },
+        },
+        test: {
+          executor: '@nrwl/jest:jest',
+          options: {
+            jestConfig: 'apps/products/jest.config.js',
+            passWithNoTests: true,
+          },
+        },
+      },
+    });
+  });
+
+  it(`should add svg typing to tsconfig.json`, async () => {
+    tree.write('apps/products/tsconfig.json', '{}');
+    await update(tree);
+
+    const tsconfig = readJson(tree, 'apps/products/tsconfig.json');
+    expect(tsconfig.files).toEqual([
+      '../../node_modules/@nrwl/react-native/typings/svg.d.ts',
+    ]);
+  });
+
+  it(`should update to svg typing in tsconfig.json if image typing from react exists`, async () => {
+    tree.write(
+      'apps/products/tsconfig.json',
+      `{
+        "files": ["../../node_modules/@nrwl/react/typings/image.d.ts"]
+      }`
+    );
+    await update(tree);
+
+    const tsconfig = readJson(tree, 'apps/products/tsconfig.json');
+    expect(tsconfig.files).toEqual([
+      '../../node_modules/@nrwl/react-native/typings/svg.d.ts',
+    ]);
+  });
+
+  it(`should update app's tsconfig.json and package.json if file does not exist`, async () => {
+    await update(tree);
+
+    expect(() => readJson(tree, 'apps/products/tsconfig.json')).toThrow();
+  });
+});

package/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.d.ts

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+/**
+ * Add projectRoot and watchFolders options in metro.config.js
+ * @param tree
+ */
+export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+/**
+ * Add projectRoot and watchFolders options in metro.config.js
+ * @param tree
+ */
+function update(tree) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const projects = (0, devkit_1.getProjects)(tree);
+        projects.forEach((project) => {
+            var _a, _b;
+            const metroConfigPath = `${project.root}/metro.config.js`;
+            if (((_b = (_a = project.targets) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.executor) !== '@nrwl/react-native:start' ||
+                !tree.exists(metroConfigPath))
+                return;
+            try {
+                const metroConfigContent = tree.read(metroConfigPath, 'utf-8');
+                if (metroConfigContent.includes('projectRoot: __dirname')) {
+                    return;
+                }
+                tree.write(metroConfigPath, metroConfigContent.replace('debug: ', 'projectRoot: __dirname, watchFolders: [], debug: '));
+            }
+            catch (_c) {
+                devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update ${metroConfigPath} for project ${project.root}.`);
+            }
+        });
+        yield (0, devkit_1.formatFiles)(tree);
+    });
+}
+exports.default = update;
+//# sourceMappingURL=add-project-root-metro-config-14-0-0.js.map

package/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-project-root-metro-config-14-0-0.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.ts"],"names":[],"mappings":";;;AAAA,uCAMoB;AAEpB;;;GAGG;AACH,SAA8B,MAAM,CAAC,IAAU;;QAC7C,MAAM,QAAQ,GAAG,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;;YAC3B,MAAM,eAAe,GAAG,GAAG,OAAO,CAAC,IAAI,kBAAkB,CAAC;YAC1D,IACE,CAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,0CAAE,QAAQ,MAAK,0BAA0B;gBAC/D,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;gBAE7B,OAAO;YACT,IAAI;gBACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC/D,IAAI,kBAAkB,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EAAE;oBACzD,OAAO;iBACR;gBACD,IAAI,CAAC,KAAK,CACR,eAAe,EACf,kBAAkB,CAAC,OAAO,CACxB,SAAS,EACT,mDAAmD,CACpD,CACF,CAAC;aACH;YAAC,WAAM;gBACN,eAAM,CAAC,KAAK,CACV,IAAA,qBAAY,EAAA,oBAAoB,eAAe,gBAAgB,OAAO,CAAC,IAAI,GAAG,CAC/E,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QACH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA;AA7BD,yBA6BC"}

package/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.spec.ts

@@ -0,0 +1,192 @@
+import { addProjectConfiguration, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+
+import update from './add-project-root-metro-config-14-0-0';
+
+describe('Add projectRoot option in metro.config.js', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+      targets: {
+        start: {
+          executor: '@nrwl/react-native:start',
+          options: {
+            port: 8081,
+          },
+        },
+      },
+    });
+  });
+
+  it(`should update metro.config.js and add key projectRoot`, 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: {
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+      },
+    },
+    {
+      // Change this to true to see debugging info.
+      // Useful if you have issues resolving modules
+      debug: false,
+      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+      extensions: [],
+    }
+  );
+})();
+`
+    );
+    await update(tree);
+
+    expect(tree.read('apps/products/metro.config.js', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "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: {
+              assetExts: assetExts.filter((ext) => ext !== 'svg'),
+              sourceExts: [...sourceExts, 'svg'],
+              resolverMainFields: ['sbmodern', 'browser', 'main'],
+            },
+          },
+          {
+            // Change this to true to see debugging info.
+            // Useful if you have issues resolving modules
+            projectRoot: __dirname,
+            watchFolders: [],
+            debug: false,
+            // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+            extensions: [],
+          }
+        );
+      })();
+      "
+    `);
+  });
+
+  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: {
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+      },
+    },
+    {
+      projectRoot: __dirname,
+      // Change this to true to see debugging info.
+      // Useful if you have issues resolving modules
+      debug: false,
+      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+      extensions: [],
+    }
+  );
+})();
+`
+    );
+    await update(tree);
+
+    expect(tree.read('apps/products/metro.config.js', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "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: {
+              assetExts: assetExts.filter((ext) => ext !== 'svg'),
+              sourceExts: [...sourceExts, 'svg'],
+              resolverMainFields: ['sbmodern', 'browser', 'main'],
+            },
+          },
+          {
+            projectRoot: __dirname,
+            // Change this to true to see debugging info.
+            // Useful if you have issues resolving modules
+            debug: false,
+            // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+            extensions: [],
+          }
+        );
+      })();
+      "
+    `);
+  });
+});

package/src/migrations/update-14-0-0/update-entry-file-bundle-14-0-0.d.ts

@@ -0,0 +1,5 @@
+import { Tree } from '@nx/devkit';
+/**
+ * This function udpate the entry file option under bundle target for react native apps
+ */
+export default function update(tree: Tree): Promise<void>;