fix(react-native): update typing for svg in react native (#8399)

packages/react-native/migrations.json

@@ -11,6 +11,12 @@
       "cli": "nx",
       "description": "Add support to display svg in react native",
       "factory": "./src/migrations/update-12-10-0/add-react-native-svg-12-10-0"
+    },
+    "update-react-native-typing-svg-13-5-0": {
+      "version": "13.5.0-beta.0",
+      "cli": "nx",
+      "description": "Update typing for svg in react native",
+      "factory": "./src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0"
     }
   },
   "packageJsonUpdates": {

packages/react-native/plugins/jest/svg-mock.ts

@@ -1,4 +1,3 @@
 // From https://github.com/kristerkari/react-native-svg-transformer#usage-with-jest
-// __mocks__/svgMock.js
 module.exports = 'SvgMock';
 module.exports.ReactComponent = 'SvgMock';

packages/react-native/project.json

@@ -46,18 +46,23 @@
           {
             "input": "./packages/react-native/src",
             "glob": "**/*.!(ts)",
-            "output": "./src"
+            "output": "/src"
           },
           {
             "input": "./packages/react-native",
             "glob": "*.rb",
-            "output": "."
+            "output": "/"
           },
           {
             "input": "./packages/react-native",
             "glob": "**/*.json",
             "ignore": ["**/tsconfig*.json"],
             "output": "/"
+          },
+          {
+            "input": "packages/react-native",
+            "glob": "**/*.d.ts",
+            "output": "/"
           }
         ]
       },

packages/react-native/src/generators/application/files/app/src/app/App.tsx.template

@@ -75,7 +75,7 @@ const App = () => {
             </View>
           </View>
           <View style={styles.section}>
-            <View style={[styles.middleContent, styles.shadowBox]}>
+            <View style={[styles.shadowBox]}>
               <Text style={[styles.marginBottomMd, styles.textLg]}>
                 Learning materials
               </Text>
@@ -371,7 +371,7 @@ const styles = StyleSheet.create({
   },
   monospace: {
     color: '#ffffff',
-    fontFamily: 'Courier',
+    fontFamily: 'Courier New',
     marginVertical: 4,
   },
   comment: {

packages/react-native/src/generators/application/files/app/tsconfig.json.template

@@ -10,7 +10,7 @@
     "resolveJsonModule": true
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nrwl/react-native/typings/svg.d.ts"
   ],
   "include": [],
   "references": [

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

@@ -50,7 +50,7 @@ describe('Add react-native-svg to dev dependencies', () => {
 
     const tsconfig = readJson(tree, 'apps/products/tsconfig.json');
     expect(tsconfig.files).toEqual([
-      '../../node_modules/@nrwl/react/typings/image.d.ts',
+      '../../node_modules/@nrwl/react-native/typings/svg.d.ts',
     ]);
 
     const packageJson = readJson(tree, 'apps/products/package.json');

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

@@ -51,7 +51,7 @@ function addReactNativeSvgToTsconfig(
   const offset = offsetFromRoot(project.root);
   updateJson(host, tsconfigPath, (json) => {
     const files = json.files || [];
-    files.push(`${offset}node_modules/@nrwl/react/typings/image.d.ts`);
+    files.push(`${offset}node_modules/@nrwl/react-native/typings/svg.d.ts`);
     json.files = files;
     return json;
   });

packages/react-native/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 '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/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();
+    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();
+  });
+});

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

@@ -0,0 +1,46 @@
+import {
+  Tree,
+  formatFiles,
+  getProjects,
+  updateJson,
+  offsetFromRoot,
+  ProjectConfiguration,
+} from '@nrwl/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 async function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  projects.forEach((project) => {
+    if (project.targets?.start?.executor !== '@nrwl/react-native:start') return;
+    updateReactNativeSvgTypingInTsconfig(tree, project);
+  });
+
+  await formatFiles(tree);
+}
+
+function updateReactNativeSvgTypingInTsconfig(
+  host: Tree,
+  project: ProjectConfiguration
+) {
+  const tsconfigPath = `${project.root}/tsconfig.json`;
+  if (!host.exists(tsconfigPath)) return;
+  const offset = offsetFromRoot(project.root);
+  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;
+  });
+}

packages/react-native/typings/svg.d.ts

@@ -0,0 +1,7 @@
+// from https://github.com/kristerkari/react-native-svg-transformer#using-typescript
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}