onChange event Android

[petromoldovan]

@kevinstumpf thank you very much for the wrapper! Awesome job!

I cannot get onChange event triggered on Android. Do you know what could be wrong? Please let me know.

<SignaturePad ref={(element) => this.signPad = element}
                          style={styles.signPad}
                          penColor={colors.primary}
                          onChange={this.handleOnSignatureChange}
/>

handleOnSignatureChange is not called:

handleOnSignatureChange = () => {
       console.log("works")
}

[pawellewandowski]

Same error :(

[faogustavo]

Same issue here :/

[mozinator]

I fixed it on expo by using https://docs.expo.io/versions/latest/sdk/webbrowser.html

hosted a html file which contained the signature pad then redirects back to the app

[faogustavo]

Chaged to https://github.com/RepairShopr/react-native-signature-capture. This use native components :)

[mozinator]

in my case using expo that one didn't work

[darrenfurr]

Same issue here. RN 0.45.1

[satishsynnov]

same issue :( @petromoldovan which android OS you are using?

[n-permana]

same issue, for now i fixed it by add onMessage.
https://facebook.github.io/react-native/docs/webview.html#onmessage

[satishsynnov]

@n-permana can you please share some code snippet how did you fix through onmessage? I observed that it's not working only few devices.

[n-permana]

@satishsynnov
add this to /node_modules/react-native-signature-pad/injectedJavaScript/executeNativeFunction.js
window.postMessage(JSON.stringify(args));

and this to /node_modules/react-native-signature-pad/index.js

onMessage = (event) => {
   var base64DataUrl = JSON.parse(event.nativeEvent.data);
   this._bridged_finishedStroke(base64DataUrl);
 }

 render = () => {
   return (
       <WebView automaticallyAdjustContentInsets={false}
                onNavigationStateChange={this._onNavigationChange}
                onMessage={this.onMessage}
                renderError={this._renderError}
                renderLoading={this._renderLoading}
                source={this.source}
                javaScriptEnabled={true}
                style={this.props.style}/>
   )
 };

[mkraft]

Same issue for me on Android 7.1.2.

[anilvk]

Any update on this. What is the reason this issue is observed on Android 7+ devices. I have seen this issue in a 6.0.1 OS as well.

Is moving to different library the only solution if we have to support signature in Android 7+ devices?

[davidkhuu]

@n-permana when you say
/node_modules/react-native-signature-pad/injectedJavaScript/injectedJavaScript.js
are you referring to
/node_modules/react-native-signature-pad/injectedJavaScript/executeNativeFunction.js?

I've tried to apply your solution by using onMessage but I can't seem to get it working.

OS: Android 7.1.1

[n-permana]

@davidkhuu yes i mean that file.

[freefony]

@n-permana , Great it worked! any Idea what changed in the APIs that caused this issue?

[davidkhuu]

@freefony

Not sure technically how but when Google released Nougat they stated that default WebViews would now use Chrome WebView as opposed to Google WebView that was used in previous versions. That's my guess.

Source: https://developer.android.com/about/versions/nougat/android-7.0.html#webview

[TimothyDLewis]

Issue is still present; attempting to implement the solutions above resulted in a Script Error on iOS (onChange event seemed to still be handled properly) but same functionality on Android; onChange wasn't being called at all.

My project is currently on "name": "react-native", "version": "0.35.0" which is likely why this fix didn't work, as onMessage isn't available on WebView until version 0.37.0... Will have to continue searching for a solution.

[dgptamayo]

The example works (with @n-permana's fix) when it is not enclosed on another View component. eg:

# `Demo` component based on the example
# this won't work
return (
  <View>
     <Demo />
  </View>
)

# this is ok
return (
  <Demo />
)

Tested on Android version: 7.0 (device) / iPhone 6 - iOS 10.3 (emulator)
react-native: sdk-22.0.2 (expo)
expo: ^22.0.2

[1Jesper1]

Any PR for this?

[freefony]

#24

[timt]

#24 Now merged and published

[ndtan]

@satishsynnov
add this to /node_modules/react-native-signature-pad/injectedJavaScript/executeNativeFunction.js
window.postMessage(JSON.stringify(args));

and this to /node_modules/react-native-signature-pad/index.js

onMessage = (event) => {
   var base64DataUrl = JSON.parse(event.nativeEvent.data);
   this._bridged_finishedStroke(base64DataUrl);
 }

 render = () => {
   return (
       <WebView automaticallyAdjustContentInsets={false}
                onNavigationStateChange={this._onNavigationChange}
                onMessage={this.onMessage}
                renderError={this._renderError}
                renderLoading={this._renderLoading}
                source={this.source}
                javaScriptEnabled={true}
                style={this.props.style}/>
   )
 };

Thank you. It works :)