diff --git a/.svgrrc.json b/.svgrrc.json
new file mode 100644
index 00000000000..c825576d2e8
--- /dev/null
+++ b/.svgrrc.json
@@ -0,0 +1,6 @@
+{
+ "dimensions": false,
+ "replaceAttrValues": {
+ "@fillColor": "{props.fill}"
+ }
+}
diff --git a/img/test/alphaChannel.svg b/img/test/alphaChannel.svg
new file mode 100644
index 00000000000..be7bf45d07e
--- /dev/null
+++ b/img/test/alphaChannel.svg
@@ -0,0 +1,5 @@
+
diff --git a/img/test/analytics.svg b/img/test/analytics.svg
new file mode 100644
index 00000000000..1f5e8595c98
--- /dev/null
+++ b/img/test/analytics.svg
@@ -0,0 +1,15 @@
+
diff --git a/img/test/faceID.svg b/img/test/faceID.svg
new file mode 100644
index 00000000000..90a0b52e27f
--- /dev/null
+++ b/img/test/faceID.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/test/fingerprint.svg b/img/test/fingerprint.svg
new file mode 100644
index 00000000000..e9b91053189
--- /dev/null
+++ b/img/test/fingerprint.svg
@@ -0,0 +1,20 @@
+
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 998f4861cc2..d06f8a38766 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -395,7 +395,7 @@ PODS:
- React
- RNShare (3.7.0):
- React
- - RNSVG (12.1.0):
+ - RNSVG (12.1.1):
- React
- RNVectorIcons (7.0.0):
- React
@@ -735,7 +735,7 @@ SPEC CHECKSUMS:
RNScreens: b748efec66e095134c7166ca333b628cd7e6f3e2
RNSha256: ab608b2185fb806185a2cc112e0474065842e085
RNShare: a1d5064df7a0ebe778d001869b3f0a124bf0a491
- RNSVG: ce9d996113475209013317e48b05c21ee988d42e
+ RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
RNVectorIcons: da6fe858f5a65d7bbc3379540a889b0b12aa5976
TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
diff --git a/jest.config.js b/jest.config.js
index 88eb65c90d1..92816278875 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,6 +11,9 @@ module.exports = {
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-community/cameraroll|@codler)"
],
+ moduleNameMapper: {
+ "\\.svg": "/ts/__mocks__/svgMock.js"
+ },
globals: {
"ts-jest": {
babelConfig: true
diff --git a/metro.config.js b/metro.config.js
index 2e709bb90b1..1c0563bce3f 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -1,10 +1,18 @@
-module.exports = {
- transformer: {
- getTransformOptions: async () => ({
- transform: {
- experimentalImportSupport: false,
- inlineRequires: false
- }
- })
- }
-};
+const { getDefaultConfig } = require("metro-config");
+
+module.exports = (async () => {
+ const {
+ resolver: { sourceExts, assetExts }
+ } = await getDefaultConfig();
+ return {
+ transformer: {
+ babelTransformerPath: require.resolve("react-native-svg-transformer"),
+ experimentalImportSupport: false,
+ inlineRequires: false
+ },
+ resolver: {
+ assetExts: assetExts.filter(ext => ext !== "svg"),
+ sourceExts: [...sourceExts, "svg"]
+ }
+ };
+})();
diff --git a/package.json b/package.json
index ecfe96b99d5..85bee52603a 100644
--- a/package.json
+++ b/package.json
@@ -70,8 +70,8 @@
"@react-native-community/cameraroll": "^4.0.0",
"@react-native-community/clipboard": "^1.5.0",
"@react-native-community/cookies": "^4.0.1",
- "@react-native-community/slider": "^3.0.3",
"@react-native-community/push-notification-ios": "^1.8.0",
+ "@react-native-community/slider": "^3.0.3",
"@redux-saga/testing-utils": "^1.1.3",
"@typescript-eslint/eslint-plugin": "^3.10.1",
"abort-controller": "^1.0.2",
@@ -128,7 +128,7 @@
"react-native-sha256": "1.2.3",
"react-native-share": "^3.3.2",
"react-native-splash-screen": "^3.2.0",
- "react-native-svg": "^12.1.0",
+ "react-native-svg": "^12.1.1",
"react-native-touch-id": "^4.4.1",
"react-native-vector-icons": "^7.0.0",
"react-native-view-shot": "3.1.2",
@@ -221,6 +221,7 @@
"postinstall-postinstall": "^1.0.0",
"prettier": "2.1.0",
"react-native-bundle-visualizer": "^2.2.1",
+ "react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "16.13.1",
"redux-mock-store": "^1.5.4",
"redux-saga-test-plan": "4.0.0-rc.3",
diff --git a/ts/__mocks__/svgMock.js b/ts/__mocks__/svgMock.js
new file mode 100644
index 00000000000..09206a25787
--- /dev/null
+++ b/ts/__mocks__/svgMock.js
@@ -0,0 +1,2 @@
+module.exports = "SvgMock";
+module.exports.ReactComponent = "SvgMock";
diff --git a/ts/screens/showroom/OthersShowroom.tsx b/ts/screens/showroom/OthersShowroom.tsx
index acbc690c22e..841b33ed18a 100644
--- a/ts/screens/showroom/OthersShowroom.tsx
+++ b/ts/screens/showroom/OthersShowroom.tsx
@@ -1,9 +1,13 @@
import { View } from "native-base";
import * as React from "react";
import { StyleSheet } from "react-native";
+import AlphaChannel from "../../../img/test/alphaChannel.svg";
+import Fingerprint from "../../../img/test/fingerprint.svg";
+import Analytics from "../../../img/test/analytics.svg";
import { InfoBox } from "../../components/box/InfoBox";
import { Body } from "../../components/core/typography/Body";
import { Label } from "../../components/core/typography/Label";
+import { IOColors } from "../../components/core/variables/IOColors";
import { IOStyles } from "../../components/core/variables/IOStyles";
import { ShowroomSection } from "./ShowroomSection";
@@ -30,5 +34,24 @@ export const OthersShowroom = () => (
+