Comments (12)
Same issue with RN 0.24 version unable to show SVG .
from react-native-svg.
I upgraded to RN 0.26.3 and it works now. With RN 0.22 it was really weird. On reload it did draw nothing but with hot reloading enabled from time to time, after changing a setting, it would draw something which kind of resembled what I asked it to draw (e.g. a rectangle) but also not quite.
from react-native-svg.
Can you provide some example code?I need some code to figure out what happened here
from react-native-svg.
`/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Svg,{
Line
} from 'react-native-svg';
var numbers = [0,1,2,3,4,5,6,7,8,9];
var graphValues = [1,1,-1,-1,-1,-1,-1,-1,1,1,1,1,1,1];
var currentValue = 0;
var lastKey = -1;
var _this;
module.exports = React.createClass({
render: function() {
_this = this;
return (
<View style={styles.container}>
<Svg
height="100"
width="100"
>
{this.dynamicGraph()}
</Svg>
</View>
);
},
dynamicGraph: function(){
return numbers.map(function(item, key){
return(
<Line
x1={_this.oddOrEven(item,1,1,0)}
y1={_this.oddOrEven(item,1,0,1)}
x2={_this.oddOrEven(item,0,1,0)}
y2={_this.oddOrEven(item,0,0,1)}
stroke={_this.redOrGreen(item)}
strokeWidth="2"
key={key}
/>
)
});
},
oddOrEven: function(value,isFirstPoint,isXCoordinate,isYCoordinate){
if(value % 2 == 0){
if(isYCoordinate && isFirstPoint){
return 0;
}
else if(isYCoordinate && !isFirstPoint){
return 10;
}
else if(isXCoordinate) {
if(!isFirstPoint){
return (10 * (value + 1));
}
else {
return (10 * value);
}
}
}
else {
if(isYCoordinate && isFirstPoint){
return 10;
}
else if(isYCoordinate && !isFirstPoint){
return 0;
}
else if(isXCoordinate){
if(!isFirstPoint){
return (10 * (value + 1));
}
else {
return (10 * value);
}
}
}
console.log('dummy');
},
redOrGreen: function(value){
if(value % 2 == 0)
return "red";
else
return "green";
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
});
`
```@magicismight This what I did till now to show lines on android using react-native-svg but when I run the same code on IOS it works fine.
from react-native-svg.
+1 same issue with RN 0.26.2
console output
from react-native-svg.
It seems an issue with rnpm link
... I manually added new RNSvgPackage()
to getPackages
array in MainActitvity.java
and now all works fine...
rnpm link react-native-svg
rnpm-link info Android module react-native-svg is already linked
rnpm-link info iOS module react-native-svg is already linked
rnpm-link info Linking assets to ios project
rnpm-link info Linking assets to android project
rnpm-link info Assets has been successfully linked to your project
from react-native-svg.
I'm having the same issue (= nothing drawn). I'm on RN 0.22. Any idea where to look to see whats going wrong?
Edit: So it seems that RN 0.25.1 is required.
from react-native-svg.
@jak4 To Import and Install all the dependencies of react-native-svg ( rnpm link react-native-svg ) command is not sufficient because if we create a fresh copy of react native project for android then only this rnpm link command is working fine for me , but when I am trying to run this same command in my existing project it is just importing svg package and including it.
i.e in MainActivity.java file
import com.horcrux.svg.RNSvgPackage;
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNSvgPackage()
);
}
So when we try to import and run this svg package it shows blank screen with console warning as mentioned above by @xxsnakerxx .
So to fix this issue for android, there are some few steps you need to follow.
1> check your package.json for (i.e "react-native-svg": "^2.1.0" ) if not exist then add this dependency.
2> check for settings.gradle in projectname\android\settings.gradle location whether the below code exist or not, If it does not exist then add this peace of code.
rootProject.name = 'projectname'
include ':app'
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
3> Also check for build.gradle in projectname\android\app\build.gradle location whether the below code exist or not, If it does not exist then add this peace of code in dependency section.
compile project(':react-native-svg')
4> check your MainActivity.java file whether the below sample code exist or not
i.e in MainActivity.java file
import com.horcrux.svg.RNSvgPackage; //import this package
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNSvgPackage() //include this package
);
}
5> clear npm cache by executing ( npm cache clear) command.
6> start react native server and run your android project.
from react-native-svg.
@rickyn73 thanks for the huge reply. I'm currently doing an iOS app and haven't touched the Android-path in quite a few weeks, so it is not compiling at the moment. I will try to fix that though.
Would you know if similar error messages also show for an iOS app? Because I don't see any. I also don't see any SVG output ;).
Thank you.
from react-native-svg.
It has a peer dependency as
"peerDependencies": {
"react-native": ">=0.25.1"
},
This peer dependency was added in 2.0.0
from react-native-svg.
I'm experiencing the same problem as @jak4. It's only happening on an element that has a Path
element. Doesn't happen for Polygon
or Line
.
To reproduce:
- Include the following snippet in a component:
<Svg height={100} width={100} viewBox="0 0 40 40">
<G>
<Path
d="M26.73,30.87H15a8.91,8.91,0,1,1,7.78-13.25,7.23,7.23,0,1,1,4,13.25ZM15,14a7.91,7.91,0,1,0,0,15.82H26.73a6.23,6.23,0,1,0-3.86-11.11l-.49.39-.27-.57A7.94,7.94,0,0,0,15,14Z"
fill="black"
/>
</G>
</Svg>
- Fire up the iOS simulator, enable hot reloading and navigate to that screen.
- The svg component doesn't show on the screen.
- Change the fill from
black
toblue
and save. - The cloud drawing appears on the screen after hot reloading.
Notes:
- React Native version:
0.42.3
- Don't use a stateless component because hot reloading won't work. Use a class component.
from react-native-svg.
More weirdness.
I noticed that this was a timing problem (svg renders only after hot reload) so I tried delaying the rendering by hand. It worked.
What I did was:
- Add this constructor to the component holding the svg element:
constructor(props) {
super(props);
this.state = {
showingCloud: false
};
setTimeout(() => this.setState({ showingCloud: true }), 1000);
}
- Use conditional rendering so that the svg component only renders when the flag is set.
Does that help troubleshoot the issue at all?
from react-native-svg.
Related Issues (20)
- The onPress method in the Path component works on android but not on ios.
- Svg Image pointerEvents="none" not working on Android
- Invalid `RNSVG.podspec` file: undefined method `visionos' for #<Pod::Specification name="RNSVG">. HOT 11
- Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager. HOT 2
- Fatal Exception: java.lang.Error Invalid number formating character 'N' HOT 2
- SvgUri can not load some of the svgs in both android and ios
- Animating the strokeDashArray prop of an animated Path crashes running on the Android Simulator
- <Text /> with PanResponder only works if you click exactly on the letters
- Failed parsing SvgCssUri for first time, after reopening app it appears
- Xlinkhref only work on web does not work on ios and android (the color did not get inherited ) HOT 2
- React native web + vitest issue - Cannot use import statement outside a module HOT 4
- fetchText method error : TypeError: Cannot read property 'prototype' of undefined when trying to call svg from uri
- HTML entities contained in an XML string are not decoded by the SvgXml component
- Path not rendering correctly
- How to center Text along a path?
- React Native SVG stroke-width bug on expo web.
- SVG image not import in React native
- ForeignObject works with panResponder? HOT 1
- Why is `err` exported?
- stroke-width default value must be 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-svg.