search

seekshiva / react-native-remote-svg

Adds support for loading svg images in React Native
MIT License
184 stars 71 forks source link

Rendering text instead of SVG #43

Closed Inveth closed 5 years ago

Inveth commented 5 years ago

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

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.

seekshiva commented 5 years ago

@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?

kuzkokov commented 5 years ago

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

trta2352 commented 5 years ago

@kuzkokov did you manage to resolve the issue. I'm having the same problem.

seekshiva commented 5 years ago

It looks like the issue may be happening because the uri string provided contains newline character in it, and that messes up the svg when we do encodeURIComponent(). Can you try removing the newline and see if it works? I can provide a fix accordingly.

kuzkokov commented 5 years ago

@seekshiva made some research. Funny thing, chrome team fixed that issue as mentioned here and here (in this very repository 😄), so now encodeURIComponent() just breaking things. There is still this issue appeared if I remove encodeURIComponent() from the source code.

seekshiva commented 5 years ago

@kuzkokov the scrollbar issue can be fixed by providing overflow: hidden; as style to the html or body generated by SvgImage. Would it be safe to remove encodeURIComponent() otherwise?

kuzkokov commented 5 years ago

@seekshiva it seems so. It's only needed if a user has a broken version of chrome, which is from 72 to 72.0.3626.105.

seekshiva commented 5 years ago

I've published v2.0.5 that reverts the use of encodeURIComponent as well as adds overflow: hidden; to body (html tag already had overflow: hidden) - show hopefully the scrollbar goes away now. Please check and let me know if scrollbar is gone after the update.

kuzkokov commented 5 years ago

@seekshiva unfortunately, it didn't help. I made a pull request, fixing it. In the separate react-native-webview there are props for this purpose. I also added style for html, body since I faced a problem that svgs was cropping on android, because html content was bigger than WebView itself somehow. Please check it. Now it's working fine (for me at least 😄).

seekshiva commented 5 years ago

Good catch with showsHorizontalScrollIndicator and showsVerticalScrollIndicator. I've pushed v2.0.6 with your PR.

seekshiva commented 5 years ago

@Inveth The above update should solve your issue. Please re-open this issue if you still see the scrollview.