We have the following code being loaded into a WebView in React Native:
<!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>
alert('js is running');
function onRecaptchaLoadCallback() {
alert('onRecaptchaLoadCallback loaded');
}
</script>
</body>
</html>`
What is expected to happen is the code is loaded for Recaptcha from https://www.google.com. Once loaded the onload=onRecaptchaLoadCallback will call the onRecaptchaLoadCallback function.
This works on iOS. The alert for js is working is show, the after the script is loaded, the onRecaptchaLoadCallback function is called (and shows the alert contents)
On Android, we only get the first alert, but the onRecaptchaLoadCallback is never called.
Here is the WebView component code for reference:
<WebView
nativeID={id}
style={{ width: 0, height: 0 }}
originWhitelist={['*']}
startInLoadingState={true}
javaScriptEnabledAndroid={true}
javaScriptEnabled={true}
domStorageEnabled={true}
mixedContentMode="always"
allowUniversalAccessFromFileURLs={true}
source={{ html: recaptchaHtmlWithKey, baseUrl: 'https://www.our-site-url.com' }}
onMessage={(event) => {
onCheck(event.nativeEvent.data)
}}
/>
Also to note, we do have the INTERNET permission set in the android gradle file.