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

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>
}