SVG tree is not re-rendering on iOS platform
See original GitHub issue@msand Hi, just noticed in all latest versions that SVG tree is only rendering once. If we have dynamic behaviour (with Redux or even with local state) SVG tree will not be re-rendered on iOS. Android works fine as expected.
On version 9.2.4 everything is OK, on latest 9.3.5 issue is present on iOS.
I have: react-native: 0.57.7 react-native-svg: 9.3.5 MacOS: 10.14.3 Xcode: 10.1
To reproduce it use:
import React, { Component } from 'react';
import Svg, { Image, G, Text } from 'react-native-svg';
class App extends Component {
state = {
uri: undefined,
testText: 'no text',
};
componentDidMount() {
setTimeout(() => {
this.setState(() => ({
uri: 'https://i.kinja-img.com/gawker-media/image/upload/s--PnSCSSFQ--/c_scale,f_auto,fl_progressive,pg_1,q_80,w_800/z7jcryloxjedsztssw39.jpg',
testText: 'DONE!'
}))
}, 3000);
}
render() {
return (
<Svg width='400' height='400'>
<G>
<Text x='20' y='60'>TEST TEXT</Text>
</G>
<G>
<Text x='20' y='80'>{this.state.testText}</Text>
</G>
<G>
<Image x='0' y='100' width='400' height='400' href={{ uri: this.state.uri || '' }} />
</G>
</Svg>
)
}
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:13
Top Results From Across the Web
SVG tree is not re-rendering on iOS platform #976 - GitHub
msand Hi, just noticed in all latest versions that SVG tree is only rendering once. If we have dynamic behaviour (with Redux or...
Read more >How to render all kinds of SVG files on iPhone? - Stack Overflow
Have you added the UIKit framework to the project? Go to the project settings, build phases, link with frameworks and add it. Make...
Read more >Here's How I Solved a Weird Bug Using Tried and True ...
At first, this looks like a CSS issue. Some styles might be applied on a hover event that breaks the layout or the...
Read more >Re-rendering Components in ReactJS - GeeksforGeeks
A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically. However, ......
Read more >270000 - Reloading a page should not cause blink Node leak
Issue 270000: Reloading a page should not cause blink Node leak ... This CL changes the weak-ref to WeakPtr and ensure the svg...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@oleksandr-dziuban I also have a somewhat complex SVG tree but downgrading to 9.2.4 works wonders for me, thank you. Hopefully this will be hotfixed soon.
@msand Yes, sorry, it works fine now, I just clear all the npm/react-native-* cache and it works now. Just issue with text remaining. I have added steps to reproduce here: https://github.com/react-native-community/react-native-svg/issues/570#issuecomment-474649116
Please close this issue.