diff --git a/Example.App.js b/Example.App.js index 36c6954..b67bc00 100644 --- a/Example.App.js +++ b/Example.App.js @@ -15,9 +15,11 @@ export default class App extends React.Component { if (['cancel'].includes(event.nativeEvent.data)) { this.captchaForm.hide(); this.setState({ code: event.nativeEvent.data}); - } else if (['error', 'expired'].includes(event.nativeEvent.data)) { + } else if (['error'].includes(event.nativeEvent.data)) { this.captchaForm.hide(); this.setState({ code: event.nativeEvent.data}); + } else if (event.nativeEvent.data === 'expired') { + event.reset(); } else if (event.nativeEvent.data === 'open') { console.log('Visual challenge opened'); } else { diff --git a/Hcaptcha.js b/Hcaptcha.js index da93431..164d3c9 100644 --- a/Hcaptcha.js +++ b/Hcaptcha.js @@ -1,4 +1,4 @@ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, useRef } from 'react'; import WebView from 'react-native-webview'; import { Linking, StyleSheet, View, ActivityIndicator } from 'react-native'; import ReactNativeVersion from 'react-native/Libraries/Core/ReactNativeVersion'; @@ -153,7 +153,7 @@ const Hcaptcha = ({ console.log("challenge opened"); }; var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; - var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); }; + var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; var onDataErrorCallback = function(error) { console.log("challenge error callback fired"); window.ReactNativeWebView.postMessage("error"); @@ -201,8 +201,17 @@ const Hcaptcha = ({ [loadingIndicatorColor] ); + const webViewRef = useRef(null); + + const reset = () => { + if (webViewRef.current) { + webViewRef.current.injectJavaScript('onloadCallback();'); + } + }; + return ( { if (event.url.slice(0, 24) === 'https://www.hcaptcha.com') { @@ -212,7 +221,10 @@ const Hcaptcha = ({ return true; }} mixedContentMode={'always'} - onMessage={onMessage} + onMessage={(e) => { + e.reset = reset; + onMessage(e); + }} javaScriptEnabled injectedJavaScript={patchPostMessageJsCode} automaticallyAdjustContentInsets diff --git a/__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap b/__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap index 0df6a2a..ea8b473 100644 --- a/__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap +++ b/__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap @@ -53,6 +53,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with all props 1 })();" javaScriptEnabled={true} mixedContentMode="always" + onMessage={[Function]} onShouldStartLoadWithRequest={[Function]} originWhitelist={ [ @@ -103,7 +104,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with all props 1 console.log("challenge opened"); }; var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; - var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); }; + var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; var onDataErrorCallback = function(error) { console.log("challenge error callback fired"); window.ReactNativeWebView.postMessage("error"); @@ -208,6 +209,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with minimum pro })();" javaScriptEnabled={true} mixedContentMode="always" + onMessage={[Function]} onShouldStartLoadWithRequest={[Function]} originWhitelist={ [ @@ -258,7 +260,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with minimum pro console.log("challenge opened"); }; var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; - var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); }; + var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; var onDataErrorCallback = function(error) { console.log("challenge error callback fired"); window.ReactNativeWebView.postMessage("error"); diff --git a/__tests__/__snapshots__/Hcaptcha.test.js.snap b/__tests__/__snapshots__/Hcaptcha.test.js.snap index d001e9e..09e3405 100644 --- a/__tests__/__snapshots__/Hcaptcha.test.js.snap +++ b/__tests__/__snapshots__/Hcaptcha.test.js.snap @@ -15,6 +15,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with all props 1`] = ` })();" javaScriptEnabled={true} mixedContentMode="always" + onMessage={[Function]} onShouldStartLoadWithRequest={[Function]} originWhitelist={ [ @@ -65,7 +66,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with all props 1`] = ` console.log("challenge opened"); }; var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; - var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); }; + var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; var onDataErrorCallback = function(error) { console.log("challenge error callback fired"); window.ReactNativeWebView.postMessage("error"); @@ -130,6 +131,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with minimum props 1`] = ` })();" javaScriptEnabled={true} mixedContentMode="always" + onMessage={[Function]} onShouldStartLoadWithRequest={[Function]} originWhitelist={ [ @@ -180,7 +182,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with minimum props 1`] = ` console.log("challenge opened"); }; var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; - var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); }; + var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; var onDataErrorCallback = function(error) { console.log("challenge error callback fired"); window.ReactNativeWebView.postMessage("error"); @@ -244,6 +246,7 @@ exports[`Hcaptcha snapshot tests test debug 1`] = ` })();" javaScriptEnabled={true} mixedContentMode="always" + onMessage={[Function]} onShouldStartLoadWithRequest={[Function]} originWhitelist={ [ @@ -294,7 +297,7 @@ exports[`Hcaptcha snapshot tests test debug 1`] = ` console.log("challenge opened"); }; var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; - var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); }; + var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); }; var onDataErrorCallback = function(error) { console.log("challenge error callback fired"); window.ReactNativeWebView.postMessage("error");