console.error : ERROR SVG

[Kcrong]

(This issue is also in software-mansion/react-native-svg#571)

My Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ^0.48.4 => 0.48.4

Screenshot

Error code

line 64794 is as follows.

var inputSVG = this.state.svgXmlData.substring(this.state.svgXmlData.indexOf("<svg "), this.state.svgXmlData.indexOf("</svg>") + 6);

Xcode Log

2018-01-11 14:39:07.672 [error][tid:com.facebook.react.JavaScript] 'ERROR SVG', { [TypeError: this.state.svgXmlData.indexOf is not a function. (In 'this.state.svgXmlData.indexOf("<svg ")', 'this.state.svgXmlData.indexOf' is undefined)]
  line: 64794,
  column: 85,
  sourceURL: 'http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false' }

[Crash--]

Could you share your SVG?

[jskidd3]

I get this error using the SVG shared in the readme 😡

[zhaonian]

I think the reason might be iOS only accepts request to https by default, however the Simpsons SVG from README is a http

[pibo]

Used to work before, but now when I try to load any SVG (external with https or local through require) I get this error:

[solome]

same error

console.error: "ERROR SVG",{"line":1,"column":7221}
ExceptionsManager.js?452b:73 ERROR SVG ReferenceError: child is not defined

example code:

<SvgUri width='200' height='200'
  source={{ uri: 'http://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/i-zhenguo/entity-back-d54395ec583aca4b98e8.svg' }}
/>

// Remove empty strings from children array  
  trimElementChilden(children) {
    for (child of children) {
      console.log('child', child)
      if (typeof child === 'string') {
        if (child.trim.length === 0)
          children.splice(children.indexOf(child), 1); 
      }
    }
  }

child is not defined in trimElementChilden()

[SoulKa]

I get this error when I'm in a wifi without Internet connection. It would be very convenient if there is no "console.error" but an error icon or "console.log" instead. Ihave to click away all the error messages when the fetch fails. Everything else works fine, greate work!

[evgeny-belyaev]

This issue has trivial fix in pull request by @solome : #137

Why it isn't merged yet? Is anybody home? =)

[rx7910]

i guess this error is because you request a http uri. try to replace 'http://xxxx' with 'https://xxxx'

reference:
https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed

[SoulKa]

i guess this error is because you request a http uri. try to replace 'http://xxxx' with 'https://xxxx'

reference:
https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed

You can't simply access a http ressource by https. Those are two completely different protocols.

[alexmcode]

What worked for me was to just download the svg file and pass it as a string:
fetch('http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg')
.then( r => r.text())
.then( r => {
this.setState({ r })
})
.catch( err => console.log('ERR', err))

[AlirezaAzizi145]

same error 👎