vault-development / react-native-svg-uri Goto Github PK
View Code? Open in Web Editor NEWRender SVG images in React Native from an URL or static file
Render SVG images in React Native from an URL or static file
I've installed this component and tried to use it with my own static file (https://gist.github.com/igongora/686f13f3a9db38f47d47249db1cf1c1a), but for some reason it doesn't work. I get 'TypeError: invalid svg' from the console
Great component right here, congrats!
react-native-svg-uri
currently supports a very limited number of attributes supported by react-native-svg
because the attributes get explicitly filtered. For example, it is completely legal to specify the fill
attribute on the <svg>
or <g>
elements but because of the filtering react-native-svg-uri
won't pass those along to react-native-svg
. Is there a reason why this filtering is necessary? Would you consider making a change that would simply copy all the attribute values from an svg file into the corresponding react-native-svg
components?
Hi,
When i realize that i couldn't just use the SVG local and do the build i tried to use the svgXmlData to make it work and it shows the image but all black and i try to change the color but i couldn't.
<SvgUri fill="#474A4D" width="24" height="24" svgXmlData={'<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg style="enable-background:new 0 0 47.001 47.001" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="512px" viewBox="0 0 47.001 47.001" width="512px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1_64_"><g fill="#474A4D"><path d="m22.4 22.4c0 0.591 0.479 1.07 1.07 1.07s1.07-0.479 1.07-1.07c0.001-1.25 0.445-2.46 1.25-3.42 1.79-2.13 3.14-4.43 3.99-6.85 0.115-0.327 0.065-0.689-0.135-0.972-0.201-0.283-0.525-0.451-0.872-0.451h-10.6c-0.347 0-0.672 0.168-0.873 0.451-0.2 0.283-0.25 0.645-0.135 0.972 0.853 2.42 2.2 4.72 3.99 6.85 0.8 1 1.2 2.2 1.2 3.4z"/><path d="m24.6 26.7c0-0.59-0.479-1.07-1.07-1.07s-1.07 0.479-1.07 1.07c-0.001 1.54-0.922 3.07-2.59 4.3-3.57 2.64-6.25 5.51-7.95 8.52-0.187 0.332-0.184 0.736 0.009 1.06 0.19 0.329 0.542 0.53 0.922 0.53h21.4c0.379 0 0.73-0.201 0.922-0.53 0.191-0.326 0.194-0.73 0.008-1.06-1.7-3.01-4.38-5.88-7.95-8.52-1.5-1.2-2.4-2.7-2.4-4.3z"/><path d="m42.2 42.7h-0.639c-0.734-8.31-5.6-14.7-9.39-19.2 3.78-4.53 8.65-10.9 9.39-19.2h0.639c1.18 0 2.14-0.957 2.14-2.14 0-1.2-0.9-2.16-2.1-2.16h-37.4c-1.18 0-2.14 0.957-2.14 2.14s0.956 2.14 2.14 2.14h0.639c0.735 8.31 5.6 14.7 9.39 19.2-3.78 4.53-8.65 10.9-9.39 19.2h-0.6c-1.18 0-2.14 0.955-2.14 2.14s0.956 2.14 2.14 2.14h37.4c1.18 0 2.14-0.957 2.14-2.14 0-1.1-0.9-2.1-2.1-2.1zm-32.5 0c0.803-7.51 5.69-13.3 9.34-17.6l0.195-0.231c0.672-0.795 0.672-1.96 0-2.76l-0.194-0.23c-3.65-4.32-8.53-10.1-9.34-17.6h27.5c-0.803 7.51-5.69 13.3-9.34 17.6l-0.193 0.23c-0.672 0.795-0.672 1.96 0 2.76l0.195 0.231c3.65 4.32 8.53 10.1 9.33 17.6h-27.6z"/></g></g></svg>'}/>
Hello !
I would like to update the fill the fill of a svg. How can I manage to do that with some kind of direct manipulation ?
Thank you !
Hello! I'm super excited about this! I've been waiting for this type of library for a while. Thanks!
I was wondering if you could put a working .svg on the readme so we can check that if we have a problem is or not coming from our svg.
Thanks.
Some SVG's are no getting correctly rendered in iOS. It is working as expected in iOS.
For the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M8 0C3.582 0 0 3.582 0 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm2.5 9h-3c-.276 0-.5-.224-.5-.5v-5c0-.276.224-.5.5-.5s.5.224.5.5V8h2.5c.276 0 .5.224.5.5s-.224.5-.5.5z"/></svg>
In Android:
In iOS:
Any thoughts how to fix this?
Is it possible for the element to fill its parent container without specifying a width and height? I'm thinking of StyleSheet
flex
.
Add a key={i} to each item returned by the createSVGElement
function
Hai, i am trying to import react-native-svg-uri, after install i wrote some code like this
<SvgUri source = {require('./images/innerBg.svg')} style={{position:'absolute',left:0,width: windowSize.width,height: windowSize.height}}/>
but it throws an error like this
in terminal it show like this
Please give me suggestions that how to solve this error
I add fill to SVGUri component but is not filling the svg. What I did to make it is added on index.js (on package) on the obtainComponentAtts and do this:
....
if(this.props.fill){
componentAtts.fill = this.props.fill;
}
return componentAtts;
Why isn't implemented like this? But rather expecting to change the svg element attribute. What if the element doesn't have the fill property? This will make sense in the case the fill should be selective but its not possible with this component.
I see it does have any support the last couple of months. Let me know if I can drop in as a collaborator.
react-native-svg
has a mess of complicated version restrictions:
- react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
- react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
- react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
- react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0
- react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0
The primary changes seem to be related to compatibility with react-native, not the api used by this package. It would probably be best if this package used a loose peerDependency instead of depending on react-native-svg directly.
Breaks when you are using with older version of RN: See: software-mansion/react-native-svg#188
I have this up-arrow svg which I got from the material design site:
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" fill="#000000"/>
</svg>
You'll notice that it has two path
elements, one with a fill of solid black and one with a fill of "none". When I try to use this svg in the app, I do it like so:
<SvgUri
width={24}
height={24}
fill="#ff00ff"
source={require('./ic_arrow_upward.svg')}
/>
I'd expect this to produce an icon like this:
but instead it ends up looking like this:
This is because when applying the fill
attribute, the code sets it without first checking if it's set to "none".
Such amazing work to make this! Do you know if it will support an animated SVG?
I'm getting this error while trying to use this in RN 0.40.
Error while updating property 'd' in shadow node of type: RNSVGPath
Relevant code:
import SvgIcon from 'react-native-svg-uri';
<SvgIcon width={24} height={24} svgXmlData={'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z"/>\n</svg>'} style={{opacity: 0.54}} />
This seems like an entirely different issue than #20 so I made a separate open issue.
I use your library to display svg image on ios normaly but on android its required "Draw over other apps" permission. can you explain this ?
Is it possible to change/override/add properties to the SVG using the style (or other) property? Something like <SvgUri style={{ fill="#123456"...
?
For instance, I have an SVG
with a path
and I want to change fill
colour to my own colour in the JSX
.
Hey guys,
It doesn't render https://gist.github.com/olkeene/9719da22ef6ee8dbebb8d221a4dec5bd
No errors or warnings.
Thanks for the help ๐
Hey tried to extend the module a bit for me and tried to add react-native-svg onPress
compatibility, so that i can listen for touch on area. I add the listener/onPress property once, but I always run into memory errors:
componentAtts = this.obtainComponentAtts(node, PATH_ATTS);
if(xxxxxxxx){
componentAtts.onPress = () => alert('Press on Circle');
return <Path key={i} {...componentAtts}>{childs}</Path>;
}
FATAL EXCEPTION: main
AndroidRuntime: Process: com.rhinoapp, PID: 16303
AndroidRuntime: java.lang.OutOfMemoryError: Failed to allocate a 105678412 byte allocation with 16777216 free bytes and 65MB until OOM
AndroidRuntime: at dalvik.system.VMRuntime.newNonMovableArray(Native Method)
Any idea? thanks! :)
Loading images is slow and crash,What is the solution?
how can I pass the SVG as String directly?
Is there a way to set common SVG properties?
This is my React Native Component, which correctly loads the SVG. However, no matter what I do, I cannot change the stroke color. Even if I set the SVG stroke color within the SVG file it will still be black when imported as a react component.
import React from 'react'
import { View } from 'react-native'
import SvgUri from 'react-native-svg-uri'
import Account from './svg/account.svg'
const Icon = () => (
<View>
<SvgUri
width='32'
height='32'
stroke='#FF0000'
svgXmlData={Account}
/>
</View>
);
export default Icon
This is the contents of the SVG file
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" enable-background="new 0 0 48 48" x="0px" y="0px" width="48px" height="48px" xml:space="preserve">
<path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M23.7 28.7c3.4 0 5.6-4.6 5.9-5.7 0-0.1 0.5-0.3 0.6-0.4 1.8-3.3-0.2-3.7-0.2-3.7s0.1-1.7-0.3-3.4c0 0-0.3-4-6-4 -5.7 0-6 4-6 4 -0.4 1.6-0.3 3.4-0.3 3.4s-2 0.4-0.2 3.7c0 0.1 0.5 0.3 0.6 0.4C18.1 24.1 20.3 28.7 23.7 28.7z" />
<path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M10.2 38.2c0-5 3.2-7.3 6.7-8.4 2.4-0.8 3.7-2.1 3.7-2.1" />
<path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M26.8 27.7c0 0 1.3 1.3 3.7 2.1 3.5 1.1 6.4 3.2 6.7 8.7" />
<circle stroke="#000000" stroke-width="2" fill="none" stroke-linejoin="round" cx="24" cy="24" r="20" />
</svg>
Hi @matc4 the library looks great!
Do you have any plans to support static file sources like:
<SvgUri width={150} height={150} source={require('@images/file.svg')} />
Thanks!
I placed the svg on the same directory than the component .js
, and then:
<SvgUri source={require('./logo_white.svg')} />
This seems to work ok in debug mode, but when I build the release apk for android it crashes with:
java.lang.IllegalArgumentException: unexpected url: components_logo_logo_white
at okhttp3.Request$Builder.url(Request.java:141)
at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:168)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:154)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
at java.lang.Thread.run(Thread.java:761)
Force finishing activity com.app.staging/com.app.MainActivity
Any ideas? Am I doing anything wrong?
Thanks!
SvgView:126
TouchEvent.obtain(
mTargetTag,
type,
ev,
System.nanoTime(),
ev.getX(),
ev.getY(),
mTouchEventCoalescingKeyHelper));
Hi,
I am trying to reproduce the sample code in the readme but i am getting the following error.
Here is the code of my index.ios
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import SvgUri from 'react-native-svg-uri';
export default class moneyPocket extends Component {
render() {
return (
<View style={styles.container}>
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('moneyPocket', () => moneyPocket);
I am using the following version of each package:
thanks
Hey, as requested in the README, since I found an svg that this library can't load i'm posting it here:
https://commons.wikimedia.org/wiki/File:Human_body_silhouette.svg
I tried both as uri (via https://upload.wikimedia.org/wikipedia/commons/f/f4/Human_body_silhouette.svg ) and as static file and it doesn't work either way.
But the Homer uri works, so I guess is this particular image that isn't... any idea on how to make it work?
PS: thanks for your work :)
When attempting to generate a signed apk and running with react-native-svg-uri
the following exception occurs when starting up the app for the first time:
03-12 18:00:01.133 7044 7064 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
03-12 18:00:01.133 7044 7064 E AndroidRuntime: Process: com.appprototype, PID: 7044
03-12 18:00:01.133 7044 7064 E AndroidRuntime: java.lang.IllegalArgumentException: unexpected url: src_images_containers_images_spinner
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at okhttp3.Request$Builder.url(Request.java:141)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:172)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at java.lang.reflect.Method.invoke(Native Method)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:345)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:136)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:739)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:95)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at android.os.Looper.loop(Looper.java:148)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
03-12 18:00:01.133 7044 7064 E AndroidRuntime: at java.lang.Thread.run(Thread.java:818)
Versions:
"react": "~15.4.1",
"react-native": "0.42.0",
"react-native-svg-uri": "~1.2.0",
I assume that this is not an issue with teh react-native-svg-uri
library itself, but the asset generation side of things. However I thought this might be a good issue to be aware of / document a workaround for it required.
I have tried to show static svg file.
but nothing have been showed.
here is a my code.
<SvgUri width="30" height="30" source={ require('../../images/setting.svg')} />
please help me.
Expo already includes/supports react-native-svg. Is there anyway this package could be updated to support Expo?
TripAdvisor require their ratings logo to be fetched from a remote svg file. This library would be perfect for rendering it in react-native, but the circles get offset to the left:
Original svg: http://www.tripadvisor.com/img/cdsi/img2/ratings/traveler/4.5-11068-5.svg
I am doing simple weather app and I am using ListView to list forecast of the day. I am using local svg from my images folder to show right icon for specific weather. When I change contents of a list it will flash weirdly because svgs are not loaded yet. Here is example with gif http://giphy.com/gifs/3o7TKvo0bqXxy60Tdu As you can see from the gif it does not always make weird flash but like 50% of the time it does :/
Are svgs cached correctly or do you have something else in mind that could help with performance?
Do you think this is linked to this issue? software-mansion/react-native-svg#52
This SVG seems to show up deformed in the app, despite being perfect on SVG testing websites like this and in Chrome. I'm using RN v0.40.0
.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="32" height="32">
<path fill="red" d="M50 9C27.392 9 9 27.392 9 50s18.392 41 41 41 41-18.392 41-41S72.608 9 50 9zm0 6c19.366 0 35 15.634 35 35S69.366 85 50 85 15 69.366 15 50s15.634-35 35-35zM29 43c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm21 0c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm21 0c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z"/>
</svg>
Hello, thanks for a great library!
I've been having some trouble with svg file placement.
First I tried to store it in the same folder as images, then Android build complains that the files must be .png or .xml.
So I tried to store it in res/raw folder, but I can't access the files in the raw folder from React Native.
Where should I be storing the svg files?
Maybe you forgot do something with next props
componentWillReceiveProps (nextProps){
if (nextProps.source) {
const source = resolveAssetSource(nextProps.source) || {};
const oldSource = resolveAssetSource(this.props.source) || {};
if(source.uri !== oldSource.uri){
this.fecthSVGData(source.uri);
}
}
}
Hi, thanks for putting together this module!
From looking at the source code, it seems like Text elements are not rendered at all. Is there a specific reason for that / any chance you include them?
I was reading the source code and see that the svg element is returned as an meaning that it can not run inside a element from react-native-svg, Would it be possible to make it compatible with elements and render the svg uri inside them? Add first I thought just removing the View element would solve the problem but you can not render nested Svg elements sadly
Are you going to support react-native-svg 5.2.0 version?
please update dependencies to "react-native-svg": "^5.1.5", https://github.com/necinc/msvgc
tl;dr: I think the .babelrc needs to be excluded from the npm module.
I've read the current 'best practice' is to ship invalid node modules when they are for RN, but because of how babelrc lookup works, the presence of a .babelrc
in this package creates a conflict with React Native's packager's babel config and causes weird runtime errors like facebook/react-native#4844 (this comment is enlightening in particular).
Edit: This commenter makes a good argument for why removing .babelrc isn't necessarily the 'right' fix for this problem, but the proposed solution
...a postinstall script in your top-level app that removes all .babelrc files from your node_modules.
...seems pretty user-hostile and definitely is not what a consumer of an npm package expects.
I'm testing on one of the lower spec iOS device we want to support (iPhone 4S, iPad 2), and find the drawing performance very slow.
Its very noticeable, especially with a number of SVG images on the page. The thing is they are all the same (its for a star rating component). I wonder if the SVG can be cached as an image and reused?
I don't see any issues or documentation about base64 encoding support for SVG data. I tried it and it didn't work, but I'm wondering if you have any advice or quick solutions. For now I'll try to decode it manually before passing the string as svgXmlData
.
Adding SVG files to my project directly requires them to be duplicated in Android and iOS resources folders, and prevents them from being easily updated using tools like CodePush.
MyComponent.js
:
import base64 from 'base-64';
import SvgUri from 'react-native-svg-uri';
import iconBase64 from './icon.svg.js';
const iconData = base64.decode(iconBase64);
...
render() {
return (
<SvgUri
width="80"
height="80"
svgXmlData={iconData}
/>
);
}
icon.svg.js
:
export default 'Zm9vIMKpIGJhciDwnYyGIGJheg==';
(Of course you could just put the decoded XML in that file directly, but that doesn't meet my requirements)
Hi , Thanks for this library i am using it for some time now , and as my application progresses there are some complicated svg that i need to render now and i notice that some of the elements are not correctly rendered.My designer gives them exported from Adobe illustrator , sometimes xmldom parser errors throws out about 'invalid svg' then i have to add some attributes manually like height/width , can you please suggests me a way how to correctly export from Illustrator. will be a big help.
Moreover some of the svgs are missing some elements.
This is the image screenshot taken from browser :
I can also paste the svg code here if you want to have a look at it ,
Looking forward to hear from you soon!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.