Rendering text instead of SVG

I’ve tried to use it to render remote SVG images but instead of it it’s rendering text :

import Image from 'react-native-remote-svg';
<Image
  source={{
    uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"  viewBox="0 0 100 100">
      <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" fill="green"  stroke="#00FF00" stroke-width ="2" />
    </svg>`,
  }}
  style={{ width: 100, height: 100 }}
/>;

package.json

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "flow": "flow"
  },
  "dependencies": {
    "@react-native-community/netinfo": "^2.0.3",
    "@react-native-community/viewpager": "^1.1.6",
    "babel-eslint": "^10.0.1",
    "bundle": "^2.1.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.6.0",
    "eslint-config-prettier-standard": "^2.0.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.17.1",
    "eslint-plugin-jest": "^22.4.1",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-native": "^3.6.0",
    "eslint-plugin-standard": "^4.0.0",
    "immutable": "^4.0.0-rc.12",
    "lodash": "^4.17.11",
    "prettier": "^1.17.0",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-camera": "^2.4.0",
    "react-native-dropdownalert": "^3.10.0",
    "react-native-extra-dimensions-android": "^1.2.5",
    "react-native-flash-message": "^0.1.11",
    "react-native-modal": "^9.0.0",
    "react-native-orientation-locker": "^1.1.5",
    "react-native-qrcode-scanner": "^1.1.2",
    "react-native-remote-svg": "^2.0.3",
    "react-native-scalable-image": "^0.5.0",
    "react-native-size-matters": "^0.1.7",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^9.4.0",
    "react-native-swiper": "^1.5.14",
    "react-native-user-inactivity": "^0.1.3-next",
    "react-native-webview": "^5.7.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-flow": "^7.0.0",
    "@babel/runtime": "^7.4.3",
    "babel-cli": "^6.26.0",
    "babel-jest": "^24.7.1",
    "babel-preset-flow": "^6.23.0",
    "flow-bin": "^0.96.0",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3",
    "remote-redux-devtools": "^0.5.16"
  },
  "jest": {
    "preset": "react-native"
  }
}

What could be the issue here? Is there any conflicts between my packages? I tried to use remote images / local ones and well, just used an example. Same issue all the on all of those.

[kuzkokov]

hi, @seekshiva , I have faced the same issue on android today. my default browser is chrome, v74

[seekshiva]

@Inveth Chrome 70 introduced a breaking change where directly passing html in url will break and needs to be passed after calling encodeURIComponent(). This version was merged as part of https://github.com/seekshiva/react-native-remote-svg/pull/33.

It looks like the default browser in your device still expects html to be passed directly but encodeURIComponent() gets called instead. I’m guessing this must be in android. Can you check and tell what the default browser in your device is, and what version it is running?