react-native-signature-canvas: Doesn't work in Android

Hi! I tried a basic example from the readme. In iOS, it works fine, but in Android drawing not working. Nothing happens when drawing, even clicks on Clear/Confirm buttons doesn’t work. None of the events called (clear, confirm, begin, end…) works. Here is my code:

import React, { useRef, useState } from 'react';
import { View, StyleSheet, Modal, TouchableOpacity, Text } from 'react-native';
import SignatureScreen from 'react-native-signature-canvas';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 200,
    borderWidth: 1
  }
})

function Signature({text = 'test signature', onOK = () => {}}) {
  const ref = useRef();
  const [ show, setShow ] = useState(false);

  const showSignature = () => setShow(true);
 
  const handleSignature = signature => {
    console.log(signature);
    onOK(signature);
  };
 
  const handleEmpty = () => {
    console.log('Empty');
  }
 
  const handleClear = () => {
    console.log('clear success!');
  }
 
  const handleEnd = () => {
      ref.current.readSignature();
  }

  const handleBegin = () => {
    console.log('begin!');
  };
 
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={showSignature}><Text>Show signature view</Text></TouchableOpacity>
      {show && <Modal>
        <SignatureScreen
          ref={ref}
          onEnd={handleEnd}
          onOK={handleSignature} 
          onEmpty={handleEmpty}
          onClear={handleClear}
          onBegin={handleBegin}
          autoClear={true} 
          descriptionText={text}
      />
        </Modal>}
    </View>
  );
}

export default Signature;

Versions:

"react": "~16.11.0"
"react-native": "0.61.3"
"react-native-signature-canvas": "^3.1.0"
"react-native-webview": "^10.3.3"

Android emulator: Pixel 2 API 23

How can we solve this problem?

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 3
  • Comments: 24 (5 by maintainers)

Most upvoted comments

You can try this example,https://github.com/YanYuanFE/react-native-signature-canvas/tree/master/example/expo-app, it’s work fine, you use autoClear={true} , signature will be clear when onEnd, if you want use button to control the signature, you don’t need use autoClear and onEnd event.

Hi! All I meant is that canvas neither drawing anything, neither any buttons work. Clicking and dragging over the canvas makes no effect on Android (nothing drawing, the canvas always empty).

not rendering at all on android

@andre-v2 @RamonEspinosa #76, sdkVersion issue

I solved it by upgrading react native from 0.59 to 0.63 and using react-native-signature-canvas 2.6.0. Upgrading is kind of hard but I followed this guide. I reckon everyone should do this due to the new play store requirements

@henryrossiterhttps: //streamable.com/f7e3i0,在Nexus 6P,Android 7.0上可以正常工作,我使用以下示例:https : //github.com/YanYuanFE/react-native-signature-canvas/tree/master/example / expo-app

Hello targetSdkVersion= 28 is normal, but Android shows nothing when targetSdkVersion=29.

I am having the same problem, did you manage to solve it?

Are you use expo project? How to set the targetSdkVersion in expo project?because I only see targetSdkVersion in react-native-cli project.

@YanYuanFE I recorded a comparison of iOS and Android, where you can see that Android has no effect when drawing -> https://streamable.com/ud5xyf