Invariant Violation: Failed to call into JavaScript module method WebViewMessageHandler1.onMessage()

[ashutoshkumar160]

Invariant Violation: Failed to call into JavaScript module method WebViewMessageHandler1.onMessage(). Module has not been registered as callable.
Bridgeless Mode: false. Registered callable JavaScript modules (n = 12): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient, AppRegistry, RCTEventEmitter, RNCWebViewMessagingModule.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there
is an early initialization error when loading React Native., js engine: hermes

Steps to Reproduce :

followed the steps mentioned in docs after pre requisites (steps 1 -7)- https://docs.expo.dev/router/installation/

code is :::

`import React, { useState } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import Signature from "react-native-signature-canvas";

const SignatureScreen = () => {
const [signature, setSign] = useState(null);

const handleOK = (signature: React.SetStateAction) => {
console.log(signature);
setSign(signature);
};

const handleEmpty = () => {
console.log("Empty");
};

const style = .m-signature-pad--footer .button { background-color: red; color: #FFF; };
return (
<View style={{ flex: 1 }}>

{signature ? (
<Image
resizeMode={"contain"}
style={{ width: 335, height: 114 }}
source={{ uri: signature }}
/>
) : null}



);
};

const styles = StyleSheet.create({
preview: {
width: 335,
height: 114,
backgroundColor: "#F8F8F8",
justifyContent: "center",
alignItems: "center",
marginTop: 15,
},
previewText: {
color: "#FFF",
fontSize: 14,
height: 40,
lineHeight: 40,
paddingLeft: 10,
paddingRight: 10,
backgroundColor: "#69B2FF",
width: 120,
textAlign: "center",
marginTop: 10,
},
});

export default SignatureScreen;
`

package.json is :::

{ "name": "demoapp1", "version": "1.0.0", "main": "expo-router/entry", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~50.0.14", "expo-constants": "~15.4.5", "expo-linking": "~6.2.2", "expo-router": "~3.4.8", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.6", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-signature-canvas": "^4.7.2", "react-native-webview": "^13.8.4" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.45", "typescript": "^5.1.3" }, "private": true }

[YanYuanFE]

hi, @ashutoshkumar160
The code you provided is incomplete and I cannot reproduce it.

[ashutoshkumar160]

yes when i am editing it i can see full code , but when posting comment few lines are disappearing .. let me try in message

[ashutoshkumar160]

sign.txt

this contains the sample code , just change the file extension to tsx from txt

[ashutoshkumar160]

@YanYuanFE i have added the code file by changing its file type from tsx to txt

[YanYuanFE]

it's work fine, your code loss the import useState

[paranatrack]

same error for me

"dependencies": { "expo": "~50.0.14", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.6", "react-native-signature-canvas": "^4.7.2" }

iOS: OK
Android: ERROR

[ashutoshkumar160]

@YanYuanFE are you testing this on mac or windows? i am using windows and it is not working with the above dependencies mentioned in package.json and the sample code given in the sign.txt.
Any suggestions what might be breaking the code?

[ThatGuyThimo]

The problem you are running into has to do with WebView, more specificaly with the onMessage={} prop in WebView, version 13.6.4 works fine on IOS but not on android. if you force the peerDependencie of the signature-canvas for the react-native-webview to be 10.10.2 it will work on android but not on ios.
(generaly its a bad idea to downgrade react-native-webview since expo expects 13.6.4 on SDK 50)

context:
"expo": "~50.0.14",
"react-native-signature-canvas": "^4.7.2",
"react-native-webview": "^10.10.2" for Android or 13.6.4 latest for IOS

[ayoshimiya]

Hi, I have just run into this issue. After installing webview in my expo project this error stopped. I installed it with
npx expo install react-native-webview

I'd love to provide some insight as to why or if this actually fixes the issue but I'm quite new to expo and react native 😅 . If someone could shed some light into this I would appreciate it.
package.json

[ashu1019singh]

npx expo install react-native-webview

it will be good if you can share your package.json .. As for me it is not working even after installing the webview

[ashu1019singh]

The problem you are running into has to do with WebView, more specificaly with the onMessage={} prop in WebView, version 13.6.4 works fine on IOS but not on android. if you force the peerDependencie of the signature-canvas for the react-native-webview to be 10.10.2 it will work on android but not on ios. (generaly its a bad idea to downgrade react-native-webview since expo expects 13.6.4 on SDK 50)

context: "expo": "~50.0.14", "react-native-signature-canvas": "^4.7.2", "react-native-webview": "^10.10.2" for Android or 13.6.4 latest for IOS

i tried by downgrading webview version but sadly i am running into same issue , once i start drawing it throws an error

[naid]

I was having the same issue. I also tried removing react-native-webview and installing it again through npx expo install react-native-webview but then I noticed that I also have react-native-canvas . So I npm removed it and ran npx expo install react-native-webview and It worked fine after that.

Can you check if you have the same in your package.json file?

[ThatGuyThimo]

If you build the app with the latest version of react-native-webview using gradle it works fine, it just does not work in expo for me.

[ThatGuyThimo]

npx expo install react-native-webview

it will be good if you can share your package.json .. As for me it is not working even after installing the webview

react-native-webview gets installed with react-native-sigantuer-canvas as a peer dependency. you will have to force install a specific version if you want to change webview.
npm i react-native-webview@10.10.2 --force
Expo does not like this though as it expects the latest version.

[ayoshimiya]

npx expo install react-native-webview

it will be good if you can share your package.json .. As for me it is not working even after installing the webview

I attach the package.json file:
package.json

Notes:
I did not need to downgrade the webview version. I'm using 13.6.4. I was also experimenting with other signature libraries.
If that alone did not work, other things I "remember" doing before that (according to bash history) is:

npm install expo@latest
npx expo install --fix
npx expo start -c

[Awaluddin0001]

i'm fix this

use "react-native-webview": "^13.6.4"
and

import Signature from "react-native-signature-canvas";
don't use SignatureScreen or SignatureView