diff --git a/TestsExample/App.js b/TestsExample/App.js index a9b77ac2..012b339d 100644 --- a/TestsExample/App.js +++ b/TestsExample/App.js @@ -2,6 +2,7 @@ import React from 'react'; import ColorTest from './src/ColorTest'; import Test1718 from './src/Test1718'; +import Test1813 from './src/Test1813'; export default function App() { return ; diff --git a/TestsExample/assets/ruby.svg b/TestsExample/assets/ruby.svg new file mode 100644 index 00000000..7c18d600 --- /dev/null +++ b/TestsExample/assets/ruby.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/TestsExample/ios/Podfile.lock b/TestsExample/ios/Podfile.lock index 94cc3bac..5320e2d2 100644 --- a/TestsExample/ios/Podfile.lock +++ b/TestsExample/ios/Podfile.lock @@ -347,7 +347,7 @@ PODS: - React-jsi (= 0.68.0-rc.1) - React-logger (= 0.68.0-rc.1) - React-perflogger (= 0.68.0-rc.1) - - RNSVG (12.3.0): + - RNSVG (12.4.2): - React-Core - SocketRocket (0.6.0) - Yoga (1.14.0) @@ -501,7 +501,7 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716 - FBReactNativeSpec: 137186498f03934daf999cec565fbc3d291f294c + FBReactNativeSpec: e7746531d15c5440c7588d148797f9d20b12ba89 Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c @@ -540,11 +540,11 @@ SPEC CHECKSUMS: React-RCTVibration: 5cab6419b68d5750482b0fc34dbb27af550469cc React-runtimeexecutor: 10cda3a396b14a764a5f86088e7e3810b9c66cec ReactCommon: 73a01eb83f22c84a6b09dfb60f3463888ebd4975 - RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8 + RNSVG: 72bf57dc8f6dfa304bdab465cd8371c62bc70b16 SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 Yoga: d29dba374c1a582b40cfb736647b5e1b5ed35dba YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 54439993ba279e900534ada11d49259eaead9508 -COCOAPODS: 1.11.2 +COCOAPODS: 1.11.3 diff --git a/TestsExample/src/Test1813.tsx b/TestsExample/src/Test1813.tsx new file mode 100644 index 00000000..0b7907d9 --- /dev/null +++ b/TestsExample/src/Test1813.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { SvgFromUri, SvgFromXml, SvgUri, SvgXml, SvgCss, SvgCssUri, SvgWithCss, SvgWithCssUri, WithLocalSvg, LocalSvg } from 'react-native-svg'; + +const asset = require('../assets/ruby.svg'); +const normalUri = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg"; +const uriWithCss = "http://thenewcode.com/assets/svg/accessibility.svg"; +const xml = ` + + + + + + + + + +`; + +const css = ` + + + + +`; + +export default () => { + const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg') + + return ( + <> + setUri(normalUri)} + width="100" + height="100" + uri={uri} + /> + console.log(error)} + width="100" + height="100" + uri={normalUri} + /> + + + + console.log(error)} + width="100" + height="100" + uri={uriWithCss} + /> + + console.log(error)} + width="100" + height="100" + uri={uriWithCss} + /> + + + + ); +} diff --git a/TestsExample/yarn.lock b/TestsExample/yarn.lock index bb736c6a..4c350b43 100644 --- a/TestsExample/yarn.lock +++ b/TestsExample/yarn.lock @@ -2312,18 +2312,18 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2: shebang-command "^2.0.0" which "^2.0.1" -css-select@^4.2.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd" - integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ== +css-select@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" + integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg== dependencies: boolbase "^1.0.0" - css-what "^5.1.0" - domhandler "^4.3.0" - domutils "^2.8.0" + css-what "^6.1.0" + domhandler "^5.0.2" + domutils "^3.0.1" nth-check "^2.0.1" -css-tree@^1.0.0-alpha.39: +css-tree@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== @@ -2331,10 +2331,10 @@ css-tree@^1.0.0-alpha.39: mdn-data "2.0.14" source-map "^0.6.1" -css-what@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe" - integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw== +css-what@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" + integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== cssom@^0.4.4: version "0.4.4" @@ -2500,19 +2500,19 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-serializer@^1.0.1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91" - integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig== +dom-serializer@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" + integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg== dependencies: - domelementtype "^2.0.1" - domhandler "^4.2.0" - entities "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.2" + entities "^4.2.0" -domelementtype@^2.0.1, domelementtype@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57" - integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== +domelementtype@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" + integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== domexception@^2.0.1: version "2.0.1" @@ -2521,21 +2521,21 @@ domexception@^2.0.1: dependencies: webidl-conversions "^5.0.0" -domhandler@^4.2.0, domhandler@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626" - integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g== +domhandler@^5.0.1, domhandler@^5.0.2: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== dependencies: - domelementtype "^2.2.0" + domelementtype "^2.3.0" -domutils@^2.8.0: - version "2.8.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" - integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== +domutils@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c" + integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q== dependencies: - dom-serializer "^1.0.1" - domelementtype "^2.2.0" - domhandler "^4.2.0" + dom-serializer "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.1" ee-first@1.1.1: version "1.1.1" @@ -2576,10 +2576,10 @@ enquirer@^2.3.5: dependencies: ansi-colors "^4.1.1" -entities@^2.0.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" - integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== +entities@^4.2.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4" + integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg== envinfo@^7.7.2: version "7.8.1" @@ -5528,10 +5528,8 @@ react-native-gradle-plugin@^0.0.4: react-native-codegen "*" "react-native-svg@link:..": - version "12.3.0" - dependencies: - css-select "^4.2.1" - css-tree "^1.0.0-alpha.39" + version "0.0.0" + uid "" react-native@0.68.0-rc.1: version "0.68.0-rc.1" diff --git a/src/LocalSvg.tsx b/src/LocalSvg.tsx index 472dce71..ea53f434 100644 --- a/src/LocalSvg.tsx +++ b/src/LocalSvg.tsx @@ -5,6 +5,7 @@ import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource' import { fetchText } from './xml'; import { SvgCss, SvgWithCss } from './css'; +import { SvgProps } from './elements/Svg'; const { getRawResource } = NativeModules.RNSVGRenderableManager || {}; @@ -48,7 +49,10 @@ export const loadLocalRawResource = ? loadLocalRawResourceDefault : loadLocalRawResourceAndroid; -export type LocalProps = { asset?: string | number; override?: Object }; +export type LocalProps = SvgProps & { + asset?: string | number; + override?: Object; +}; export type LocalState = { xml: string | null }; export function LocalSvg(props: LocalProps) { diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts index 27620a3b..e70248b4 100644 --- a/src/ReactNativeSVG.ts +++ b/src/ReactNativeSVG.ts @@ -42,7 +42,12 @@ import { SvgWithCssUri, inlineStyles, } from './css'; -import { LocalSvg, WithLocalSvg, loadLocalRawResource } from './LocalSvg'; +import { + LocalSvg, + WithLocalSvg, + loadLocalRawResource, + LocalProps, +} from './LocalSvg'; import { RNSVGCircle, RNSVGClipPath, @@ -94,6 +99,7 @@ export { UriProps, XmlProps, AstProps, + LocalProps, }; export { diff --git a/src/css.tsx b/src/css.tsx index 822e2707..8cb5c49a 100644 --- a/src/css.tsx +++ b/src/css.tsx @@ -720,7 +720,7 @@ export class SvgWithCss extends Component { try { this.setState({ ast: xml ? parse(xml, inlineStyles) : null }); } catch (e) { - console.error(e); + this.props.onError ? this.props.onError(e as Error) : console.error(e); } } render() { @@ -747,7 +747,7 @@ export class SvgWithCssUri extends Component { try { this.setState({ xml: uri ? await fetchText(uri) : null }); } catch (e) { - console.error(e); + this.props.onError ? this.props.onError(e as Error) : console.error(e); } } render() { diff --git a/src/xml.tsx b/src/xml.tsx index 47e44152..9987b54c 100644 --- a/src/xml.tsx +++ b/src/xml.tsx @@ -205,7 +205,7 @@ export type Styles = { [property: string]: string }; export function getStyle(string: string): Styles { const style: Styles = {}; - const declarations = string.split(';').filter(v => v.trim()); + const declarations = string.split(';').filter((v) => v.trim()); const { length } = declarations; for (let i = 0; i < length; i++) { const declaration = declarations[i];