[SOLVED] React native recaptchaV3 returns on onMessage() not working

React native recaptchaV3 returns on onMessage() not working

Since most of the react-native-recaptchaV3 libraries are outdated, im trying to create component to get invisible recaptchaV3. But onMessage() returns nothing to get token. Can anyone help me to get this done?

when i remove androidLayerType="software" app got crashed. if i use androidLayerType="software" i got undefined in console.

"react-native-webview": "^11.17.2",

class ReCaptchaComponent extends React.Component {
  _webViewRef = React.createRef();
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{flex: 0.0001, width: 0, height: 0}}>
        <WebView
          ref={ref => {
            this._webViewRef = ref;
          }}
          androidLayerType="software"
          javaScriptEnabled
          originWhitelist={['*']}
          automaticallyAdjustContentInsets
          mixedContentMode={'always'}
          onMessage={(e: any) => { console.log('onReceiveToken',e.nativeEvent.data);
          }}
          source={{html: recaptchaHtml,baseUrl: 'https://testing.xyz'}}
        />
      </View>
    );
  }
}

const recaptchaHtml = `<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      justify-content: left;
      align-items: top;
    }
  </style>
</head>
<body>
  <div id="inline-badge"></div>
  <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onRecaptchaLoadCallback"></script>
  <script>
    function onRecaptchaLoadCallback() {
      var clientId = grecaptcha.render('inline-badge', {
        'sitekey': '_xBu49Sf-rsc1',
        'badge': 'inline',
        'size': 'invisible'
      });
      grecaptcha.ready(function () {
        grecaptcha.execute(clientId, {
          action: 'verify'
        })
          .then(function (token) {
            window.ReactNativeWebView.postMessage(token, '*')
          });
      });
    }
  </script>
</body>
</html>`;
export default ReCaptchaComponent;

Solution

I have added

react-native-webview -> android -> src -> java -> RNCWebViewManager.java

on onReceivedSslError method i have changed,

handler.cancel()

handler.proceed();