Conditional svgXmlData doesn't work properly

[danibonilha]

On version 0.2.0

When using conditional data, svgXmlData only updates on second render, example:

import SvgRenderer from 'react-native-svg-renderer';

const TestSvgRenderer = ({ condition = true }) => (
  <View style={styles.container}>
    <SvgRenderer
      width="200"
      height="200"
      svgXmlData={condition ?  'svgTrue' : ' svgFalse'}
    />
  </View>
);

If condition changes to false at the first time it will still render svgTrue

[acb]

I had a similar issue to this and the root cause was that I was rendering these inside a loop and the key that I was putting on the parent element wasn't unique. Essentially I had several components that each had

let icons = this.props.list.map((item, i) => {
  return <View key={i}><SvgRenderer svgXmlData={item.icon} /></View>
});

and if I swapped the component's position then they would render each other's SVG instead of the one they were supposed to have.

Updating the key to be key={item.id + i} fixed the issue. If you're in a similar situation you may want to double check that your keys are globally unique otherwise the SvgRenderer can collide with the wrong state, causing its updates to lag.