Add react-native-svg-transformer to iOS and macOS (#695)

* Add react-native-svg-transformer to iOS and macOS

* Remove SVG icons from Windows test page

* Change files

apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonIconTest.tsx

@@ -4,7 +4,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { stackStyle } from '../Common/styles';
-import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
+import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 
 const CustomizedIconButton = Button.customize({
@@ -13,48 +13,35 @@ const CustomizedIconButton = Button.customize({
 });
 
 export const ButtonIconTest: React.FunctionComponent<{}> = () => {
-  if (Platform.OS == ('win32' as any)) {
-    const testImage = require('./icon_24x24.png');
-    const testTtf = require('./Font Awesome 5 Free-Solid-900.otf');
+  const testImage = require('./icon_24x24.png');
 
-    const fontProps: FontIconProps = {
-      fontFamily: `Font Awesome 5 Free`,
-      fontSrcFile: testTtf,
-      codepoint: 0xf083,
-      fontSize: 16,
-    };
+  const svgProps: SvgIconProps = {
+    src: TestSvg,
+    viewBox: '0 0 500 500',
+  };
 
-    const svgProps: SvgIconProps = {
-      src: TestSvg,
-      viewBox: '0 0 500 500',
-    };
+  // SVG-based icons are not available on all platforms yet
+  const svgIconsEnabled = ['ios', 'macos', 'win32'].includes(Platform.OS as string);
 
-    return (
-      <View>
-        <Stack style={stackStyle}>
-          <Button icon={testImage} content="Button with png Icon" tooltip="button tooltip" />
-          <Button icon={{ fontSource: fontProps, color: 'blue' }} content="Button with font Icon" tooltip="button tooltip" />
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Button icon={testImage} content="Button with png Icon" tooltip="button tooltip" />
+        {svgIconsEnabled ? (
           <Button
             icon={{ svgSource: svgProps, width: 20, height: 20, color: 'red' }}
             content="Button with svg Icon"
             tooltip="button tooltip"
           />
+        ) : null}
+        {svgIconsEnabled ? (
           <CustomizedIconButton
             icon={{ svgSource: svgProps, width: 20, height: 20 }}
             content="Button with Customized Icon"
             tooltip="button tooltip"
           />
-        </Stack>
-      </View>
-    );
-  } else {
-    return (
-      <View>
-        <Stack style={stackStyle}>
-          <Button icon={require('./icon_24x24.png')} content="Button with Icon" tooltip="button tooltip" />
-          <CustomizedIconButton icon={require('./icon_24x24.png')} content="Button with Customized Icon" tooltip="button tooltip" />
-        </Stack>
-      </View>
-    );
-  }
+        ) : null}
+      </Stack>
+    </View>
+  );
 };

apps/fluent-tester/src/FluentTester/TestComponents/Icon/IconTest.tsx

@@ -71,11 +71,7 @@ const icons: React.FunctionComponent<{}> = () => {
       {showSvgIcons ? (
         <View>
           <Text>SVG icons</Text>
-          {
-            // TODO: Enable on macOS and iOS once we get react-native-svg-transformer working properly
-            // See https://github.com/microsoft/fluentui-react-native/issues/644
-            (Platform.OS == 'ios' || Platform.OS == 'macos') ? null : <Icon svgSource={svgProps} width={100} height={100} color="orange" />
-          }
+          <Icon svgSource={svgProps} width={100} height={100} color="orange" />
           {
             // TODO: Causes TypeError: Network request failed on Android
             Platform.OS == 'android' ? null : <Icon svgSource={svgD20DataUriProps} width={100} height={100} color="#7a7" />

apps/ios/metro.config.js

@@ -5,16 +5,27 @@
  * @format
  */
 
-const {getWatchFolders} = require('@uifabricshared/build-native');
+const { getWatchFolders } = require('@uifabricshared/build-native');
+const { getDefaultConfig } = require('metro-config');
 
-module.exports = {
-  watchFolders: getWatchFolders(),
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    watchFolders: getWatchFolders(),
+    resolver: {
+      assetExts: assetExts.filter((ext) => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false,
+        },
+      }),
+    },
+  };
+})();

apps/ios/package.json

@@ -34,7 +34,9 @@
     "@uifabricshared/eslint-config-rules": "^0.1.1",
     "babel-jest": "^24.9.0",
     "jest": "^24.9.0",
+    "metro-config": "^0.58.0",
     "metro-react-native-babel-preset": "^0.59.0",
+    "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "~16.13.1"
   },
   "jest": {

apps/macos/metro.config.js

@@ -5,25 +5,34 @@
 
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
-const {getWatchFolders} = require('@uifabricshared/build-native');
+const { getWatchFolders } = require('@uifabricshared/build-native');
+const { getDefaultConfig } = require('metro-config');
 
 const rnmPath = path.dirname(require.resolve('react-native-macos/package.json'));
 
-module.exports = {
-  watchFolders: getWatchFolders(),
-  resolver: {
-    extraNodeModules: {
-      'react-native': rnmPath,
-    },
-    platforms: ['macos', 'ios'],
-    blacklistRE: blacklist([/node_modules\/react-native\/.*/]),
-  },
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    watchFolders: getWatchFolders(),
+    resolver: {
+      assetExts: assetExts.filter((ext) => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+      extraNodeModules: {
+        'react-native': rnmPath,
       },
-    }),
-  },
-};
+      platforms: ['macos', 'ios'],
+      blacklistRE: blacklist([/node_modules\/react-native\/.*/]),
+    },
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false,
+        },
+      }),
+    },
+  };
+})();

apps/macos/package.json

@@ -35,6 +35,7 @@
     "metro-config": "^0.58.0",
     "metro-react-native-babel-preset": "^0.59.0",
     "react-native": "^0.63.4",
+    "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "~16.13.1"
   },
   "peerDependencies": {

change/@fluentui-react-native-tester-2021-05-19-18-05-38-amgleitman-ios-macos-react-native-svg-transformer.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Add react-native-svg-transformer to iOS and macOS",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "adam.gleitman@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-20T01:05:38.730Z"
+}