dont update on prop change

[Tobias3107]

Hey,

I Try to do an Canvas which show me an halfcircled progress bar ( this work well ). And i access the data for the Progress from the Props. It Worked for the First time.

How can i say that should update? I know componentDidUpdate but i dont know how to update then.

    handleCanvas = (canvas) => {
        size = {
            x: 160,
            y: 70,
            r: 60
        }
        canvas.width = size.x;
        canvas.height = size.y;
        const context = canvas.getContext('2d');
        // Background Line
        context.beginPath();
        context.strokeStyle = "#676767";
        context.lineWidth = this.lineWidth;
        context.arc((size.x /2), ((size.y-10)+this.lineWidth), size.r, 1*Math.PI, (2)*Math.PI);
        context.stroke();
        context.restore();

        // Progrss bar
        context.beginPath();
        //      CenterX, CenterY,Scale Start, End
        context.strokeStyle = "#00ffff";
        context.lineWidth = this.lineWidth;
        context.arc((size.x /2), ((size.y-10)+this.lineWidth), size.r,1*Math.PI,(1 + (this.props.usage/100) )*Math.PI);
        context.stroke();
        context.restore();

        // USAGE TEXT 
        context.font = "20px Arial";
        var txt = (this.props.usage) + "%";
        context.fillText(txt, (size.x /2)-20, ((size.y-10)+this.lineWidth));

    }

    render() {
        return (
            <View style={this.styles.card}>
 // Progressbar
// Usage is only for testing there
// 
                <Canvas ref={this.handleCanvas} usage={this.props.usage} />
                <View style={this.styles.line}>
                    <Text style={{ textAlign:"center", width: "50%" }} >Temp</Text>
                    <Text style={{ textAlign:"center", width: "50%" }}>{this.props.temp}°C</Text>
                </View>
                <View style={this.styles.line}>
                    <Text style={{ textAlign:"center", width: "50%" }} >Usage</Text>
                    <Text style={{ textAlign:"center", width: "50%" }}>{this.props.usage}%</Text>
                </View>

                <Text style={{ textAlign:"center" }}>CPU-{this.props.cpuid}</Text>
            </View>
        )
    }

[Tobias3107]

For Every who has the same Problem. this worked for me:

in the handleCanvas :
this._canvas = canvas;

    componentDidUpdate() {
        this.handleCanvas(this._canvas);
    }