Doesn't work in Android

[ghost]

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?

[YanYuanFE]

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.

[ghost]

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).

[ghost]

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

[YanYuanFE]

@NeliHarbuzava I recorded a video for android, It's work fine, https://streamable.com/bzm99l use Nexus 5X, Android 10

[henryrossiter]

I am experiencing this issue as well. No issues on iOS. With android ( Nexus 6P, Android 7.0), the canvas remains empty.

[henryrossiter]

I am experiencing this issue as well. No issues on iOS. With android ( Nexus 6P, Android 7.0), the canvas remains empty.

With Android 9.0, however, I can use the canvas without issues.

[YanYuanFE]

@henryrossiter , https://streamable.com/f7e3i0, work fine on Nexus 6P, Android 7.0, I use this example: https://github.com/YanYuanFE/react-native-signature-canvas/tree/master/example/expo-app

[ehernandezlabelgrup]

Hi, apparently the library is not compatible with api level 23. Only on canvas, the library is not paint layers. Any solution?

[lyrpromax]

@henryrossiter，https: //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.

[RamonEspinosa]

@henryrossiter，https: //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?

[andre-v2]

@henryrossiter，https: //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?

[YanYuanFE]

@henryrossiter，https: //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]

@andre-v2 @RamonEspinosa https://github.com/YanYuanFE/react-native-signature-canvas/issues/76, sdkVersion issue

[RamonEspinosa]

@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

[benchris921]

Exactly experienced same issue in Android. Drawing nothing.

[asmakhalfallah2018]

for me removing onEnd event from this https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/example/expo-app/SignModal.js and setting a signature in state making this example working

[kumw1975]

not rendering at all on android

[Brinda221patel]

I am facing the same issue with "react-native-signature-canvas". It works fine in the simulator and also in the device when I scan QR from the expo app but when I generate an APK file from the expo and run it on the android device the application got crashes.

Can anyone guide me or suggest a new plugin for signature that works for both android and ios device?

[kumw1975]

@Brinda221patel build the html and js in webview

[Brinda221patel]

@Brinda221patel build the html and js in webview

1. Can you please explain in detail? I need to convert the EXPO app into an APK file. The "react-native-signature-canvas" plugin works fine when we run "npm start" and scan QR with the android device but when I generate an APK file expo using (eas build -p android --profile preview ) and run that APK file in the android device the application got crashed due this ('react-native-signature-canvas') plugin

[kumw1975]

https://github.com/szimek/signature_pad/tree/gh-pages @benchris921 put the contents of these files in backticks (`` ) call that from a webview. it should fix that.

const html = `<!doctype html> .. put the css in style tags in the head`
const js = `jscontent`
  <WebView
    source={{ html: html }}
    onMessage={(event) => {}}
    injectedJavaScript={js}
  />

[abhishek8961195004]

@Brinda221patel build the html and js in webview

1. Can you please explain in detail? I need to convert the EXPO app into an APK file. The "react-native-signature-canvas" plugin works fine when we run "npm start" and scan QR with the android device but when I generate an APK file expo using (eas build -p android --profile preview ) and run that APK file in the android device the application got crashed due this ('react-native-signature-canvas') plugin

Hi @Brinda221patel have you get any solution? I am facing same issue

[react06]

same issue here as well!

[crmapache]

Show nothing on android. Really sad

[zpinto123]

This should be mentioned in the docs. That it doesn't work with some versions of android, including 6 (API 23).