title: How to convert react native signature canvas functional component to class component
body: <p>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.</p>
  <pre><code>const ref = useRef();
  
  
      const handleSignature = signature =&gt; {
        const path = FileSystem.cacheDirectory + 'sign.png';
    FileSystem.writeAsStringAsync(path, signature.replace('data:image/png;base64,', ''), {encoding: FileSystem.EncodingType.Base64}).then(res =&gt; {
      
          // console.log(res);
          // FileSystem.getInfoAsync(path, {size: true, md5: true}).then(file =&gt; {
            FileSystem.getInfoAsync(path).then(file =&gt; {
            console.log(file);
            setSingleFileSIGN({ singleFileSIGN: file.uri});
            console.log(singleFileSIGN)
          })
        }).catch(err =&gt; {
          console.log(&quot;err&quot;, err);
        })
    };
  
    const handleEmpty = () =&gt; {
      console.log('Empty');
    };
  
    const handleClear = () =&gt; {
      console.log('clear success!');
    };
  
    const handleEnd = () =&gt; {
      ref.current.readSignature();
    };
    
  
  
   &lt;View style={{flex: 1, width:355, 
                ...Platform.select({
        android: {
           marginBottom:-80,
          borderColor: '#FF8C00',
          borderWidth:1
        //  marginBottom:-150
        },
      }),
      }}&gt;
                      &lt;SignatureScreen style={{height: '400%'}}
                          ref={ref}
                          onEnd={handleEnd}
                          onOK={handleSignature}
                          onEmpty={handleEmpty}
                          onClear={handleClear}
                          descriptionText={'Sign here!'}
                      /&gt;
                &lt;/View&gt;
  
  
  </code></pre>