How to convert react native signature canvas functional component to class component

Question

I am new to react native. I do not know how to convert Functional component to class component. please help. here is my code of react native signature canvas code which is in functional component I want to convert it to class component please help thanks.

const ref = useRef();


    const handleSignature = signature => {
      const path = FileSystem.cacheDirectory + 'sign.png';
  FileSystem.writeAsStringAsync(path, signature.replace('data:image/png;base64,', ''), {encoding: FileSystem.EncodingType.Base64}).then(res => {
    
        // console.log(res);
        // FileSystem.getInfoAsync(path, {size: true, md5: true}).then(file => {
          FileSystem.getInfoAsync(path).then(file => {
          console.log(file);
          setSingleFileSIGN({ singleFileSIGN: file.uri});
          console.log(singleFileSIGN)
        })
      }).catch(err => {
        console.log("err", err);
      })
  };

  const handleEmpty = () => {
    console.log('Empty');
  };

  const handleClear = () => {
    console.log('clear success!');
  };

  const handleEnd = () => {
    ref.current.readSignature();
  };
  


 <View style={{flex: 1, width:355, 
              ...Platform.select({
      android: {
         marginBottom:-80,
        borderColor: '#FF8C00',
        borderWidth:1
      //  marginBottom:-150
      },
    }),
    }}>
                    <SignatureScreen style={{height: '400%'}}
                        ref={ref}
                        onEnd={handleEnd}
                        onOK={handleSignature}
                        onEmpty={handleEmpty}
                        onClear={handleClear}
                        descriptionText={'Sign here!'}
                    />
              </View>

Answer 1

 const signatureRef = createRef()

    clearSignature = async () => {
        await signatureRef.current?.clearSignature()
    }

    handleOK = async (signature) => {
        const sign = signature.split(",").pop()
        await this.setState({
            signatureVal: sign
        })
        // onOK(signature); // Callback from Component props
    };

    handleEnd = async () => {
        await this.setState({isScrollEnabled: true})
        await signatureRef.current?.readSignature()
    }

    render(){
      <View>
         <SignatureScreen
            ref={signatureRef}
            onOK={this.handleOK}
            onEnd={this.handleEnd}
            androidHardwareAccelerationDisabled={true}
            onBegin={async () => {await this.setState({
                isScrollEnabled: false
            })}}
         />
      </View>
    }