Re-render charts when data changed

[halallahh]

I tried pass data with state and how can I re-render chart if data has changed.

    return (
      <View style={styles.container}>
        <View style={styles.chartContainer}>
          <Pie 
            data={[ 
              { name: 'Value 1', value: this.state.val1 }, 
              { name: 'Value 2', value: this.state.val2 } 
            ]}
            accessorKey='value'
            options={options}
          />
        </View>
        <View style={styles.sliderContainer}>
          <Text>Option 1 {this.state.val1}</Text>
          <TextInput 
            style={styles.slider}
            onChangeText={(value) => this.setState({ val1: value })}
          />

          <Text>Option 2 {this.state.val2}</Text>
          <TextInput 
            style={styles.slider}
            onChangeText={(value) => this.setState({ val2: value })}
          />
        </View>
      </View>
    );

[ujwal-setlur]

If you do a this.setState(newState), react will force a re-render and data will be updated.

wherever you get new data:

this.setState ({
  val1: newValue1,
  val2: newValue2
});

[halallahh]

yes, but only label position changed not pie chart svg.

[marzolfb]

Type mismatch problem. The reason it doesn't appear to be re-rendering properly, is because the type for value as in { val1: value } is a String (because you are using an event handler on the TextInput component) but the data input for the pie chart assumes you are providing values that are of type Number.

Everything should work correctly if you change this:

onChangeText={(value) => this.setState({ val1: value })}

to this:

onChangeText={(value) => this.setState({ val1: parseInt(value) || 0 })}

and do the same for val2.

Side note - I (sheepishly) admit that this took me forever to understand where the problem was. I'm using this experience as motivation to try out a static type-checking tool like Facebook's Flow on at least parts of this library - maybe this will find its way into a future PR (others are welcome to volunteer to add support for this as well!). Hopefully this will save future pain on similar issues.

[halallahh]

Hi, I tried dynamic pie chart example with android device and genymotion. both only move label position.

[marzolfb]

Interesting. I tried on an Android device using the standard Android Emulator (using a Samsung Galaxy A3, API level 23 AVD) and it redrew the pie correctly. The fact that it redraws the labels at the correct positions but not the pie arcs suggests to me that it is a problem specific to the specific emulator you are using and/or maybe a difference in the react-native-svg using you are using. If you do a npm list react-native-svg what do you see? I'm using 4.4.1 in the example app.

[halallahh]

react-native-svg@4.6.1, I tried with Google nexus 5 6.0 API23 for emulator and Asus Zenfone 4 5.0 for real device.

[marzolfb]

I'm getting the same thing with newer versions of react-native-svg (4.6.1) and react-native (0.40.0). I will need to dig more to see if there is anything I can do in this library to get the expected behavior with the seeming change in behavior in newer versions of react-native-svg and/or react-native (or if we need to identify and log issues in one of those projects and wait or contribute a fix before going to newer versions in this library).

Until we get all that sorted out, you will get the expected behavior if you revert to using the 4.4.1 version of react-native-svg. You can do that by doing

npm install react-native-svg@4.4.1

from the example directory.

After doing that and trying to do react-native run-android, you may see this error:

:app:dexDebug
Unknown source file : UNEXPECTED TOP-LEVEL EXCEPTION:
Unknown source file : com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim;
Unknown source file : 	at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
...

If so, do this:

(cd android && ./gradlew clean)
react-native run-android

[marzolfb]

#58 pinned the react-native-svg version at 4.4.1 and react-native at 0.38.0 (for now). I wasn't able to reproduce the dynamic pie chart problem above using these older versions of dependencies. So, if you go back to these older versions, the issue will be resolved. Hopefully there will be more stability in future versions of react-native-svg that will resolve the problems discussed above.