question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 5 years ago
  • Comments:13

github_iconTop GitHub Comments

1reaction
BabakSamimicommented, Mar 20, 2019

@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.

0reactions
oleksandr-dziubancommented, Mar 21, 2019

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found