measureText('xxx').width is undefined? about react-native-canvas

[PatilRupaliAress]

Thank you very much its working fine using (await measureText('xxx')).width

[iddan]

Please try (await measureText('xxx')).width

[XiaoLin1995]

I need to draw a turntable, but there are some problems.
I don't know how to solve it.
can you help me?
Thanks very much.

import React from 'react'
import {
    View,
    StyleSheet
} from  'react-native'
import Canvas from 'react-native-canvas';


export default class Fan extends  React.Component{
  constructor () {
    super()
    this.state = {
      prize: [], 
      outsideRadius: 125,
      insideRadius: 10, 
      textRadius: 100, 
      startAngle: 0, 
      border: 5, 
    }
    this.state.prize = [
      {
        id: 1,
        name: 'thanks',
        value: 0, 
        bgColor: '#ff693b',
        color: '#ffffff', 
        probability: 5 
      },
      {
        id: 2,
        name: '40',
        value: 40,
        bgColor: '#ffce39',
        color: '#fe693c',
        probability: 11
      },
      {
        id: 3,
        name: '20',
        value: 20,
        bgColor: '#ff693b',
        color: '#ffffff',
        probability: 22
      },
      {
        id: 4,
        name: 'thanks',
        value: 0,
        bgColor: '#ffce39',
        color: '#fe693c',
        probability: 5
      },
      {
        id: 5,
        name: '40',
        value: 40,
        bgColor: '#ff693b',
        color: '#ffffff',
        probability: 11
      },
      {
        id: 6,
        name: '20',
        value: 20,
        bgColor: '#ffce39',
        color: '#fe693c',
        probability: 22
      },
      {
        id: 7,
        name: '65',
        value: 65,
        bgColor: '#ff693b',
        color: '#ffffff',
        probability: 2
      },
      {
        id: 8,
        name: '20',
        value: 20,
        bgColor: '#ffce39',
        color: '#fe693c',
        probability: 22
      }
    ] 
  }
  handleCanvas = (canvas) => {
     let arc = Math.PI / (this.state.prize.length / 2)
     let ctx = canvas.getContext('2d')
     ctx.clearRect(0, 0, this.state.outsideRadius * 2, this.state.outsideRadius * 2)
     ctx.strokeStyle = '#ff9800'
     ctx.lineWidth = this.state.border * 2
     ctx.font = '14px Microsoft YaHei'
     for (let i = 0; i < this.state.prize.length; i++) {
       let angle = this.state.startAngle + i * arc
       ctx.fillStyle = this.state.prize[i].bgColor
       ctx.beginPath()
       ctx.arc(this.state.outsideRadius, this.state.outsideRadius, this.state.outsideRadius - this.state.border, angle, angle + arc, false)
       ctx.stroke()
       ctx.arc(this.state.outsideRadius, this.state.outsideRadius, this.state.insideRadius - this.state.border, angle + arc, angle, true)
       ctx.fill()
       ctx.save()
       ctx.fillStyle = this.state.prize[i].color
       let text = this.state.prize[i].name
       let lineHeight = 15
       ctx.translate(this.state.outsideRadius + Math.cos(angle + arc / 2) * this.state.textRadius, this.state.outsideRadius + Math.sin(angle + arc / 2) * this.state.textRadius)
       ctx.rotate(angle + arc / 2 + Math.PI / 2)
       if (text.length > 6) {
         text = text.substring(0, 6) + '||' + text.substring(6)
         let texts = text.split('||')
         for (var j = 0; j < texts.length; j++) {
           ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, (j + 1) * lineHeight)
         }
       } else {
         let textWidth = (ctx.measureText(text)).width
         ctx.fillText(text, -textWidth / 2, lineHeight)
         // this.fillCanvasText(ctx, text, lineHeight)
       }
       ctx.restore()
     }
  }
  async fillCanvasText (ctx, text, lineHeight) {
    let textWidth = (await ctx.measureText(text)).width
    alert(textWidth)
    ctx.fillText(text, -textWidth / 2, lineHeight)
  }
  render(){
    return(
      <View style={styles.container}>
        <Canvas ref={this.handleCanvas} styles={{width: 100, height: 100}}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center'
  }
})