Android Svg Support

apps/android/metro.config.js

@@ -6,15 +6,47 @@
  */
 
 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: {
+      // prettier-ignore
+      assetExts: [assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'],
+      sourceExts: [...sourceExts, 'svg'],
+    },
+    // Metro doesn't currently handle assets coming from hoisted packages within a monorepo.  This is the current workaround people use
+    // In this case this is to ensure that the image assets that are part of logbox get loaded correctly.
+    server: {
+      enhanceMiddleware: (middleware) => {
+        return (req, res, next) => {
+          if (req.url.startsWith('/fluent-tester/src')) {
+            req.url = req.url.replace(
+              '/fluent-tester/src',
+              '/assets/../fluent-tester/src',
+            );
+          } else if (req.url.startsWith('/node_modules/react-native')) {
+            req.url = req.url.replace(
+              '/node_modules/react-native',
+              '/assets/../../node_modules/react-native',
+            );
+          }
+          return middleware(req, res, next);
+        };
       },
-    }),
-  },
-};
+    },
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false,
+        },
+      }),
+    },
+  };
+})();

apps/android/package.json

@@ -22,6 +22,7 @@
     "@fluentui-react-native/tester": "^0.21.1",
     "react": "16.13.1",
     "react-native": "^0.63.4",
+    "react-native-svg": "^12.1.0",
     "react-native-test-app": "^0.3.2"
   },
   "devDependencies": {
@@ -34,6 +35,7 @@
     "babel-jest": "^24.9.0",
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.59.0",
+    "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "~16.13.1"
   },
   "jest": {

apps/android/src/build.gradle

@@ -0,0 +1,28 @@
+buildscript {
+    ext.kotlin_version = "1.3.72"
+    repositories {
+        google()
+        jcenter()
+        mavenCentral()
+    }
+    dependencies {
+        classpath "com.android.tools.build:gradle:4.0.1"
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+allprojects {
+    repositories {
+        maven {
+            // All of React Native (JS, Android binaries) is installed from npm
+            url "$rootDir/../../../node_modules/react-native/android"
+        }
+        maven {
+            // Android JSC is installed from npm
+            url("$rootDir/../../../node_modules/jsc-android/dist")
+        }
+        google()
+        jcenter()
+    }
+}

apps/fluent-tester/package.json

@@ -29,8 +29,8 @@
     "@fluentui-react-native/default-theme": ">=0.5.1 <1.0.0",
     "@fluentui-react-native/experimental-avatar": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/experimental-button": "0.5.1",
-    "@fluentui-react-native/experimental-text": ">=0.4.1 <1.0.0",
     "@fluentui-react-native/experimental-native-button": ">=0.5.3 <1.0.0",
+    "@fluentui-react-native/experimental-text": ">=0.4.1 <1.0.0",
     "@fluentui-react-native/framework": ">=0.5.1 <1.0.0",
     "@fluentui-react-native/icon": "0.4.1",
     "@fluentui-react-native/interactive-hooks": ">=0.9.0 <1.0.0",
@@ -42,7 +42,7 @@
     "@fluentui/react-native": ">=0.23.4 <1.0.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^1.9.11",
-    "react-native-svg": "^11.0.0"
+    "react-native-svg": "12.1.0"
   },
   "devDependencies": {
     "@office-iss/react-native-win32": "^0.63.7",

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

@@ -32,14 +32,15 @@ const icons: React.FunctionComponent<{}> = () => {
   // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"
   // https://thenounproject.com/search/?q=d20&i=2453700
   const svgD20DataUriProps: SvgIconProps = {
-    uri: 'data:image/svg;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT5BcnRib2FyZCA2PC90aXRsZT48cGF0aCBkPSJNOTEuOSw2MS4zN2wtMTQtNDJhMiwyLDAsMCwwLTEuMzMtMS4yOWwtMzctMTFhMiwyLDAsMCwwLTIsLjUxbC0zMSwzMWEyLDIsMCwwLDAtLjQ4LDIuMDZsMTUsNDRBMiwyLDAsMCwwLDIyLjczLDg2bDM2LDVMNTksOTFhMiwyLDAsMCwwLDEuMzEtLjQ5bDMxLTI3QTIsMiwwLDAsMCw5MS45LDYxLjM3Wk0yNC40NCw4MiwzMS42LDQ3LjA1bDMzLjA4LDM0Wk03Ny4yNiwzMS42OSwzMi4zMyw0My42MWw3LjA2LTMxLjc1Wm0tNDcsMTIuMTJMMTEuMTYsMzkuNjYsMzYuODgsMTRaTTY2LjM4LDc5LjkyLDMyLjkxLDQ1LjUzLDc4LjM4LDMzLjQ2bC4xMi4zNS0xMiw0NlpNNzcsMjkuMjlsLTMwLjUyLTE2LDI4LDguMzFaTTEwLjY2LDQxLjZsMTkuMTYsNC4xN0wyMy4xNiw3OC4yNlpNNTguMzcsODYuODksMzUuNSw4My43MmwyNy4yMy0uNjJabTEwLjg1LTkuNDRMNzkuNjYsMzcuMjlsOCwyNC4wOFpNNDEuNjQsMzUuNWE3LDcsMCwwLDEsMS44NS0zLjgyLDE2LjkzLDE2LjkzLDAsMCwwLDEuODQtMi41OEEyLjQ0LDIuNDQsMCwwLDAsNDUuNCwyN2EyLjY3LDIuNjcsMCwwLDAtMS4xMy0xLjI4LDIuMzQsMi4zNCwwLDAsMC0xLjc0LS4yMWMtLjkuMi0xLjM4LjY0LTEuNDYsMS4zMWE0LjM1LDQuMzUsMCwwLDAsLjM2LDEuNzRsLTMsLjdhNiw2LDAsMCwxLS40Mi0zYy4yNi0xLjUxLDEuNC0yLjQ3LDMuNC0yLjkxYTYuNjIsNi42MiwwLDAsMSw0LjIxLjMxLDUuMjcsNS4yNywwLDAsMSwyLjczLDIuNzEsMy44MiwzLjgyLDAsMCwxLC4yMSwyLjg2LDcuNDYsNy40NiwwLDAsMS0xLjM1LDIuMjhsLS44NSwxLjA4cS0uODEsMS0xLjA4LDEuNDdBMi44MSwyLjgxLDAsMCwwLDQ1LDM1bDYuNjItMS43NCwxLjExLDIuNDVMNDIuMDksMzguNkE2Ljc1LDYuNzUsMCwwLDEsNDEuNjQsMzUuNVpNNTYuNTcsMjEuODFBMTMsMTMsMCwwLDEsNjAsMjYuMzZhMTAuNDgsMTAuNDgsMCwwLDEsMS40Nyw1LjI4Yy0uMSwxLjQtMS4wNiwyLjM2LTIuODcsMi44NWE1LjExLDUuMTEsMCwwLDEtNC43Ni0uODIsMTMsMTMsMCwwLDEtMy41My00LjkzLDkuNzgsOS43OCwwLDAsMS0xLjItNS4yNWMuMi0xLjMsMS4xOS0yLjE0LDMtMi41M0E1LjE4LDUuMTgsMCwwLDEsNTYuNTcsMjEuODFabS0xLjI2LDkuNjZhMi4xMywyLjEzLDAsMCwwLDIuMjUuODEsMS4yOSwxLjI5LDAsMCwwLDEtMS42NiwxMy43MiwxMy43MiwwLDAsMC0xLjMzLTMuNTcsMTUsMTUsMCwwLDAtMi4wNi0zLjM0QTIuMDksMi4wOSwwLDAsMCw1My4wNywyMywxLjI0LDEuMjQsMCwwLDAsNTIsMjQuNDYsMTIuNjcsMTIuNjcsMCwwLDAsNTMuMjMsMjgsMTUuMzMsMTUuMzMsMCwwLDAsNTUuMzEsMzEuNDdaIj48L3BhdGg+PC9zdmc+',
-    viewBox: '25 10 50 50'
+    uri:
+      'data:image/svg;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT5BcnRib2FyZCA2PC90aXRsZT48cGF0aCBkPSJNOTEuOSw2MS4zN2wtMTQtNDJhMiwyLDAsMCwwLTEuMzMtMS4yOWwtMzctMTFhMiwyLDAsMCwwLTIsLjUxbC0zMSwzMWEyLDIsMCwwLDAtLjQ4LDIuMDZsMTUsNDRBMiwyLDAsMCwwLDIyLjczLDg2bDM2LDVMNTksOTFhMiwyLDAsMCwwLDEuMzEtLjQ5bDMxLTI3QTIsMiwwLDAsMCw5MS45LDYxLjM3Wk0yNC40NCw4MiwzMS42LDQ3LjA1bDMzLjA4LDM0Wk03Ny4yNiwzMS42OSwzMi4zMyw0My42MWw3LjA2LTMxLjc1Wm0tNDcsMTIuMTJMMTEuMTYsMzkuNjYsMzYuODgsMTRaTTY2LjM4LDc5LjkyLDMyLjkxLDQ1LjUzLDc4LjM4LDMzLjQ2bC4xMi4zNS0xMiw0NlpNNzcsMjkuMjlsLTMwLjUyLTE2LDI4LDguMzFaTTEwLjY2LDQxLjZsMTkuMTYsNC4xN0wyMy4xNiw3OC4yNlpNNTguMzcsODYuODksMzUuNSw4My43MmwyNy4yMy0uNjJabTEwLjg1LTkuNDRMNzkuNjYsMzcuMjlsOCwyNC4wOFpNNDEuNjQsMzUuNWE3LDcsMCwwLDEsMS44NS0zLjgyLDE2LjkzLDE2LjkzLDAsMCwwLDEuODQtMi41OEEyLjQ0LDIuNDQsMCwwLDAsNDUuNCwyN2EyLjY3LDIuNjcsMCwwLDAtMS4xMy0xLjI4LDIuMzQsMi4zNCwwLDAsMC0xLjc0LS4yMWMtLjkuMi0xLjM4LjY0LTEuNDYsMS4zMWE0LjM1LDQuMzUsMCwwLDAsLjM2LDEuNzRsLTMsLjdhNiw2LDAsMCwxLS40Mi0zYy4yNi0xLjUxLDEuNC0yLjQ3LDMuNC0yLjkxYTYuNjIsNi42MiwwLDAsMSw0LjIxLjMxLDUuMjcsNS4yNywwLDAsMSwyLjczLDIuNzEsMy44MiwzLjgyLDAsMCwxLC4yMSwyLjg2LDcuNDYsNy40NiwwLDAsMS0xLjM1LDIuMjhsLS44NSwxLjA4cS0uODEsMS0xLjA4LDEuNDdBMi44MSwyLjgxLDAsMCwwLDQ1LDM1bDYuNjItMS43NCwxLjExLDIuNDVMNDIuMDksMzguNkE2Ljc1LDYuNzUsMCwwLDEsNDEuNjQsMzUuNVpNNTYuNTcsMjEuODFBMTMsMTMsMCwwLDEsNjAsMjYuMzZhMTAuNDgsMTAuNDgsMCwwLDEsMS40Nyw1LjI4Yy0uMSwxLjQtMS4wNiwyLjM2LTIuODcsMi44NWE1LjExLDUuMTEsMCwwLDEtNC43Ni0uODIsMTMsMTMsMCwwLDEtMy41My00LjkzLDkuNzgsOS43OCwwLDAsMS0xLjItNS4yNWMuMi0xLjMsMS4xOS0yLjE0LDMtMi41M0E1LjE4LDUuMTgsMCwwLDEsNTYuNTcsMjEuODFabS0xLjI2LDkuNjZhMi4xMywyLjEzLDAsMCwwLDIuMjUuODEsMS4yOSwxLjI5LDAsMCwwLDEtMS42NiwxMy43MiwxMy43MiwwLDAsMC0xLjMzLTMuNTcsMTUsMTUsMCwwLDAtMi4wNi0zLjM0QTIuMDksMi4wOSwwLDAsMCw1My4wNywyMywxLjI0LDEuMjQsMCwwLDAsNTIsMjQuNDYsMTIuNjcsMTIuNjcsMCwwLDAsNTMuMjMsMjgsMTUuMzMsMTUuMzMsMCwwLDAsNTUuMzEsMzEuNDdaIj48L3BhdGg+PC9zdmc+',
+    viewBox: '25 10 50 50',
   };
 
   // This one doesn't get tinted because it doesn't use currentColor
   const svgUriProps: SvgIconProps = {
     uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
-    viewBox: '0 0 1000 1000'
+    viewBox: '0 0 1000 1000',
   };
 
   const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
@@ -55,40 +56,39 @@ const icons: React.FunctionComponent<{}> = () => {
 
   return (
     <View>
-      {
-        showFontIcons ?
-          <View>
-            <Text>Font icons</Text>
-            {
-              // We've seen some issues getting Font Awesome to link properly on Apple platforms in the FURN test app specifically.
-              // This shouldn't be an issue in other apps, though, so keeping this icon Windows-only for now is an easy workaround.
-              // When Android support comes, the platform check can be adjusted accordingly.
-              Platform.OS == 'windows' ? <Icon fontSource={fontCustomFontProps} width={100} height={100} color="purple" /> : null
-            }
-            <Icon fontSource={fontBuiltInProps} width={100} height={100} color="#060" />
-          </View> : null
-      }
-      {
-        showSvgIcons ?
-          <View>
-            <Text>SVG icons</Text>
-            {
-              // TODO: Enable on iOS once we get react-native-svg-transformer working properly
-              Platform.OS == 'ios' ? null :
-              <Icon svgSource={svgProps} width={100} height={100} color="orange" />
-            }
-            <Icon svgSource={svgD20DataUriProps} width={100} height={100} color="#7a7" />
-            <Icon svgSource={svgUriProps} width={100} height={100} color="red" />
-          </View> : null
-      }
-      {
-        showRasterIcons ?
-          <View>
-            <Text>Raster icons</Text>
-            <Icon rasterImageSource={rasterRainbowSpectrumProps} width={100} height={100} color="green" />
-            <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" />
-          </View> : null
-      }
+      {showFontIcons ? (
+        <View>
+          <Text>Font icons</Text>
+          {
+            // We've seen some issues getting Font Awesome to link properly on Apple platforms in the FURN test app specifically.
+            // This shouldn't be an issue in other apps, though, so keeping this icon Windows-only for now is an easy workaround.
+            // When Android support comes, the platform check can be adjusted accordingly.
+            Platform.OS == 'windows' ? <Icon fontSource={fontCustomFontProps} width={100} height={100} color="purple" /> : null
+          }
+          <Icon fontSource={fontBuiltInProps} width={100} height={100} color="#060" />
+        </View>
+      ) : null}
+      {showSvgIcons ? (
+        <View>
+          <Text>SVG icons</Text>
+          {
+            // TODO: Enable on iOS once we get react-native-svg-transformer working properly
+            Platform.OS == 'ios' ? null : <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" />
+          }
+          <Icon svgSource={svgUriProps} width={100} height={100} color="red" />
+        </View>
+      ) : null}
+      {showRasterIcons ? (
+        <View>
+          <Text>Raster icons</Text>
+          <Icon rasterImageSource={rasterRainbowSpectrumProps} width={100} height={100} color="green" />
+          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" />
+        </View>
+      ) : null}
     </View>
   );
 };

apps/fluent-tester/src/FluentTester/testPages.android.ts

@@ -13,6 +13,7 @@ import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separ
 import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg';
 import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
 import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
+import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
 
 export const tests: TestDescription[] = [
   {
@@ -85,4 +86,9 @@ export const tests: TestDescription[] = [
     component: SvgTest,
     testPage: HOMEPAGE_SVG_BUTTON,
   },
+  {
+    name: 'Icon Test',
+    component: IconTest,
+    testPage: HOMEPAGE_ICON_BUTTON,
+  },
 ];

apps/win32/package.json

@@ -30,35 +30,35 @@
     "@fluentui-react-native/tester": "^0.21.1",
     "react": "16.13.1",
     "react-native": "^0.63.4",
-    "react-native-svg": "^11.0.0"
+    "react-native-svg": "12.1.0"
   },
   "devDependencies": {
-    "@office-iss/rex-win32": "0.63.22-devmain.13903.10000",
     "@office-iss/react-native-win32": "^0.63.7",
+    "@office-iss/rex-win32": "0.63.22-devmain.13903.10000",
     "@react-native-community/eslint-config": "^1.1.0",
     "@rnx-kit/cli": "^0.0.3",
     "@types/jasmine": "3.5.10",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.63.0",
     "@uifabricshared/build-native": "^0.1.1",
     "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "@wdio/allure-reporter": "5.22.4",
+    "@wdio/appium-service": "5.18.2",
+    "@wdio/cli": "5.23.0",
+    "@wdio/jasmine-framework": "5.18.6",
+    "@wdio/local-runner": "5.23.0",
+    "@wdio/spec-reporter": "5.22.4",
+    "@wdio/sync": "5.20.1",
+    "allure-commandline": "2.13.0",
+    "appium": "1.17.1",
     "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",
     "ts-node": "^8.10.1",
     "tsconfig-paths": "^3.9.0",
     "typescript": "3.8.3",
-    "allure-commandline": "2.13.0",
-    "appium": "1.17.1",
-    "webdriverio": "5.22.4",
-    "@wdio/allure-reporter": "5.22.4",
-    "@wdio/appium-service": "5.18.2",
-    "@wdio/cli": "5.23.0",
-    "@wdio/jasmine-framework": "5.18.6",
-    "@wdio/local-runner": "5.23.0",
-    "@wdio/spec-reporter": "5.22.4",
-    "@wdio/sync": "5.20.1"
+    "webdriverio": "5.22.4"
   },
   "peerDependencies": {
     "react": "16.13.1",

change/@fluentui-react-native-2021-04-08-04-27-08-android-icon.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "upgrade react-native-svg",
+  "packageName": "@fluentui/react-native",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-04-07T22:56:51.842Z"
+}

change/@fluentui-react-native-android-theme-2021-04-08-04-27-08-android-icon.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "upgrade react-native-svg",
+  "packageName": "@fluentui-react-native/android-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-04-07T22:57:08.820Z"
+}

change/@fluentui-react-native-experimental-avatar-2021-04-08-04-27-08-android-icon.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Add the rainbow gradient border image test case to experimental avatar (#654)",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-04-07T22:56:31.314Z"
+}

change/@fluentui-react-native-radio-group-2021-04-08-04-27-08-android-icon.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update Radio Button focus border style to be WCAG 2.1 compliant (#653)",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-04-07T22:56:22.212Z"
+}

change/@fluentui-react-native-tester-2021-04-01-13-41-56-android-icon.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "added svg, transformer to android",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-04-01T08:11:56.684Z"
+}

change/@fluentui-react-native-tester-win32-2021-04-05-15-06-01-android-icon.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "upgrade react-native-svg",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-04-05T09:36:01.397Z"
+}