I have a TouchableOpacity nested inside SVG element create by using react-native-svg library. It looks something like this:
<Svg
width="100%"
height="100%"
top="0%"
left="0%"
viewBox="0 0 828 828"
>
(...)
<TouchableOpacity onPress={this.handleClick}>
<Text>Button!</Text>
</TouchableOpacity>
(...)
</Svg>
Where handleClick is not triggered. I have different implementation for the same feature for Android where TouchableOpacity is outside Svg element and onPress is correctly triggered. Has anyone encountered this issue and found a solution? Placing this outside for iOS is not an option, unfortunately.
Used react-native-svg version is 7.0.3
Thanks!
Related
I am building an application making use of #fluentui/react (version 8.34.7) and I am using create-react-app.
One of the things I would like to do is register custom icons which are in SVG format. Following the example here, I came up with the following code:
registerIcons({
icons: {
'hamburger-icon': (
<svg viewBox="0 0 16 16" role="presentation" focusable="false" aria-hidden="true">
<g>
<path d="M1 4.5v-1h14v1zm0 4v-1h14v1zm0 4v-1h14v1z"></path>
</g>
</svg>
)
}
});
and this works perfectly fine. I can reference hamburger-icon in my code and get the icon to display.
However, the issue with the code above is that I have to include svg file contents in my code. What I would like to do is read the SVG file contents and then use it in registerIcons method. I am not sure how I can do that.
If I do something like:
import Hamburger from 'assets/images/hamburger.svg';
I get a URL.
If I do something like:
import {ReactComponent as HamburgerIcon} from 'assets/images/hamburger.svg';
I get a React component whereas registerIcon method expects a React element.
Is it possible to simply specify a file path of an SVG file and register icon from that?
Well, it was ridiculously simple! All I had to do was this:
import {ReactComponent as HamburgerIcon} from 'assets/images/hamburger.svg';
registerIcons({
icons: {
'hamburger-icon': React.createElement(HamburgerIcon)
}
});
and all worked well.
I am trying fill a simple circle SVG with an image in React. The sources I found have not been helpful, for they don't seem to apply to JSX.
Here is the code I currently have:
import React, {Component} from 'react';
import Anime from '../images/Anime.jpeg';
class Circle extends Component {
render() {
return (
<div>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="black" stroke-width="3" fill={Anime} />
</svg>
</div>
);
}
}
export default Circle;
My first instinct was to tweak the fill attribute by either replacing the original color ="red" with ={Anime} or =url("../images/Anime.jpeg"), but neither worked.
(I know the path to the Anime image is correct, after testing it by rendering <img src={Anime} alt={Anime}></img> inside the div.
I see people using <defs> and <pattern> tags, as such (referring to this post):
<svg id="graph" width="100%" height="400px">
<!-- pattern -->
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
</pattern>
</defs>
<circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>
But these tags don't seem to work in React / JSX; I keep getting this error when I try to use them: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.
Is there a way around this? I want to be able to fit the following picture into a simple circle svg with a thick black border around it.
I figured out a way and wanted to post / share it, in case anyone is here, looking at this post and wondering what the (one of the) solution(s) is!
Here is my final code:
import React, {Component} from 'react';
import AnimeCropped from '../images/AnimeCropped.png';
class Circle extends Component {
render() {
return (
<div>
<svg height="670" width="670">
<circle cx="350" cy="350" r="300" stroke="black" stroke-width="5" fill="none" />
<image className='img-circle' xlinkHref={AnimeCropped} x='75.5' y="15" height="670" width="670"/>
</svg>
</div>
);
}
}
export default Circle;
Essentially what I did was:
Crop the photo to be a circle. I could have followed cubrr's recommendation above and clip-path'ed it (which is a great idea!), but instead - I just found and used a photo cropping tool online. I then named the newly-cropped picture "AnimeCropped" and saved it in the same directory.
Imported the picture into the component file and rendered via a <image> tag after the <circle> tag. It wasn't mentioned in my original question above, but I also hypothesized that inserting the image inside the circle might solve the problem. As such:
<svg height="670" width="670">
<circle cx="350" cy="350" r="300" stroke="black" stroke-width="5" fill="none">
<img src={AnimeCropped} alt={AnimeCropped}/>
</circle>
</svg>
But this didn't work.
In my final code, you'll see that the <image> tag comes after the <circle> tag, so technically, it's not really inside the circle, but just overlaying on top of it. Also note that I had to use <image>, not <img>. I'll have to do a bit of research on this, but <img> was giving me an error message.
Also important: In React, xlink:href won't work, but xlinkHref will! This really tripped me off, but I found this helpful post.
Using classNames, I edited the size of the cropped picture in my App.css file.
Configured the x- and y- coordinates so that it somewhat fits perfectly in the middle of the circle.
That's it! Just wanted to post this for closure / help me review what I learned.
I have beed searching for a while to find a react native modal, popup, or even an alert that can actually render a custom component, rather than simple text.
What i actually want to do is throw a modal with a 5-star rating component, but neither of the packages i have added support that.
Thanks in advance
this is my solution which you can put anything inside View:
import Modal from "react-native-modal";
<Modal isVisible={this.state.alertState} onBackButtonPress={()=>this.setState({alertState:false})} >
<View style={styles.modal}>
<Text style={styles.modalText}>modal Text!</Text>
<TouchableOpacity onPress={()=>this.setState({alertState:false})} style={styles.modalButton}>
<Text style={styles.modalButtonText}>Ok!</Text>
</TouchableOpacity>
</View>
</Modal>
and here is style:
modal:{
backgroundColor:'white',height:.2*DEVICE_HEIGHT,alignItems:'center',width:.9*DEVICE_WIDTH,justifyContent:'center',borderRadius:10},
modalText:{
fontFamily:'IRANYekanMobileFN',padding:10},
modalButton:{
backgroundColor:'#306BF4',width:.25*DEVICE_WIDTH,height:.05*DEVICE_HEIGHT,alignItems:'center',justifyContent:'center',marginTop:20,borderRadius:10},
modalButtonText:{
fontFamily:'IRANYekanMobileFN',color:'white'}
Please try to help me!
I need to render svg image from my folder "project/assest/images/test.svg" on android and ios view.
I have tried :
Solution 1 : <Image source={imagePath}></Image>
Solution 2 :
import SvgUri from 'react-native-svg-uri';
<View>
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>
</View>
Solution 3 : First i should, convert svg file to png,jpeg then render simple image, but that very weired way on view
Please help, what did i wrong in this.
You can also try react-native-svg package for SVG
For Example --
import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="100%"
height="100%"
uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
/>
);
You can try with this
<SvgUri width="200" height="200" source={require('./project/assest/images/test.svg')} />
May this will help you
here are two ways to use SVG in react-native.
one way is to translate the SVG to JSX use this site.
the other way is to use a font instead of SVG directly:
firstly, use SVG files to generate font. I use this site. it is fontello.
then I use react-native-vector-icons to generate icon.
for more details, you can see its API
I have a svg and I am adding different svg elements to it:
<svg> .... <rect or circle and so on </svg>
What I did was I loaded an icon with an svg library to one on my circles. Everything was fine until I changed my browser size and I noticed the svg icons are moving outside of my circle.
<svg> <circle> <g> <svg ....the icon> </g> </svg>
Looks like because I have 2 svgs nested, the icon is moving, and the offset for it is maybe the browser!
How can I fix that? I need to load my images like this:
Image1 = require('svg-react-loader?name=Image1!./svgFiles/default.svg');
React.createElement(Image1, {});