[#8849] Use node-qrcode instead of react-native-qrcode

2019-08-29 13:47:39 +03:00 · 2019-08-29 13:47:39 +03:00 · 0288d617cb
parent d432dc980e
commit 0288d617cb
14 changed files with 108 additions and 64 deletions
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -278,7 +278,6 @@ dependencies {
    implementation project(':react-native-image-crop-picker')
    implementation project(':react-native-securerandom')
    implementation project(':react-native-webview-bridge')
-    implementation project(':react-native-webview')
    implementation project(':react-native-touch-id')
    implementation project(':react-native-config')
    implementation project(':react-native-firebase')
--- a/android/app/src/main/java/im/status/ethereum/MainApplication.java
+++ b/android/app/src/main/java/im/status/ethereum/MainApplication.java
@ -9,7 +9,6 @@ import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
-import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.horcrux.svg.SvgPackage;
 import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
 import com.oblador.keychain.KeychainPackage;
@ -74,7 +73,6 @@ public class MainApplication extends MultiDexApplication implements ReactApplica
                    new ImageResizerPackage(),
                    new PickerPackage(),
                    new WebViewBridgePackage(BuildConfig.DEBUG_WEBVIEW == "1", callRPC),
-                    new RNCWebViewPackage(),
                    new ReactNativeConfigPackage(),
                    new KeychainPackage(),
                    new RNShakeEventPackage(),
--- a/android/settings.gradle
+++ b/android/settings.gradle
@ -36,8 +36,6 @@ include ':react-native-keychain'
 project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android')
 include ':react-native-webview-bridge'
 project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')
-include ':react-native-webview'
-project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':react-native-touch-id'
 project(':react-native-touch-id').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-touch-id/android')
 include ':react-native-config'
--- a/clj-rn.conf.edn
+++ b/clj-rn.conf.edn
@ -13,15 +13,15 @@
              "react-native-status"
              "react-native-status-keycard"
              "react-native-camera"
-              "react-native-qrcode"
+              "qrcode"
              "identicon.js"
              "react-native-fs"
              "react-native-dialogs"
              "react-native-image-resizer"
              "react-native-image-crop-picker"
              "react-native-securerandom"
+              "react-native-svg"
              "react-native-webview-bridge"
-              "react-native-webview"
              "react-native-firebase"
              "react-native-touch-id"
              "homoglyph-finder"
@ -56,7 +56,7 @@
                   "dismissKeyboard"
                   "react-native-splash-screen"
                   "react-native-status"
-                   "react-native-qrcode"
+                   "qrcode"
                   "identicon.js"
                   "react-native-fs"
                   "react-native-dialogs"
--- a/ios/Podfile
+++ b/ios/Podfile
@ -12,16 +12,19 @@ target 'StatusIm' do
  pod 'Firebase/Core'
  pod 'Firebase/Messaging'

-  pod 'React', :path => '../node_modules/react-native'
+  # RCTImage is requered by react-native-svg
+  pod 'React', :path => '../node_modules/react-native', :subspecs => ['RCTImage',]
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'react-native-background-timer', :path => '../node_modules/react-native-background-timer'
  pod 'RNKeychain', :path => '../node_modules/react-native-keychain'
  pod 'react-native-camera', path: '../node_modules/react-native-camera'
-  pod 'react-native-webview', path: '../node_modules/react-native-webview'
  pod 'TouchID', path: '../node_modules/react-native-touch-id'
  pod 'SQLCipher', '~>3.0'
  pod 'SSZipArchive'

+  # when removing svg pod, RCTImage is needed to be removed from React subspecs
+  pod 'RNSVG', :path => '../node_modules/react-native-svg'
+
  target 'StatusImTests' do
    inherit! :search_paths
    # Pods for testing
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -66,12 +66,17 @@ PODS:
    - React
  - react-native-camera/RN (1.1.5):
    - React
-  - react-native-webview (5.2.1):
-    - React
  - React/Core (0.59.10):
    - yoga (= 0.59.10.React)
+  - React/RCTImage (0.59.10):
+    - React/Core
+    - React/RCTNetwork
+  - React/RCTNetwork (0.59.10):
+    - React/Core
  - RNKeychain (3.0.0-rc.3):
    - React
+  - RNSVG (9.7.1):
+    - React
  - SQLCipher (3.4.2):
    - SQLCipher/standard (= 3.4.2)
  - SQLCipher/common (3.4.2)
@ -85,11 +90,11 @@ PODS:
 DEPENDENCIES:
  - Firebase/Core
  - Firebase/Messaging
-  - React (from `../node_modules/react-native`)
  - react-native-background-timer (from `../node_modules/react-native-background-timer`)
  - react-native-camera (from `../node_modules/react-native-camera`)
-  - react-native-webview (from `../node_modules/react-native-webview`)
+  - React/RCTImage (from `../node_modules/react-native`)
  - RNKeychain (from `../node_modules/react-native-keychain`)
+  - RNSVG (from `../node_modules/react-native-svg`)
  - SQLCipher (~> 3.0)
  - SSZipArchive
  - TouchID (from `../node_modules/react-native-touch-id`)
@ -116,10 +121,10 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-background-timer"
  react-native-camera:
    :path: "../node_modules/react-native-camera"
-  react-native-webview:
-    :path: "../node_modules/react-native-webview"
  RNKeychain:
    :path: "../node_modules/react-native-keychain"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
  TouchID:
    :path: "../node_modules/react-native-touch-id"
  yoga:
@ -135,16 +140,16 @@ SPEC CHECKSUMS:
  GoogleUtilities: 06b66f9567769a7958db20a92f0128b2843e49d5
  nanopb: 5601e6bca2dbf1ed831b519092ec110f66982ca3
  Protobuf: 1eb9700044745f00181c136ef21b8ff3ad5a0fd5
-  React: 36d0768f9e93be2473b37e7fa64f92c1d5341eef
-  react-native-background-timer: f7bc6cb474ca47d81f3be8a1b4c986ac7ee136b3
-  react-native-camera: 70db6904b34e02054a25deb84dde9196e94caaee
-  react-native-webview: 763be2e9f8b103d195170fafc2fd77805d5434b5
-  RNKeychain: 216f37338fcb9e5c3a2530f1e3295f737a690cb1
+  React: 1d605e098d69bdf08960787f3446f0a9dc2e2ccf
+  react-native-background-timer: bb7a98c8e97fc7c290de2d423dd09ddb73dcbcbb
+  react-native-camera: 68ad5143d2d0636236d46c7de8d2a6455ca52a36
+  RNKeychain: 627c6095cef215dd3d9804a9a9cf45ab96aa3997
+  RNSVG: 2e097b92aaa6d4e0f354fd7c49cbf3b17f8b3920
  SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
  SSZipArchive: 41455d4b8d2b6ab93990820b50dc697c2554a322
-  TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
-  yoga: 684513b14b03201579ba3cee20218c9d1298b0cc
+  TouchID: b0640fedb86fa2db2fe1df15b61594ad49e76288
+  yoga: 128daf064cacaede0c3bb27424b6b4c71052e6cd

-PODFILE CHECKSUM: 13006106aa0716d54fffebf8dcb42006f0fb8798
+PODFILE CHECKSUM: 673e1d3c59c7531a14b78b8fd2a3efb247bb0022

-COCOAPODS: 1.7.5
+COCOAPODS: 1.5.3
--- a/mobile_files/package.json.orig
+++ b/mobile_files/package.json.orig
@ -25,6 +25,7 @@
    "process": "0.11.10",
    "prop-types": "15.6.0",
    "punycode": "1.4.1",
+    "qrcode": "^1.4.1",
    "querystring-es3": "0.2.1",
    "react": "16.8.3",
    "react-dom": "16.4.2",
@ -45,7 +46,6 @@
    "react-native-languages": "^3.0.2",
    "react-native-mail": "git+https://github.com/status-im/react-native-mail.git#v3.0.8_status",
    "react-native-navigation-twopane": "git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.2-status",
-    "react-native-qrcode": "git+https://github.com/status-im/react-native-qrcode.git#v0.2.8",
    "react-native-randombytes": "3.5.0",
    "react-native-safe-area-view": "0.9.0",
    "react-native-screens": "^1.0.0-alpha.22",
@ -53,12 +53,11 @@
    "react-native-shake": "^3.3.1",
    "react-native-splash-screen": "3.1.1",
    "react-native-status-keycard": "2.5.7",
-    "react-native-svg": "^9.2.4",
+    "react-native-svg": "9.7.1",
    "react-native-svg-transformer": "^0.12.1",
    "react-native-tcp": "git+https://github.com/status-im/react-native-tcp.git#v3.3.0-1-status",
    "react-native-touch-id": "^4.4.1",
    "react-native-udp": "git+https://github.com/status-im/react-native-udp.git#v2.3.1-1-status",
-    "react-native-webview": "^5.2.1",
    "react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#fix/classnames-colision",
    "react-navigation": "^3.11.0",
    "realm": "2.28.1",
--- a/mobile_files/yarn.lock
+++ b/mobile_files/yarn.lock
@ -2337,7 +2337,7 @@ create-react-class@15.6.2:
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

-create-react-class@^15.6.0, create-react-class@^15.6.3:
+create-react-class@^15.6.3:
  version "15.6.3"
  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
  integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@ -2580,6 +2580,11 @@ diffie-hellman@^5.0.0:
    miller-rabin "^4.0.0"
    randombytes "^2.0.0"

+dijkstrajs@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
+  integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
+
 dns.js@1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/dns.js/-/dns.js-1.0.1.tgz#bfc0950d79777728c67500b1c418075e653955ee"
@ -3018,7 +3023,7 @@ fbjs-scripts@^1.0.0:
    semver "^5.1.0"
    through2 "^2.0.0"

-fbjs@^0.8.16, fbjs@^0.8.17, fbjs@^0.8.9:
+fbjs@^0.8.16, fbjs@^0.8.9:
  version "0.8.17"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@ -4011,6 +4016,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

+isarray@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isexe@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@ -5645,6 +5655,11 @@ plugin-error@^0.1.2:
    arr-union "^2.0.1"
    extend-shallow "^1.1.2"

+pngjs@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 posix-character-classes@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@ -5781,10 +5796,15 @@ punycode@^2.1.0:
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

-qr.js@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
-  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+qrcode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.1.tgz#2126814985d0dbbd9aee050fc523d319c6a7dc3b"
+  integrity sha512-3JhHQJkKqJL4PfoM6t+B40f0GWv9eNJAJmuNx2X/sHEOLvMyvEPN8GfbdN1qmr19O8N2nLraOzeWjXocHz1S4w==
+  dependencies:
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^13.2.4"

 qs@6.5.2, qs@~6.5.2:
  version "6.5.2"
@ -6010,14 +6030,6 @@ react-native-languages@^3.0.2:
  version "0.0.2"
  resolved "git+https://github.com/status-im/react-native-navigation-twopane.git#04ed5fddfb46a6a3ee30776987acb4d3b11c27d4"

-"react-native-qrcode@git+https://github.com/status-im/react-native-qrcode.git#v0.2.8":
-  version "0.2.8"
-  resolved "git+https://github.com/status-im/react-native-qrcode.git#58af1c00a7dc2e9b4bd59993d002c1045a9bd22f"
-  dependencies:
-    create-react-class "^15.6.0"
-    prop-types "^15.5.10"
-    qr.js "0.0.0"
-
 react-native-randombytes@3.5.0:
  version "3.5.0"
  resolved "https://registry.yarnpkg.com/react-native-randombytes/-/react-native-randombytes-3.5.0.tgz#a641130a52eca65ef2165409f65d930184c6dc83"
@ -6076,10 +6088,10 @@ react-native-svg-transformer@^0.12.1:
    "@svgr/core" "^4.1.0"
    semver "^5.6.0"

-react-native-svg@^9.2.4:
-  version "9.2.4"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.2.4.tgz#a30ee42535b39097e7b68dfa6dcf5c1c8cce97f1"
-  integrity sha512-Gox4iASgWpwgXpmaLgEvzwftjkrT8hIEnxnJvIypZaFlME9fdcgulv4AKcnwTFLxyIrbuuIaY1/GmbU4hejkjg==
+react-native-svg@9.7.1:
+  version "9.7.1"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.7.1.tgz#a6d270cd51f8f238de7623338211debf4ff9cf5c"
+  integrity sha512-Yr54SyLPCdovLCJ08V7syJUe1iKrTYG9V5wB08z6lh/9FdC2R9CtBnMyz83GDLKfzUONqqH9nN1l+o61CgD3tg==

 react-native-tab-view@^1.2.0, react-native-tab-view@^1.4.1:
  version "1.4.1"
@ -6121,14 +6133,6 @@ react-native-touch-id@^4.4.1:
    invariant "2.2.0"
    keymirror "0.1.1"

-react-native-webview@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-5.2.1.tgz#8a3f2ee14488ad3d058f15c7054fb52fa47195ea"
-  integrity sha512-2okhUUI51eX65OCLAko82PQX54flsrUndgpVoVuobD86e1OGQDDQnJizy2hAGxTpxv2c/dKUpeqHpWohY6ku9Q==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-    fbjs "^0.8.17"
-
 "react-native@git+https://github.com/status-im/react-native.git#v0.59.10":
  version "0.59.10"
  resolved "git+https://github.com/status-im/react-native.git#b89933b2045e3f1e1e22b0935f92318f1c36d5bb"
@ -7816,7 +7820,7 @@ yallist@^3.0.0, yallist@^3.0.3:
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
  integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==

-yargs-parser@^13.0.0, yargs-parser@^13.1.0:
+yargs-parser@^13.0.0, yargs-parser@^13.1.0, yargs-parser@^13.1.1:
  version "13.1.1"
  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
@ -7848,6 +7852,22 @@ yargs@^13.2.2:
    y18n "^4.0.0"
    yargs-parser "^13.1.0"

+yargs@^13.2.4:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
+
 yargs@^9.0.0:
  version "9.0.1"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"
--- a/react-native/src/desktop/status_im/react_native/js_dependencies.cljs
+++ b/react-native/src/desktop/status_im/react_native/js_dependencies.cljs
@ -5,7 +5,7 @@
 (def fs                     (js-require/js-require "react-native-fs"))
 (def http-bridge            (js-require/js-require "react-native-http-bridge"))
 (def keychain               (js-require/js-require "react-native-keychain"))
-(def qr-code                (js-require/js-require "react-native-qrcode"))
+(def qr-code                (js-require/js-require "qrcode"))
 (def react-native           (js/require "react-native"))
 (def realm                  (js/require "realm"))
 (def webview-bridge         (js/require "react-native-webview-bridge"))
--- a/react-native/src/mobile/status_im/react_native/js_dependencies.cljs
+++ b/react-native/src/mobile/status_im/react_native/js_dependencies.cljs
@ -5,14 +5,13 @@
 (def fs                     (js-require/js-require "react-native-fs"))
 (def http-bridge            (js-require/js-require "react-native-http-bridge"))
 (def keychain               (js-require/js-require "react-native-keychain"))
-(def qr-code                (js-require/js-require "react-native-qrcode"))
+(def qr-code                (js-require/js-require "qrcode"))
 (def react-native           (js/require "react-native"))
 (def status-keycard         (js-require/js-require "react-native-status-keycard"))
 (def realm                  (js/require "realm"))
 (def webview-bridge         (js-require/js-require "react-native-webview-bridge"))
 (def touchid-class          (js-require/js-require "react-native-touch-id"))
 (defn touchid []            (.-default (touchid-class)))
-(def webview                (js-require/js-require "react-native-webview"))
 (def EventEmmiter           (js-require/js-require "react-native/Libraries/vendor/emitter/EventEmitter"))
 (def securerandom           (js-require/js-require "react-native-securerandom"))
 (defn secure-random []      (.-generateSecureRandom (securerandom)))
@ -26,6 +25,7 @@
 (def image-crop-picker      (js-require/js-require "react-native-image-crop-picker"))
 (def image-resizer          (js-require/js-require "react-native-image-resizer"))
 (def react-native-firebase  (js-require/js-require "react-native-firebase"))
+(def svg                    (js/require "react-native-svg"))
 (def snoopy                 (js-require/js-require "rn-snoopy"))
 (def snoopy-filter          (js-require/js-require "rn-snoopy/stream/filter"))
 (def snoopy-bars            (js-require/js-require "rn-snoopy/stream/bars"))
--- a/src/status_im/ui/components/qr_code_viewer/styles.cljs
+++ b/src/status_im/ui/components/qr_code_viewer/styles.cljs
@ -15,9 +15,10 @@
   :width            (+ width qr-code-padding qr-code-padding)
   :background-color colors/white
   :border-color     colors/black-transparent
+   :align-items      :center
+   :justify-content  :center
   :border-width     1
-   :border-radius    8
-   :padding          qr-code-padding})
+   :border-radius    8})

 (defstyle name-container
  {:flex           0.6
--- a/src/status_im/ui/components/qr_code_viewer/views.cljs
+++ b/src/status_im/ui/components/qr_code_viewer/views.cljs
@ -3,13 +3,16 @@
            [status-im.react-native.js-dependencies :as rn-dependencies]
            [status-im.ui.components.qr-code-viewer.styles :as styles]
            [status-im.ui.components.react :as react]
+            [status-im.ui.components.svg :as svg]
            [status-im.ui.screens.profile.tribute-to-talk.views :as tribute-to-talk])
  (:require-macros [status-im.utils.views :refer [defview letsubs]]))

-(defn qr-code [props]
-  (reagent/create-element
-   (rn-dependencies/qr-code)
-   (clj->js (merge {:inverted true} props))))
+(defn qr-code [{:keys [size value]}]
+  (let [uri (reagent/atom nil)]
+    (.toString (rn-dependencies/qr-code) value #(reset! uri %2))
+    (fn []
+      (when @uri
+        [svg/svgxml {:xml @uri :width size :height size}]))))

 (defn qr-code-view [size value]
  (when (and size value)
--- a/src/status_im/ui/components/svg.cljs
+++ b/src/status_im/ui/components/svg.cljs
@ -0,0 +1,16 @@
+(ns status-im.ui.components.svg
+  (:require [goog.object :as object]
+            [status-im.react-native.js-dependencies :as js-dependencies]
+            [reagent.core :as reagent]))
+
+(defn get-property [name]
+  (object/get js-dependencies/svg name))
+
+(defn adapt-class [class]
+  (when class
+    (reagent/adapt-react-class class)))
+
+(defn get-class [name]
+  (adapt-class (get-property name)))
+
+(def svgxml (get-class "SvgXml"))
--- a/test/cljs/status_im/react_native/js_dependencies.cljs
+++ b/test/cljs/status_im/react_native/js_dependencies.cljs
@ -13,6 +13,8 @@
 (def image-crop-picker      (fn [] #js {}))
 (def image-resizer          (fn [] #js {}))
 (def qr-code                (fn [] #js {}))
+(def svg                    (fn [] #js {}))
+
 (def react-native
  #js {:NativeModules      #js {}
       :Animated           #js {:View #js {}