douglasjunior / react-native-recaptcha-that-works

⚛ A reCAPTCHA bridge for React Native that works (Android and iOS)

reCAPTCHA for React Native (Android and iOS)

A reCAPTCHA library for React Native (Android and iOS) that works.

Looking for React DOM version?

Normal	Invisible

Try the Online demo.

Install

Install the module

  yarn add react-native-recaptcha-that-works react-native-webview

Or

  npm i -S react-native-recaptcha-that-works react-native-webview

See the react-native-webview Getting Started Guide.

Usage

With JavaScript:

import React, { useRef } from 'react';
import { View, Button } from 'react-native';

import Recaptcha from 'react-native-recaptcha-that-works';

const App = () => {
    const recaptcha = useRef();

    const send = () => {
        console.log('send!');
        this.recaptcha.current.open();
    }

    const onVerify = token => {
        console.log('success!', token);
    }

    const onExpire = () => {
        console.warn('expired!');
    }

    return (
        <View>
            <Recaptcha
                ref={recaptcha}
                siteKey="<your-recaptcha-public-key>"
                baseUrl="http://my.domain.com"
                onVerify={onVerify}
                onExpire={onExpire}
                size="invisible"
            />
            <Button title="Send" onPress={send} />
        </View>
    );
}

Or with TypeScript:

import React, { useRef } from 'react';
import { View, Button } from 'react-native';

import Recaptcha, { RecaptchaRef } from "react-native-recaptcha-that-works";

// ...

export const Component: React.FC = () => {
    const recaptcha = useRef<RecaptchaRef | null>(null);

    const send = () => {
        console.log('send!');
        recaptcha.current?.open();
    };

    const onVerify = (token: string) => {
        console.log('success!', token);
    };

    const onExpire = () => {
        console.warn('expired!');
    }

    return (
        <View>
            <Recaptcha
                ref={recaptcha}
                siteKey="<your-recaptcha-public-key>"
                baseUrl="http://my.domain.com"
                onVerify={onVerify}
                onExpire={onExpire}
                size="invisible"
            />
            <Button title="Send" onPress={send} />
        </View>
    );
};

For more details, see the Sample Project.

Props

Name	Value	Default	Description
headerComponent	React Element		A component to render on top of Modal.
footerComponent	React Element		A component to render on bottom of Modal.
loadingComponent	React Element		A custom loading component.
style	ViewStyle		Customize default style such as background color.
modalProps	ModalProps		Override the Modal props.
webViewProps	WebViewProps		Override the WebView props.
lang	string		Language code.
siteKey	string		(Required) Your Web reCAPTCHA site key. (The Web key must be used, not for Android)
baseUrl	string		(Required) The URL (domain) configured in the reCAPTCHA console setup. (ex. http://my.domain.com) (See also #34)
size	'invisible', 'normal' or 'compact'	'normal'	The size of the widget.
theme	'dark' or 'light'	'light'	The color theme of the widget.
onLoad	function()		A callback function, executed when the reCAPTCHA is ready to use.
onVerify	function(token)		(Required) A callback function, executed when the user submits a successful response. The reCAPTCHA response token is passed to your callback.
onExpire	function()		A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify. Only works if the webview still open after onVerify has been called for a long time.
onError	function(error)		A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
onClose	function()		A callback function, executed when the Modal is closed.
recaptchaDomain	string	www.google.com	The host name of the reCAPTCHA valid api. See detail.
gstaticDomain	string	www.gstatic.com	Customize reCAPTCHA gstatic host.
hideBadge	boolean	false	When size = 'invisible', you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. See detail.
enterprise	boolean (enterprise)	false	Use the new reCAPTCHA Enterprise API. Note: for enterprise you need to choose the size when creating the siteKey.
action	string (enterprise)		An additional parameter for specifying the action name associated with the protected element for reCAPTCHA Enterprise API.

Note: If lang is not set, then device language is used.

Methods

Name	Type	Description
open	function	Open the reCAPTCHA Modal.
close	function	Close the reCAPTCHA Modal.

Note: If using size="invisible", then challenge run automatically when open is called.

reCAPTCHA v2 docs

• I'm not a robot
• Invisible

reCAPTCHA Enterprise docs

• Overview
• Using features

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions, use the issues.

License

The MIT License (MIT)

Copyright (c) 2020 Douglas Nassif Roma Junior

See the full license file.

react-native-recaptcha-that-works's Issues

Support of React Native Web ?

Thank you for this awesome lib that really works :)

The main readme doesn't mention the support of react-native-web .
is this planned in the futur ?

Question: Is it using Recaptcha v2 or v3

Maybe clear it up in the ReadMe.
Thanks for a ReCaptcha that really works

Invisible doesn't work

On android, onError is called and error is null. Not using invisible works.

Fallback to V2

Hi,

I saw in another thread that the default V3 sometimes falls back to recaptcha V2.
I was unable to reproduce it, but I would like to know:

• is the flow exactly the same?
• does it still trigger onVerify / onLoad / onError etc the same way as V3?
• can the user leave the V2 question modal? what happens if they do?
• if the user is wrong in passing this V2 test, what does it trigger? onError or something else?

Asking since I wouldn't want to have a state "stuck in between" with a loading modal or whatever I put in place for V3 that behaves differently for V2?

Thank you for your help!

Encountering 'onError' Triggered Issue with reCAPTCHA: Help Needed!

• React Native version: 0.72.0
• React Native WebView version: 13.2.2
• Library version: 1.3.2
• Platform: Android
• Problem occurred after updating React Native: Yes
• First time using the library: No

Question: Which domain should I put in baseUrl?

It's the first time I'm using recaptcha and I have a doubt about what the baseUrl domain should be.
I already set up a key, what else do I need to configure?

Thanks

Cannot close modal after verifying Recaptcha in IOS

• "react-native": "0.66.3",
• "react-native-webview": "^11.17.0",
• "react-native-recaptcha-that-works": "^1.2.0",
• Version: Iphone 12 Pro Max - IOS 14.5
• Cannot close modal after verifying recaptcha
• Android is fine but IOS is not work

Note: I used ref to close but not work

Not working in production

• What version of React Native? 0.72.6
• What version of React Native WebView? 13.2.2
• What version of the library? 2.0.0
• iOS/Android version? all
• Are you using the library for the first time? yes
• It's a bug? Provide a link to a minimal reproduction case

<Recaptcha
	ref={recaptcha}
	siteKey={process.env.EXPO_PUBLIC_RECAPTCHAKEY || ''}
	baseUrl={process.env.EXPO_PUBLIC_BASE_URL || ''}
	onVerify={(token) => {
	     onSubmit(token);
        }}
	hideBadge
	size="invisible"
/>

EXPO_PUBLIC_RECAPTCHAKEY = realkey
EXPO_PUBLIC_BASE_URL = https://domain.example

Hi, I have an typescript error in the ref

It always shows the challenges when open reCAPthcha. It happens in any situation.

• What version of React Native?
  --> 0.67.2
• What version of React Native WebView?
  --> 11.22.4
• What version of the library?
  --> 1.3.1
• iOS/Android version?
  --> IOS/Android
• Did the problem happen after updating React Native?
  --> No
• Are you using the library for the first time?
  --> Yes
• It's a bug? Provide a link to a minimal reproduction case.
  --> It always shows the challenges when open reCAPthcha. It happens in any situation.

Is it working on Huawei devices?

Hi,

I know most google plugins/tools rely on google play services.

Question is: can this plugin be used properly on Huwaei devices?
( I guess yes, since it works on iOS, but unfortunately I have no huwaei to test it on )

Only size="invisible" is working when enterprise is true

I am not sure if this is an issue or maybe an expected behaviour for some reason. When I have enterprise set to true, size normal and compact will not work. The modal will appear for a split second and the on error callback runs with null as the error. But it works normally when size is set to inivisible.

iOS: Invisible reCaptcha show Image grid

@douglasjunior I am trying to implement invisible reCaptcha. On iOS I notice on first attempt, App display image grid.

<Recaptcha
        ref={recaptcha}
        siteKey="<Site-Key>"
        baseUrl="https://my.nasdaq.com"
        onVerify={onVerify}
        onExpire={onExpire}
        size="invisible"
/>

v3 Invisible - ActivityIndicator

On recaptcha.current.open();
Along with activity indicator recaptcha icon coming on right bottom corner, which is looking odd.

Nothing shows up when trying to use it

I'm trying to use this library but nothing shows up at all when I trigger it with $recaptcha.current.open. Does this need the latest version of React Native and react-native-webview? Because I am on RN 0.63.4 and react-native-webview = 11.13.0. I would not upgrade for now RN if at all possible.
My code is based on the example/sample, when a button is clicked I call the send function which should open it. Tried size = compact/normal.

const $recaptcha = useRef();

const send = () => {
    console.log('send!');
    $recaptcha.current?.open();
  };

const onVerify = async (token: string) => {
    console.log('success!', token);
    await onSubmit();
  };

  const onExpire = () => {
    console.warn('expired!');
  };

<Recaptcha
ref={$recaptcha}
siteKey={Config.RECAPTCHA_SITE_KEY}
baseUrl={Config.WEBSITE_BASE_URL}
onVerify={onVerify}
onExpire={onExpire}
theme="light"
size="compact"
/>

<ButtonRegular
  title={isSignUp ? trans('buttons.signup') : trans('buttons.login')}
  onPress={send}
  isLoading={isLoading}
/>

I can't change the style of the recpatcha widget

how can i modify the width of the recpatcha so that i can occupy the entire width of my div and make it so that when the recaptcha is finished the widget doesn't disappear but stays with the checked one, because any modification i make doesn't change the recaptcha widget.

I don't want to use it as a modal, but rather fit it into a form.

Captcha without modal view

I want to implement this captcha but it should view directly no need for that modal view. Please help me its urgent work request.

Blocking the UI

When it is generating a token, its blocking the UI. The UI becomes unresponsive to touches and scrolling for about 1 second. This happens on both iOS and Android.

Please could you make this non-blocking? Thank you in advance.

This is my setup:

                    <View style={{ display: 'none' }}>
                        <Recaptcha
                            style={{ display: 'none' }}
                            ref={recaptcha}
                            loadingComponent={<></>}
                            siteKey="6LcsO5sUAAAGDSWMFSKLWDnP1DjHjaZN"
                            baseUrl="https://www.trollflix.com"
                            onVerify={onVerify}
                            size="invisible"
                            hideBadge={true}
                            modalProps={{ visible: false, animationType: 'none', transparent: true, supportedOrientations: ['landscape-right'], statusBarTranslucent: true }}
                        />
                    </View>

Creating a site key for android and iOS

To create a siteKey for iOS and Android, do we have to do it through here? https://cloud.google.com/recaptcha-enterprise/docs/create-key-mobile

There's no way to reverify the user in case of invisible Re Captcha

Adding footer component

Hi @douglasjunior, thanks for the amazing lib. What about creating a footerComponent prop for this lib? Or at least create a style to then container for using flexDirection: 'column-reverse'.

Image Selection Card White Background

Hello, when image selection pop up activates it displays a white background behind it, how can i remove this white background and make it transparent ?

Cancel button is in footer, and my app background is black:

but when image selection pop up activates it shows a white background !

RFC add promise based method to obtain the token

Hello,
Thank you for this library 🥇 I would like to propose another interesting feature to this library.

Description

Image the case, when the library is in invisible state and I would like to display the captcha, once user clicked on submit button in the form. When the submission is completed, then we can make an api call to apply the changes. So far I need to handle it using the callback, which is not the cleanest way to do it. Hence I would like to improve it using async/await handle

Posible implementation

Create a ref, which will be responsible for storing the promise

    const $promiseToken = useRef<{
      resolve: (value: GetToken | PromiseLike<GetToken>) => void;
      reject: (arg: any) => void;
    } | null>();

Move code to the separate method. It will be used in both places

    const onOpen = useCallback(() => {
      setVisible(true);
      setLoading(true);
      $isClosed.current = false;
    }, []);

Add new async method getToken, which will be responsible for opening the modal and fetching the token
This promise will be stored in the ref called $promiseToken

    useImperativeHandle(
      ref,
      () => ({
        open: () => {
          onOpen();
        },
        close: handleClose,
        getToken: () => {
          onOpen();
          return new Promise<GetToken>(
            (resolve, reject: (arg: any) => void) => {
              $promiseToken.current = { resolve, reject };
            }
          );
        },
      }),
      [handleClose, onOpen]
    );

Handle this promise in handleMessage method

    const handleMessage = useCallback(
   (content) => {
     try {
       const payload = JSON.parse(content.nativeEvent.data);
       if (payload.close) {
         if (isInvisibleSize) {
           handleClose();
         }
       }
       if (payload.load) {
         handleLoad(...payload.load);
       }
       if (payload.expire) {
         //@ts-ignore
         onExpire?.(...payload.expire);
       }
       if (payload.error) {
         handleClose();
         //@ts-ignore
         onError?.(...payload.error);
         $promiseToken?.current?.reject(payload.error);
       }
       if (payload.verify) {
         handleClose();
         //@ts-ignore
         onVerify?.(...payload.verify);
         const token = payload?.verify?.[0] || '';
         $promiseToken?.current?.resolve({ token: token });
       }
     } catch (err) {
       $promiseToken?.current?.reject(err);
     }
   },
   [onVerify, onExpire, onError, handleClose, handleLoad, isInvisibleSize]
 );

After everything, we need to clean up a little bit to avoid memory leak

    React.useEffect(() => {
      return () => {
        $promiseToken.current = null;
      };
    }, []);

Before

const App = () => {
  const size = 'normal';
  const [key, setKey] = useState('<none>');

  const $recaptcha = useRef();

  const handleOpenPress = useCallback(() => {
    $recaptcha.current.open();
  }, []);

  const handleClosePress = useCallback(() => {
    $recaptcha.current.close();
  }, []);


  useState(() => {
   // handle submit here (api call), which is not the best solution. I would prefer to have it all at one place
  },[key])

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeArea}>
        <View
          contentInsetAdjustmentBehavior="automatic"
          style={styles.container}>
          <Button onPress={handleOpenPress} title="Open" />
          <Text>Token: {key}</Text>
          <Text>Size: {size}</Text>
        </View>

        <Recaptcha
          ref={$recaptcha}
          lang="en"
          headerComponent={<Button title="Close" onPress={handleClosePress} />}
          siteKey="6LejsqwZAAAAAGsmSDWH5g09dOyNoGMcanBllKPF"
          baseUrl="http://127.0.0.1"
          size={size}
          theme="light"
          onLoad={() => alert('onLoad event')}
          onClose={() => alert('onClose event')}
          onError={(err) => {
            alert('onError event');
            console.warn(err);
          }}
          onExpire={() => alert('onExpire event')}
          onVerify={(token) => {
            alert('onVerify event');
            setKey(token);
          }}
        />
      </SafeAreaView>
    </>
  );
};

After

const App = () => {
  const size = 'normal';
  const [key, setKey] = useState('<none>');

  const $recaptcha = useRef();

  const handleOpenPress = useCallback(() => {
    const response = await $recaptcha?.current?.getToken();
    if (response?.token) {
    // do some api calls etc 
    } else {
    // do some api calls etc 
      Alert.alert('Title', 'Something went wrong');
    }  }, []);

  const handleClosePress = useCallback(() => {
    $recaptcha.current.close();
  }, []);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeArea}>
        <View
          contentInsetAdjustmentBehavior="automatic"
          style={styles.container}>
          <Button onPress={handleOpenPress} title="Open" />
          <Text>Token: {key}</Text>
          <Text>Size: {size}</Text>
        </View>

        <Recaptcha
          ref={$recaptcha}
          lang="en"
          headerComponent={<Button title="Close" onPress={handleClosePress} />}
          siteKey="6LejsqwZAAAAAGsmSDWH5g09dOyNoGMcanBllKPF"
          baseUrl="http://127.0.0.1"
          size={size}
          theme="light"
          onLoad={() => alert('onLoad event')}
          onClose={() => alert('onClose event')}
          onError={(err) => {
            alert('onError event');
            console.warn(err);
          }}
          onExpire={() => alert('onExpire event')}
          onVerify={(token) => {
            alert('onVerify event');
            setKey(token);
          }}
        />
      </SafeAreaView>
    </>
  );
};

WDYT about above approach ? Feel free to comment.

I am not getting any response

What is the baseUrl prop? The invisible captcha don't seem to work for me. I have added the component but I am not recieving any token.

[chore]: turn loading render optionally

First of all, congrats on this lib.

About this loading when webview returns the Recaptcha token, I think that this should be optional, because when some scenarios we only want to get a token, and not have UI feedback.

What do u think?

I can make this loading render optionally.

https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/src/Recaptcha.js#L183

it's not a bug, only an enhancement.

Facing issue inside modals

I am facing issue while trying to open captcha inside modals. Captcha is not opening.
@douglasjunior Can you help to solve this issue?

Crash occurs on Android app if you press back button immediately after calling .open()

Android app crashes if you press back button instantaneously after calling .open()

There's no logcat. Even the Android Studio logcat is blank.

Chrome Certificate Transparency log list v2 turndown

My app got this warning from playstore:
Firstly, gstatic log_list.json will start returning 404 on 2023-06-07 around 10AM UTC+1.

I assume that this lib uses the above URL? Any solution to be implemented?

Is it possible to add jest tests to sample app?

Is it possible to add jest tests to sample app? I'm trying to add tests in my application, but i can't mock properly this library.

Thanks.

Using "invisible" size blocks the UI

Hey! thanks for this lib thats really works 🚀

I'm using the invisible, but found out that the Modal block the whole UI until it's not visible the token verified.
in the current implementation is there a way to mitigate this behaviour?

Playing around I found out that without rendering the Modal (just the web-view) I can still get it to work

Thanks!

Remove screen fading momentarily to black

Right before the captcha icon loads in the bottom-right corner of the react native app (for both normal and invisible mode), the screen changes momentarily to black. Is there a way to avoid this?

Remove the loading indicator or activity indicator

I am using the configuration below, however, it is not fully invisible. The activity indicator appears on iOS. The StatusBar appears on Android.

I am using the following configuration. modalProps prop not rewrites modalProps props correctly.

                    <View style={{ display: 'none' }}>
                        <Recaptcha
                            style={{ display: 'none' }}
                            ref={recaptcha}
                            siteKey="6LcsO5sUAAAAADhfEx8vFSKFS2nP1DjHjaZN"
                            baseUrl="https://www.trollflix.com"
                            onVerify={onVerify}
                            size="invisible"
                            hideBadge={true}
                            modalProps={{ visible: false, animationType: 'none', transparent: true, supportedOrientations: ['landscape-right'], statusBarTranslucent: true }}
                        />
                    </View>

[Android] Failed to call method WebViewMessageHandler1.onMessage()

Hi!
@douglasjunior I got an error message on Android
[Android] Failed to call method WebViewMessageHandler1.onMessage(). Module has not been registred as callable.

react-native": "0.71.11
"react-native-webview": "^13.8.6"

Any ideas why it happens?

Thank you for your efforts.

How to handle onExpire event

Is it expected to open the recaptcha again with recaptcha.current?.open() on the onExpire callback? If not, how is the expiration usually handled?

TypeError: Cannot read property 'open' of undefined

My code is:

send = () => {
console.log('send!');
this.recaptcha.open(); // Error is showing here to open
}

onVerify = token => {
    console.log('success!', token);
}

onExpire = () => {
    console.warn('expired!');
}

render() {
    return (
        <View>
            <Recaptcha
                ref={ref => this.recaptcha = ref}
                siteKey="<your-recaptcha-public-key>"
                baseUrl="http://my.domain.com"
                onVerify={this.onVerify}
                onExpire={this.onExpire}
                size="invisible"
            />
            <Button title="Send" onPress={this.send} />
        </View>
    )
}

expo sdk42 - onError: ["Error null"]

Hi! First of all! Thank you to share this awesome lib. I was trying to use this at Expo SDK 42 "managed workflow" react-native project linking to firebase. Below are my packages related:

"expo": "^42.0.0",
"expo-firebase-recaptcha": "^1.4.2",
"firebase": "8.2.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-recaptcha-that-works": "^1.1.0",
"react-native-webview": "11.6.2"

Issue: Since I start reCaptcha flow it invokes onError and console warns "Error: null".

Workaround(?): I use your code as a template to locate where would the issue come from. As a junior, in advance, I want to apologize any misunderstood concept by myself. I tried use your concepts of nesting webview starting from render hello world and adding handlers like yours handleMessage and stuck at this problem at function getTemplate when it acts over "template" string variable. The workaround was just to assign de return from replace() to a new that function scoped variable and return. I will appreciate this issue can help others to use this awesome library and skilled ones help us fixing this behaviour, if it was a issue to anyone.

    const getTemplate = useCallback((params) => {
    let output;
    Object.entries(params).forEach(([key, value]) => {
// template = template.replace( ...
      output = template.replace(new RegExp(`{{${key}}}`, 'img'), value); //line change
    });
    return output;
  }, []);

Sorry about my english too. Thank you owner and contributors.

TurboModuleRegistry.getEnforcing(...): 'RNCWebView' could not be found. Verify that a module by this name is registered in the native binary.

• "react-native": "0.64.0",
• "react-native-webview": "^12.0.2",
• "react-native-recaptcha-that-works": "^1.3.2",
• Android
• No its happening when i include this code :
• <Recaptcha
  ref={recaptcha as any}
  siteKey="___"
  baseUrl="_"
  onVerify={onVerify}
  onExpire={onExpire}
  />
• yes

Links in recaptcha web view not working?

• What version of React Native?
  react: "^16.13.1",
  react-native: "^0.63.4"

• What version of React Native WebView?
  react-native-webview": "^10.10.2",
  react-native-modal: "^11.5.6"

• What version of the library?
  react-native-recaptcha-that-works: "^1.3.0"

• iOS/Android version?
  using the iPhone 5s/8/13 simulator + Pixel 3 API 28/Pixel 4 API 30 emulator

• Did the problem happen after updating React Native?
  haven't upgraded RN since installing the library

• Are you using the library for the first time?
  yes

• It's a bug? Provide a link to a minimal reproduction case.

This might be an issue with the Recaptcha from google itself, since it's being injected into a WebView.

For visuals, the recaptcha works for both android & iOS. The redo button also resets the images correctly.

For the audio,

• on android, the audio clip doesn't seem to play even though the button clicks and highlights.
• on iOS, the audio clip plays and also resets when you click on that redo button.

For the info, it seems to take a few clicks for it to pop up, but the links dont work on either platform.

I looked over the source code of the library and it's just injecting the recaptcha from
<script src="https://${validHost}/recaptcha/api.js?hl={{lang}}" async defer></script>
into

<body>
  <div class="container">
    <span id="recaptcha-container"></span>
  </div>
</body> 

I'd expect clicking on the Learn more link (or other similar links in the info messages) to open a web browser in the web view and redirect to said links. But nothing happens on click, or multiple clicks.

Question: Does this tool help prevent bot tasks from tools like browser stack?

Hello. I don't know if this is the right place to ask since there is no discussion tab. Apologies in advance.

I am testing this tool with hidden mode (size=invisible) and it seems to be working fine in the normal/positive cases. The app opens the ReCaptcha and validates it seamlessly.

The problem is testing the negative cases. The QA team with automated testing bots on BrowserStack are able to bypass the captcha verification, and the hidden captcha treats them as real users. (Understandable browser stack might be running on real devices in the backend).

• Was wondering, since this is running in a WebView, how does it deduce user action on a Button outside the WebView?
• Does the hidden captcha detect single button clicks without form elements if automated?

Is this Recaptcha V2 or V3?

I am sorry if this is a duplicate of my other issue #31 , but since it was closed without answer I need to clarify:

Is this library using recaptcha v2 or v3?
You stated in issue 31 that this library doesn't work with recaptcha 3, but then my question remains:

Why is the whole process invisible as intended with V3, unlike V2 that asks for questions?

How come my recapatcha v3 key seems to be working with your plugin; and even the backend v3 checking the score is working as expected when sending your plugin generated token?

So did you mean to say that your library doesn't work with V2 rather than V3?

Thank you for your help!

Jest issue

Here is how I implemented Recaptcha in my app

import React from 'react';
import RecaptchaV3 from 'react-native-recaptcha-that-works';
import {RECAPTCHA_SECRET, RECAPTCHA_DOMAIN} from '@env';

const Recaptcha = React.forwardRef(({onSuccess}, ref) => {
  const onVerifyRecaptcha = token => {
    onSuccess(token);
  };

  const onExpire = () => {
    console.warn('expired!');
  };
  return (
    <RecaptchaV3
      ref={ref}
      siteKey={RECAPTCHA_SECRET}
      baseUrl={RECAPTCHA_DOMAIN}
      onVerify={onVerifyRecaptcha}
      onExpire={onExpire}
      size="normal"
    />
  );
});

export default Recaptcha;

when I run npm test, I get the following error
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Anyone was able to solve this issue or have a mock file for the package.

• What version of React Native?0.66.1
• What version of React Native WebView? 11.2.2
• What version of the library?1.2.0
• iOS/Android version?
• Did the problem happen after updating React Native? no
• Are you using the library for the first time? yes
• It's a bug? Provide a link to a minimal reproduction case.

Vertically center

I tried to vertically center the Recaptcha challenge window but failed so far, it always stuck on top. On some newer iPhone model (looks like start from iPhone 14 Pro Max and above) it even overlap with the camera.

Tried to wrap with SafeAreaView but didn't work since the library is using a modal and it looks like it occupies the whole screen. Any suggestions what is the easiest way to accomplish this? Wonder wrapping the header component, the web view, and the footer component inside a View and then making the style overridable might help.

• What version of React Native? 0.72
• What version of React Native WebView? 13.3.1
• What version of the library? 1.3.2
• iOS/Android version? tested on iOS
• Did the problem happen after updating React Native? No
• Are you using the library for the first time? No
• It's a bug? Provide a link to a minimal reproduction case.

invisible

hi! Can you do this? so that when the property is invisible, the captcha icon in the right, bottom corner is not visible. You can give a webview component, for example, flex = 0. And the background Loading component, darkening. Users are annoyed by this banner

Support for reCAPTCHA Enterprise -

Hi,
Thanks for this package "that just works" :-)

We are considering upgrading to reCAPTCHA Enterprise - does this package support it?

In invisible size, custom domain is not working

It's not loading google Captcha with an invisible size. It's working fine with normal size.

<Recaptcha
                          ref={recaptchaRef}
                          lang="en"
                          siteKey="key"
                          baseUrl={CAPTCHA_CUSTOM_DOMAIN_URL} 
                          size="invisible"
                          theme="light"
                          onLoad={() => console.log('onLoad event')}
                          onClose={() => console.log('onClose event')}
                          onError={(err) => {
                              console.warn('error', err)
                              console.log('onError event')
                          }}
                          onExpire={() => console.log('onExpire event')}
                          onVerify={(token) => {
                              console.log('onVerify event', token)
                              setKey(token)
                          }}
                          hideBadge={true}
                      />

• React Native - 0.67.2
• React Native WebView - 11.25.0
• react-native-recaptcha-that-works - 1.3.2

I really appreciate any help you can provide!

@douglasjunior @codev0 @gin-melodic @MrHertal

Unable to close the modal of Recaptcha

• RN Version 0.66.4
• Webview Version 11.13.1
• Lib Version 1.3.2
• iOS/Android version? iOS 15
• Did the problem happen after updating React Native? No
• Are you using the library for the first time? Yes
  My Modal is not getting closed after the token is received successfully.

  const recaptcha = useRef();
 <Recaptcha
                ref={recaptcha}
                siteKey="my site key"
                baseUrl="my url"
                onVerify={onVerify}
                onExpire={onExpire}
                size="invisible"
            /> 

const send = () => {
   recaptcha.current.open();
}

const onVerify = token => {
    console.log('success!', token);
    recaptcha.current.close();
}

Once on Verify is called. THe modal is not getting closed.

onExpire callback not triggering...

react-native-recaptcha-that-works/src/get-template.js

Line 130 in ac70cfb

'expired-callback': onExpire,

I think it could be because the keys are wrapped in single quotes.. other keys in the same object do not have any quote wrappings. I suspect onError is similar not working. Only onVerify gets triggered because I'm able to get the token.

Verified against the doc's that the keys are correct though: https://developers.google.com/recaptcha/docs/display