Feature/support svg

packages/react-native/migrations.json

@@ -16,6 +16,12 @@
       "description": "Add react-native-codegen to dev dependencies",
       "factory": "./src/migrations/update-12-4-0/add-react-native-codegen-dev-dependencies"
     },
+    "add-react-native-svg": {
+      "version": "12.4.0-beta.0",
+      "cli": "nx",
+      "description": "Add support for svg",
+      "factory": "./src/migrations/update-12-4-0/add-react-native-svg"
+    },
     "update-jest-for-react-native": {
       "version": "12.4.0-beta.0",
       "cli": "nx",
@@ -155,6 +161,14 @@
         "@testing-library/react-native": {
           "version": "8.0.0-rc.0",
           "alwaysAddToPackageJson": false
+        },
+        "react-native-svg-transformer": {
+          "version": "0.14.3",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native-svg": {
+          "version": "12.1.1",
+          "alwaysAddToPackageJson": false
         }
       }
     }

packages/react-native/src/generators/application/files/app/metro.config.js

@@ -1,21 +1,32 @@
 const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
 
-module.exports = withNxMetro(
-  {
-    transformer: {
-      getTransformOptions: async () => ({
-        transform: {
-          experimentalImportSupport: false,
-          inlineRequires: true,
-        },
-      }),
+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'],
+      },
     },
-  },
-  {
-    // 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: [],
-  }
-);
+    {
+      // 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: [],
+    }
+  );
+})();

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

@@ -3,9 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "react-native": "*",
-    "react": "*",
+    "@testing-library/jest-native": "*",
     "@testing-library/react-native": "*",
-    "@testing-library/jest-native": "*"
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
   }
 }

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

@@ -17,6 +17,7 @@ import {
 } from 'react-native/Libraries/NewAppScreen';
 // @ts-ignore
 import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
+import Star from './star.svg';
 
 const App = () => {
   return (
@@ -64,6 +65,23 @@ const App = () => {
                   about Nx.
                 </Text>
               </TouchableOpacity>
+
+              <Text style={styles.sectionDescription}>
+                Thank you for using and showing some ♥ for Nx. If you like Nx
+                React Native, please give it a star:
+              </Text>
+
+              <View style={styles.githubStarContainer}>
+                <TouchableOpacity
+                  style={styles.githubStarBadge}
+                  onPress={() =>
+                    openURLInBrowser('https://github.com/nrwl/nx-react-native')
+                  }
+                >
+                  <Star width={24} height={24} fill={Colors.dark} />
+                  <Text> Star</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           </View>
         </ScrollView>
@@ -125,6 +143,23 @@ const styles = StyleSheet.create({
   link: {
     color: '#45bc98',
   },
+  githubStarContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+  },
+  githubStarBadge: {
+    borderWidth: 1,
+    borderColor: Colors.dark,
+    borderRadius: 3,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 3,
+    fontWeight: '600',
+  },
 });
 
 export default App;

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

@@ -9,7 +9,9 @@
     "skipLibCheck": true,
     "resolveJsonModule": true
   },
-  "files": [],
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nrwl/react-native/typings/image.d.ts"
+  ],
   "include": [],
   "references": [
     {

packages/react-native/src/generators/init/init.ts

@@ -16,6 +16,8 @@ import {
   reactNativeCommunityCli,
   reactNativeCommunityCliAndroid,
   reactNativeCommunityCliIos,
+  reactNativeSvgTransformerVersion,
+  reactNativeSvgVersion,
   reactNativeVersion,
   reactTestRendererVersion,
   reactVersion,
@@ -74,6 +76,8 @@ export function updateDependencies(host: Tree) {
       'metro-resolver': metroVersion,
       'react-native-codegen': reactNativeCodegenVersion,
       'react-test-renderer': reactTestRendererVersion,
+      'react-native-svg-transformer': reactNativeSvgTransformerVersion,
+      'react-native-svg': reactNativeSvgVersion,
     }
   );
 }

packages/react-native/src/migrations/update-12-4-0/add-react-native-codegen-dev-dependencies.spec.ts

@@ -10,11 +10,11 @@ describe('Add react-native-codegen to dev dependencies 12.4.0', () => {
     tree = createTreeWithEmptyWorkspace();
   });
 
-  it(`should update libs`, async () => {
+  it(`should update libs if dependencies contain react-native`, async () => {
     tree.write(
       'package.json',
       JSON.stringify({
-        dependencies: {},
+        dependencies: { 'react-native': '*' },
         devDependencies: {},
       })
     );
@@ -25,4 +25,20 @@ describe('Add react-native-codegen to dev dependencies 12.4.0', () => {
       readJson(tree, 'package.json').devDependencies['react-native-codegen']
     ).toEqual(reactNativeCodegenVersion);
   });
+
+  it(`should not update libs if dependencies do not contain react-native`, async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: {},
+        devDependencies: {},
+      })
+    );
+
+    await update(tree);
+
+    expect(
+      readJson(tree, 'package.json').devDependencies['react-native-codegen']
+    ).toEqual(undefined);
+  });
 });

packages/react-native/src/migrations/update-12-4-0/add-react-native-codegen-dev-dependencies.ts

@@ -1,11 +1,26 @@
-import { addDependenciesToPackageJson, Tree, formatFiles } from '@nrwl/devkit';
+import {
+  addDependenciesToPackageJson,
+  Tree,
+  formatFiles,
+  readJson,
+} from '@nrwl/devkit';
 import { reactNativeCodegenVersion } from '../../utils/versions';
 
 /**
  * Add react-native-codegen due to react-native upgrade.
  * https://react-native-community.github.io/upgrade-helper/?from=0.64.1&to=0.65.0-rc.2
  */
 export default async function update(tree: Tree) {
+  const packagesJson = readJson(tree, 'package.json');
+  const packages = Object.keys({
+    ...packagesJson.dependencies,
+    ...packagesJson.devDependencies,
+  });
+
+  if (!packages.includes('react-native')) {
+    return;
+  }
+
   const installTask = addDependenciesToPackageJson(
     tree,
     {},

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

@@ -0,0 +1,121 @@
+import { addProjectConfiguration, readJson, Tree } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import {
+  reactNativeSvgTransformerVersion,
+  reactNativeSvgVersion,
+} from '../../utils/versions';
+import update from './add-react-native-svg';
+
+describe('Add react-native-svg to dev dependencies 12.4.0', () => {
+  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 update libs if dependencies contain react-native`, async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: { 'react-native': '*' },
+        devDependencies: {},
+      })
+    );
+
+    await update(tree);
+    const devDependencies = readJson(tree, 'package.json').devDependencies;
+
+    expect(devDependencies['react-native-svg']).toEqual(reactNativeSvgVersion);
+    expect(devDependencies['react-native-svg-transformer']).toEqual(
+      reactNativeSvgTransformerVersion
+    );
+  });
+
+  it(`should not update libs if dependencies do not contain react-native`, async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: {},
+        devDependencies: {},
+      })
+    );
+
+    await update(tree);
+    const devDependencies = readJson(tree, 'package.json').devDependencies;
+
+    expect(devDependencies['react-native-svg']).toEqual(undefined);
+    expect(devDependencies['react-native-svg-transformer']).toEqual(undefined);
+  });
+
+  it(`should add react-native-svg app tsconfig.json and package.json`, async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: { 'react-native': '*' },
+        devDependencies: {},
+      })
+    );
+
+    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/image.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': require.resolve('@nrwl/react-native/src/utils/svg-mock.js')},`
+    );
+  });
+
+  it(`should not add react-native-svg app 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();
+  });
+});