Prevent navigation and add webview style.

erickcrus · Jul 3, 2020 · 0439cb7 · 0439cb7
1 parent 1e38ce3
commit 0439cb7
Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-recaptcha-that-works",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "description": "⚛ A reCAPTCHA bridge for React Native that works.",
 	"repository": {

diff --git a/src/Recaptcha.js b/src/Recaptcha.js
@@ -42,7 +42,7 @@ import getTemplate from './get-template';
 const styles = StyleSheet.create({
   webView: {
     flex: 1,
-    backgroundColor: 'transparent',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
   loading: {
     position: 'absolute',
@@ -56,6 +56,10 @@ const styles = StyleSheet.create({
 });
 
 const originWhitelist = ['*'];
+const handleShouldStartLoadWithRequest = () => {
+  // prevent navigation on iOS
+  return false;
+}
 
 const Recaptcha = forwardRef(
   (
@@ -71,6 +75,7 @@ const Recaptcha = forwardRef(
       siteKey,
       baseUrl,
       lang,
+      style,
     },
     $ref,
   ) => {
@@ -166,6 +171,15 @@ const Recaptcha = forwardRef(
       [handleClose],
     );
 
+    const handleNavigationStateChange = useCallback(() => {
+      // prevent navigation on Android
+      if (!loading) {
+        $webView.current.stopLoading();
+      }
+    }, [loading]);
+
+    const webViewStyles = useMemo(() => [styles.webView, style], [style]);
+
     const renderLoading = () => {
       if (!loading && source) {
         return null;
@@ -184,8 +198,12 @@ const Recaptcha = forwardRef(
           ref={$webView}
           originWhitelist={originWhitelist}
           source={source}
-          style={styles.webView}
+          style={webViewStyles}
           onMessage={handleMessage}
+          allowsBackForwardNavigationGestures={false}
+          onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
+          onNavigationStateChange={handleNavigationStateChange}
+          bounces={false}
         />
         {renderLoading()}
       </Modal>

diff --git a/src/get-template.js b/src/get-template.js
@@ -157,7 +157,6 @@ const getTemplate = (params) => {
     
             .container {
                 display: flex;
-                background-color: rgba(0, 0, 0, 0.5);
                 justify-content: center;
                 align-items: center;
             }