Open adamski opened 7 years ago
I've done something similar in my project. I've patched react-native-svg-uri, but you can add the logic inside your own application instead.
You can easily share component instance something like:
const myStarSvg = <SvgUri .... key="myStarSvg" />
render(){
items.map(item => {
<myStarSvg key="myStartSvg" />
}
}
the issue here is probably that react-native-svg-uri is doing too much work in render() and some cache should be added in componentWillReceiveProps. (I'm talking about the const doc = new xmldom.DOMParser().parseFromString(inputSVG);
)
also btw, another common way to solve this in React is to wrap whatever is slow inside a StaticContainer
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?