QualityGradeStatus component, replaced QualityBadge, import svg

metro.config.js

@@ -1,17 +1,31 @@
 /**
  * Metro configuration for React Native
  * https://github.com/facebook/react-native
+ * with added config for react-native-svg-transformer
+ * https://www.npmjs.com/package/react-native-svg-transformer?activeTab
  *
  * @format
  */
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ( {
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true
-      }
-    } )
-  }
-};
+const { getDefaultConfig } = require( "metro-config" );
+
+module.exports = ( async () => {
+  const {
+    resolver: { sourceExts, assetExts }
+  } = await getDefaultConfig();
+  return {
+    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"]
+    }
+  };
+} )();