search

vault-development / react-native-svg-uri

Render SVG images in React Native from an URL or static file
849 stars 334 forks source link

Error: raw text cannot be used inside of a <Text> tag #112

Open skozin opened 6 years ago

skozin commented 6 years ago

This is similar to #84, but is caused by a comment node. Try rendering this SVG image under React Native v0.46 or later:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="160px" height="160px" viewBox="0 0 160 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
    <title>logo (havelock blue)</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Welcome-screen" transform="translate(-240.000000, -267.000000)">
            <g id="logo-(havelock-blue)" transform="translate(240.000000, 267.000000)">
                <g id="Turtle-avatar"></g>
                <g id="logo_horizontal-(blue)">
                    <circle id="Oval-5" fill="#63A0FF" cx="80" cy="80" r="80"></circle>
                    <path d="M80.6451613,7.74193548 C40.3818215,7.74193548 7.74193548,40.0929729 7.74193548,80 C7.74193548,119.907027 40.3818215,152.258065 80.6451613,152.258065 C120.908501,152.258065 153.548387,119.907027 153.548387,80 C153.473257,40.1238582 120.87734,7.81640093 80.6451613,7.74193548 Z M102.215779,59.9734203 L115.868068,48.3363538 L142.080464,53.8842576 C144.820093,60.4348899 146.479535,67.3794176 146.995288,74.4520962 L143.30917,77.2937054 L116.960251,77.2937054 L102.215779,59.9734203 Z M111.499336,80.2706295 L96.7548629,96.6437115 L64.8085055,96.6437115 L49.92751,80.2706295 L64.5354597,61.8678265 L96.4818171,61.8678265 L111.499336,80.2706295 Z M96.8913858,56.4552374 L64.5354597,56.4552374 L54.4327655,48.3363538 L50.4736015,45.0888003 L54.5692884,41.5706174 L64.2624139,33.4517337 L96.7548629,33.4517337 L110.407152,44.9534856 L96.8913858,56.4552374 Z M50.6101244,52.666425 L59.0745439,59.8381056 L44.73964,77.1583907 L17.435061,77.1583907 L14.1585115,74.3167814 C14.6886821,67.2900097 16.3478577,60.3922765 19.0733357,53.8842576 L45.1492087,48.3363538 L50.6101244,52.666425 Z M17.8446297,83.1122387 L44.3300713,83.1122387 L59.2110668,99.4853208 L45.5587773,112.06959 L18.2541984,104.356651 C16.0083091,98.4480105 14.6290376,92.250647 14.1585115,85.953848 L17.8446297,83.1122387 Z M64.5354597,102.462245 L96.8913858,102.462245 L97.7105231,103.274133 L111.362813,115.587773 L97.7105231,127.22484 L64.6719826,127.22484 L50.6101244,115.993718 L64.5354597,102.462245 Z M102.079256,99.2146913 L116.960251,83.1122387 L144.26483,83.1122387 L148.087471,85.953848 C147.604078,92.2048415 146.225005,98.3557522 143.991784,104.221336 L116.687206,112.06959 L102.079256,99.2146913 Z M138.394346,46.4419476 L116.960251,42.1118763 L102.079256,30.0688655 L109.451492,20.1908904 C121.558027,25.9636646 131.639841,35.2021016 138.394346,46.712577 L138.394346,46.4419476 Z M103.307962,17.8905401 L95.9357255,27.362571 L64.8085055,27.362571 L63.1702308,25.3328501 L57.4362692,17.8905401 C64.849068,15.083182 72.7098602,13.616598 80.6451613,13.5604688 C88.3966415,13.6804847 96.0669294,15.1460093 103.307962,17.8905401 L103.307962,17.8905401 Z M51.8388305,20.3262051 L58.8014981,29.2569772 L58.8014981,29.9335508 L49.92751,37.3758608 L44.3300713,42.1118763 L22.4864081,46.8478917 C29.3493841,35.276712 39.5809493,26.0318748 51.8388305,20.3262051 Z M22.3498852,112.204905 L44.6031171,118.564697 L59.4841126,130.743023 L52.521445,140.215054 C39.7434437,134.254262 29.1860931,124.453212 22.3498852,112.204905 L22.3498852,112.204905 Z M58.1188837,143.056663 L64.8085055,133.990576 L96.61834,133.990576 L98.2566147,136.155612 L103.307962,143.056663 C96.0585469,145.75499 88.3885188,147.174669 80.6451613,147.25142 C72.9477443,147.158947 65.3252771,145.73952 58.1188837,143.056663 Z M109.041923,140.756313 L103.307962,131.825541 L102.079256,130.878338 L110.270629,124.112601 L116.960251,118.564697 L139.350006,112.06959 C132.478233,124.338953 121.87056,134.142361 109.041923,140.079739 L109.041923,140.756313 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Expected behavior: SVG renders without errors.

Actual behavior: an error with the following message is produced by React Native:

Raw text cannot be used outside of a <Text> tag. Not rendering string:
' Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch '

I see this error under react-native v0.52.2, react v16.2.0, react-native-svg-uri v1.2.3 (latest).

skozin commented 6 years ago

I submitted #113 that fixes this and similar issues.

kitdesai commented 6 years ago

any updates on @skozin's PR? running into this same issue

skozin commented 6 years ago

@ankitdesai seems that #113 is awaiting review from one of the contributors. @matc4 can you please take a look or ask somebody to do this?

zhaonian commented 6 years ago

any update on this??? ran into the same issue