Handle ok method is not triggered on android after upgrading to Expo sdk 46

[sayo96]

I upgraded my app recently to expo SDK 46 (https://blog.expo.dev/expo-sdk-46-c2a1655f63f7).

• After the user completes the stroke i'm not getting the base64Uri of the signature.
• From my initial console message i was able to find out that this happens only on Expo go app for Android whereas everything works fine on IOS

I followed the same example that was mentioned in your repo:

import SignatureScreen from "react-native-signature-canvas";

const Sign = ({ text, onOK }) => {
  const ref = useRef();

  // Called after ref.current.readSignature() reads a non-empty base64 string
  const handleOK = (signature) => {
    console.log(signature);  -> This console message was never printed so i think this method is never triggered
    onOK(signature); // Callback from Component props
  };

  // Called after ref.current.readSignature() reads an empty string
  const handleEmpty = () => {
    console.log("Empty");
  };

  // Called after ref.current.clearSignature()
  const handleClear = () => {
    console.log("clear success!");
  };

  // Called after end of stroke
  const handleEnd = () => {
    ref.current.readSignature();
  };

  // Called after ref.current.getData()
  const handleData = (data) => {
    console.log(data);
  };

  return (
    <SignatureScreen
      ref={ref}
      onEnd={handleEnd}
      onOK={handleOK}
      onEmpty={handleEmpty}
      onClear={handleClear}
      onGetData={handleData}
      autoClear={true}
      descriptionText={text}
    />
  );
};

export default Sign;

[YanYuanFE]

Sorry, I didn't reproduce your problem, I use the latest expo sdk, the complete code is as follows: https://github.com/YanYuanFE/react-native-signature-canvas/tree/master/example/sign-app

[sayo96]

Thanks for responding in short notice. Did you try using the android expo go app? It appears buggy only on android. Once the signature is read neither of the callbacks are fired ( handle ok / handleEmpty) .

[sayo96]

I was on expo sdk 46 when i ran into this - https://github.com/zionlabs/Issues/issues/1943

[applica-of-things]

@YanYuanFE on Android, with expo SDK 46, the example with custom buttons doesn't work. I'm not getting the base64Uri of the signature. Neither of the callbacks are fired.

Thanks in advance

[bureaunoir]

Same problem here. Thanks!

[applica-of-things]

I solved updating react-native-webview to the version 11.23.0

[bureaunoir]

I solved updating react-native-webview to the version 11.23.0

Wow! thank you! That worked for me too. Now i get this error:

TypeError: onOK is not a function. (In 'onOK(signature)', 'onOK' is undefined)

any idea why? console.log(signature) works.

[serfgy]

i used

  "overrides": {
    "react-native-signature-canvas": {
      "react-native-webview": "^11.23.0"
    }
  },

to get rid of build errors/warnings but the same issue happens only on android, expo Go + android build unable to get Signature, is null when passed to onOK callback

[TAR-Askur]

If it helps anyone: i was manually cleaning up in the package.json and removed "react-native-webview" in the process. After using expo install I got the described error and managed to fix it just by re-installing "react-native-webview"

[josh-thompson13]

I believe I have found the problem.

In IOS the following code will work:

// State
const [signature, setSignature] = useState<string | null>(null);

// Function used to save state
    const saveSignature = (img: string): void => {
        setSignature(img);
    };

// Prop passed to SignatureScreen
onOK = {saveSignature}

On Android however, you must set the state directly. This eliminates the need for a saveSignature function.

// State
const [signature, setSignature] = useState<string | null>(null);

// Prop passed to SignatureScreen
onOK={setSignautre}

To verify this works simply add a console.log(signature) before your render.