Adding svg pacjage and changing some assets to new svg icons in screens.

4 years ago · bd70525257
8 changed files with 1051 additions and 79 deletions
--- a/src/app.json
+++ b/src/app.json
@ -32,6 +32,23 @@
    "web": {
      "favicon": "./app/assets/favicon.png"
    },
-    "description": ""
+    "description": "",
+
+    "packagerOpts": {
+      "config": "metro.config.js",
+      "sourceExts": [
+        "expo.ts",
+        "expo.tsx",
+        "expo.js",
+        "expo.jsx",
+        "ts",
+        "tsx",
+        "js",
+        "jsx",
+        "json",
+        "wasm",
+        "svg"
+      ]
+    }
  }
 }
--- a/src/app/config/assets.js
+++ b/src/app/config/assets.js
@ -1,18 +1,31 @@
+import Pluviometer from "../assets/pluviometer-logo.svg";
+import RainIcon from "../assets/rain-icon.svg";
+import RiverIcon from "../assets/river-logo.svg";
+import FloodZones from "../assets/floodZones-logo.svg";
+import RiverFlood from "../assets/river-extravasado.svg";
+import RiverLow from "../assets/river_low.svg";
+import RiverHigh from "../assets/river_high.svg";
+import RiverNormal from "../assets/river_normal.svg";
+
 export default {
  floodZones: {
-    floodIcon: require("../assets/pontos_alagamento_peq.png"),
+    FloodZonesIcon: FloodZones,
    passable: require("../assets/floodZonesAssets/passable_icon.png"),
    notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
  },
  riverLevel: {
-    riverIcon: require("../assets/nivel_rio.png"),
+    RiverIcon: RiverIcon,
    low: require("../assets/rio_baixo.png"),
+    Low: RiverLow,
    normal: require("../assets/rio_normal.png"),
+    Normal: RiverNormal,
    high: require("../assets/rio_alto.png"),
+    High: RiverHigh,
    flooding: require("../assets/rio_transbordando.png"),
+    Flooding: RiverFlood,
  },
  rainLevel: {
-    rain_logo: require("../assets/chuva_logo.png"),
+    RainIcon: RainIcon,
    rain_0_5: require("../assets/sem_chuva.png"),
    rain_1_5: require("../assets/chuva_fraca.png"),
    rain_2_5: require("../assets/chuva_peq.png"),
@ -21,4 +34,5 @@ export default {
    rain_5_5: require("../assets/chuva_pancadas.png"),
  },
  pluviometer: require("../assets/diario_pluviometrico.png"),
+  PluviometerIcon: Pluviometer,
 };
--- a/src/app/screens/RiverFloodSharingDataScreen.js
+++ b/src/app/screens/RiverFloodSharingDataScreen.js
@ -38,6 +38,7 @@ function RiverFloodSharingDataScreen(props) {
  const [dateTime, setDateTime] = useState(moment());
  const [time, setTime] = useState(moment());

+  const dims = scaleDimsFromWidth(85, 85, 30);
  return (
    <Screen style={styles.container}>
      <Text
@ -83,11 +84,7 @@ function RiverFloodSharingDataScreen(props) {
                  borderColor={riverScale == 0 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.riverLevel.low}
-                  />
-                  <Text style={styles.text}>Baixo</Text>
+                  <assets.riverLevel.Low {...dims} />
                </View>
              </TouchableNativeFeedback>

@ -96,11 +93,7 @@ function RiverFloodSharingDataScreen(props) {
                  borderColor={riverScale == 1 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.riverLevel.normal}
-                  />
-                  <Text style={styles.text}>Rio normal</Text>
+                  <assets.riverLevel.Normal {...dims} />
                </View>
              </TouchableNativeFeedback>
            </View>
@ -111,11 +104,7 @@ function RiverFloodSharingDataScreen(props) {
                  borderColor={riverScale == 2 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.riverLevel.high}
-                  />
-                  <Text style={styles.text}>Alto</Text>
+                  <assets.riverLevel.High {...dims} />
                </View>
              </TouchableNativeFeedback>

@ -124,11 +113,7 @@ function RiverFloodSharingDataScreen(props) {
                  borderColor={riverScale == 3 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.riverLevel.flooding}
-                  />
-                  <Text style={styles.text}>Transbordando</Text>
+                  <assets.riverLevel.Flooding {...dims} />
                </View>
              </TouchableNativeFeedback>
            </View>
@ -140,9 +125,21 @@ function RiverFloodSharingDataScreen(props) {

          <FormImagePicker backgroundColor={colors.primary} name="images" />

-          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
            {/*Data da coleta:*/}
-            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+            <View
+              style={{
+                flex: 0.48,
+                borderRightColor: colors.cerulean,
+                borderRightWidth: 1,
+              }}
+            >
              <FormDatePicker
                textStyle={{
                  borderColor: colors.gray,
@ -155,7 +152,9 @@ function RiverFloodSharingDataScreen(props) {
            </View>
            {/*Local do evento:*/}
            <View style={{ flex: 0.48 }}>
-              <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+              <TouchableOpacity
+                onPress={() => props.navigation.navigate("FormMap")}
+              >
                <FormLocationPicker />
              </TouchableOpacity>
            </View>
--- a/src/app/screens/SharingDataScreen.js
+++ b/src/app/screens/SharingDataScreen.js
@ -4,46 +4,56 @@ import { StyleSheet, View } from "react-native";
 import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
 import assets from "../config/assets";
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
-
+import { Svg, Image as ImageSvg, SvgXml } from "react-native-svg";
+import Pluviometer from "../assets/pluviometer-logo.svg";
 //1/3

 function SharingDataScreen({ navigation }) {
+  const dims = scaleDimsFromWidth(93, 106, 35);
+  // const dims = { width: "100%", height: "100%" };
+
  return (
    <View style={styles.container}>
      <ScrollView>
-        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-around",
+            marginTop: 30,
+          }}
+        >
          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("FloodSharingData")}
          >
-            <Image style={styles.icon} source={assets.floodZones.floodIcon} />
-            <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
+            <assets.floodZones.FloodZonesIcon {...dims} />
          </TouchableOpacity>

          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("RainSharingData")}
          >
-            <Image style={styles.icon} source={assets.rainLevel.rain_logo} />
-            <Text style={styles.text}>Chuva</Text>
+            <assets.rainLevel.RainIcon {...dims} />
          </TouchableOpacity>
        </View>

-        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-around",
+            marginTop: 30,
+          }}
+        >
          <TouchableOpacity
-            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("PluviometerSharingData")}
          >
-            <Image style={styles.icon} source={assets.pluviometer} />
-            <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
+            <assets.PluviometerIcon {...dims} />
          </TouchableOpacity>

          <TouchableOpacity
-            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("RiverFloodData")}
          >
-            <Image style={styles.icon} source={assets.riverLevel.riverIcon} />
-            <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
+            <assets.riverLevel.RiverIcon {...dims} />
          </TouchableOpacity>
        </View>
      </ScrollView>
@ -51,19 +61,12 @@ function SharingDataScreen({ navigation }) {
  );
 }

-const dims = scaleDimsFromWidth(248, 251, 35);
-
 const styles = StyleSheet.create({
  text: {
    fontSize: dimensions.text.default,
    textAlign: "center",
    marginTop: 10,
  },
-  icon: {
-    width: dims.width * 0.8,
-    height: dims.height * 0.8,
-    marginTop: 30,
-  },

  container: {
    paddingHorizontal: 10,
--- a/src/metro.config.js
+++ b/src/metro.config.js
@ -1,12 +1,16 @@
-// File created folowing SQLite database conn tuts
-// from https://docs.expo.io/versions/latest/sdk/sqlite/
+const { getDefaultConfig } = require("metro-config");

-const { getDefaultConfig } = require("@expo/metro-config");
-
-const defaultConfig = getDefaultConfig(__dirname);
-
-module.exports = {
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve("react-native-svg-transformer"),
+    },
    resolver: {
-    assetExts: [...defaultConfig.resolver.assetExts, "db"],
+      assetExts: [...assetExts.filter((ext) => ext !== "svg"), "db"],
+      sourceExts: [...sourceExts, "svg"],
    },
-};
+  };
+})();
--- a/src/package-lock.json
+++ b/src/package-lock.json
@ -3675,6 +3675,113 @@
        "type-detect": "4.0.8"
      }
    },
+    "@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
+      "integrity": "sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz",
+      "integrity": "sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz",
+      "integrity": "sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz",
+      "integrity": "sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz",
+      "integrity": "sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz",
+      "integrity": "sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz",
+      "integrity": "sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw==",
+      "dev": true
+    },
+    "@svgr/babel-plugin-transform-svg-component": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz",
+      "integrity": "sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==",
+      "dev": true
+    },
+    "@svgr/babel-preset": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-4.3.3.tgz",
+      "integrity": "sha512-6PG80tdz4eAlYUN3g5GZiUjg2FMcp+Wn6rtnz5WJG9ITGEF1pmFdzq02597Hn0OmnQuCVaBYQE1OVFAnwOl+0A==",
+      "dev": true,
+      "requires": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^4.2.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^4.2.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^4.2.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^4.2.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "^4.3.3",
+        "@svgr/babel-plugin-svg-em-dimensions": "^4.2.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^4.2.0",
+        "@svgr/babel-plugin-transform-svg-component": "^4.2.0"
+      }
+    },
+    "@svgr/core": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-4.3.3.tgz",
+      "integrity": "sha512-qNuGF1QON1626UCaZamWt5yedpgOytvLj5BQZe2j1k1B8DUG4OyugZyfEwBeXozCUwhLEpsrgPrE+eCu4fY17w==",
+      "dev": true,
+      "requires": {
+        "@svgr/plugin-jsx": "^4.3.3",
+        "camelcase": "^5.3.1",
+        "cosmiconfig": "^5.2.1"
+      }
+    },
+    "@svgr/hast-util-to-babel-ast": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz",
+      "integrity": "sha512-JioXclZGhFIDL3ddn4Kiq8qEqYM2PyDKV0aYno8+IXTLuYt6TOgHUbUAAFvqtb0Xn37NwP0BTHglejFoYr8RZg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@svgr/plugin-jsx": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz",
+      "integrity": "sha512-cLOCSpNWQnDB1/v+SUENHH7a0XY09bfuMKdq9+gYvtuwzC2rU4I0wKGFEp1i24holdQdwodCtDQdFtJiTCWc+w==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.4.5",
+        "@svgr/babel-preset": "^4.3.3",
+        "@svgr/hast-util-to-babel-ast": "^4.3.2",
+        "svg-parser": "^2.0.0"
+      }
+    },
+    "@svgr/plugin-svgo": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz",
+      "integrity": "sha512-PrMtEDUWjX3Ea65JsVCwTIXuSqa3CG9px+DluF1/eo9mlDrgrtFE7NE/DjdhjJgSM9wenlVBzkzneSIUgfUI/w==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.2.1",
+        "merge-deep": "^3.0.2",
+        "svgo": "^1.2.2"
+      }
+    },
    "@types/babel__core": {
      "version": "7.1.12",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
@ -3786,6 +3893,12 @@
      "integrity": "sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==",
      "dev": true
    },
+    "@types/q": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
+      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
+      "dev": true
+    },
    "@types/stack-utils": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@ -5368,12 +5481,47 @@
      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
    },
+    "clone-deep": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+      "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
+      "dev": true,
+      "requires": {
+        "for-own": "^0.1.3",
+        "is-plain-object": "^2.0.1",
+        "kind-of": "^3.0.2",
+        "lazy-cache": "^1.0.3",
+        "shallow-clone": "^0.1.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
    "co": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
      "dev": true
    },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      }
+    },
    "collect-v8-coverage": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@ -5604,6 +5752,12 @@
        "nth-check": "^1.0.2"
      }
    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
    "css-tree": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
@ -5631,6 +5785,15 @@
      "integrity": "sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=",
      "dev": true
    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
    "cssom": {
      "version": "0.4.4",
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@ -7391,6 +7554,15 @@
      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
    },
+    "for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.1"
+      }
+    },
    "foreach": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@ -12307,6 +12479,12 @@
      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
      "dev": true
    },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
+      "dev": true
+    },
    "left-pad": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@ -12708,6 +12886,28 @@
      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
    },
+    "merge-deep": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.3.tgz",
+      "integrity": "sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "clone-deep": "^0.2.4",
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
    "merge-stream": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
@ -13202,6 +13402,24 @@
        }
      }
    },
+    "mixin-object": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+      "dev": true,
+      "requires": {
+        "for-in": "^0.1.3",
+        "is-extendable": "^0.1.1"
+      },
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
+          "dev": true
+        }
+      }
+    },
    "mkdirp": {
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
@ -13851,6 +14069,12 @@
      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
+      "dev": true
+    },
    "path-exists": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
@ -14213,6 +14437,12 @@
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
      "dev": true
    },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
    "qs": {
      "version": "6.9.4",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
@ -14618,6 +14848,26 @@
        "css-tree": "^1.0.0-alpha.39"
      }
    },
+    "react-native-svg-transformer": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/react-native-svg-transformer/-/react-native-svg-transformer-0.14.3.tgz",
+      "integrity": "sha512-agDGdMeeBAsWEgg/u7mjtR2Z3c8smGCLep/n3svwifut9dpswZCP+bSIrU8ekg6RNtxAJL+eGJbWjJ38vWxw6g==",
+      "dev": true,
+      "requires": {
+        "@svgr/core": "^4.3.3",
+        "@svgr/plugin-svgo": "^4.3.1",
+        "path-dirname": "^1.0.2",
+        "semver": "^5.6.0"
+      }
+    },
+    "react-native-svg-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-native-svg-uri/-/react-native-svg-uri-1.2.3.tgz",
+      "integrity": "sha1-L2fzBWQGig/uaKdRhFMypRhaGqs=",
+      "requires": {
+        "xmldom": "^0.1.22"
+      }
+    },
    "react-native-tab-view": {
      "version": "2.15.2",
      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz",
@ -15364,6 +15614,35 @@
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
    },
+    "shallow-clone": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+      "integrity": "sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=",
+      "dev": true,
+      "requires": {
+        "is-extendable": "^0.1.1",
+        "kind-of": "^2.0.1",
+        "lazy-cache": "^0.2.3",
+        "mixin-object": "^2.0.1"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+          "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.0.2"
+          }
+        },
+        "lazy-cache": {
+          "version": "0.2.7",
+          "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
+          "integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=",
+          "dev": true
+        }
+      }
+    },
    "shebang-command": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@ -15687,6 +15966,12 @@
        "tweetnacl": "~0.14.0"
      }
    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
    "stack-utils": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.3.tgz",
@ -15953,6 +16238,57 @@
        }
      }
    },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.0.0-alpha.37",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+          "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.4",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+          "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
    "symbol-observable": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
@ -16456,6 +16792,12 @@
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
    },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
    "unset-value": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
--- a/src/package.json
+++ b/src/package.json
@ -45,6 +45,7 @@
    "react-native-screens": "~2.10.1",
    "react-native-simple-dialogs": "^1.4.0",
    "react-native-svg": "^12.1.0",
+    "react-native-svg-uri": "^1.2.3",
    "react-native-walkthrough-tooltip": "^1.1.11",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
@ -59,6 +60,7 @@
    "eslint-plugin-react": "^7.22.0",
    "jest-expo": "^40.0.1",
    "jest-expo-enzyme": "^1.0.4",
+    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "^17.0.1"
  },
  "private": true
--- a/src/yarn.lock
+++ b/src/yarn.lock