Labels not re-rendering correctly when data changes.

What is the problem?

Labels and XAxis not re-rendering properly when the data changes. The old values are still visible, overlapping the new ones.

Before data changes: (ok)

After:

When does it happen?

When the data changes and the chart re-renders.

Code to reproduce

renderPeriodoBar() {

        if (this.props.dashboard.caseVolume) {

            console.log('DASH',this.props.dashboard.caseVolume);

            const values = [10,20,30,40];
            const labels = ["A","B","C","D"];

            const axesSvg = { fontSize: 10, fill: this.colors.secondary_text, textAlign: 'center' };
            const verticalContentInset = { top: 10, bottom: 10 }
            const xAxisHeight = 25;

            var max = Math.max(...values);

            const Labels = ({ x, y, bandwidth, data }) => (
                data.map((value, index) => (
                    <T
                        belowChart={true}
                        key={index}
                        y={y(value) - 10}
                        x={x(index) + (bandwidth / 2)}
                        fontSize={10}
                        font={{
                            fontFamily: 'Roboto-Light',
                        }}
                        fontData={{ name: 'Roboto-Light' }}
                        fill={this.colors.secondary_text}
                        alignmentBaseline={'middle'}
                        textAnchor={'middle'}>
                        {value}
                    </T>
                ))
            )

            return (
                <View style={{ height: 180, paddingTop: 12, flexDirection: 'row' }}>
                    <View style={{ flex: 1, marginLeft: 0 }}>
                        <BarChart
                            data={values}
                            style={{ flex: 1 }}
                            gridMin={0}
                            gridMax={max * 1.5}
                            contentInset={{ verticalContentInset }}
                            svg={{
                                fill: this.colors.accent,
                                opacity: 0.80,
                            }}>
                            <Labels belowChart={true} />
                        </BarChart>
                        <XAxis
                            style={{ marginTop: 6, height: xAxisHeight }}
                            data={values}
                            scale={scale.scaleBand}
                            formatLabel={(value, index) => labels[index]}
                            svg={axesSvg}
                        />
                    </View>
                </View>)
        }
}

render(){
    return(
         <View>
         {this.renderPeriodoBar()}
        </View>
     )
}

Just call the above function on the render method, then change the data inside the function and re-render

What platform?

• [X ] iOS 11

React Native version: 0.54.3

[AndrePech]

it is updated o/

Let me know if you need something more! Thank you very much for maintaining this awesome repo!!

[animaonline]

This should be reopened as this still happens, and can easily be reproduced