Invalid hook call. Hooks can only be called inside of the body of a function component. in react native signature canvas

Question

I am new to react native. I have react native signature canvas code which is in functional component but now I write that code in my class component code. then I am getting error like this = Invalid hook call. Hooks can only be called inside of the body of a function component. so whats the issue please help.

here is code

export default class Kyc extends Component {
  constructor(props) {
    super(props);

    this.state = {
       singleFileSIGN:''
    };
  }

 ref = useRef();


   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);
        this.setState({ singleFileSIGN: file.uri});
        console.log(singleFileSIGN)
      })
    }).catch(err => {
      console.log("err", err);
    })
};

handleEmpty ()  {
  console.log('Empty');
};

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

handleEnd () {
  ref.current.readSignature();
};


  render () {

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


  

Answer 1

Hooks only used in function components. In class use like this:

  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }