react-native-recaptcha-that-works

The Recaptcha component is used to trigger the reCAPTCHA flow. You should use a useRef hook to access the component's methods, specifically .open() to trigger the challenge.

JavaScript Example

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 = () => {
        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>
    );
}

TypeScript Example

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 = () => {
        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>
    );
};

The Recaptcha component accepts the following props:

The Recaptcha component is the primary interface for integrating reCAPTCHA into your React Native application. It renders a Modal containing a WebView to handle the reCAPTCHA flow.

Required Props

• siteKey: Your Web reCAPTCHA site key. Note: You must use the Web key, not the Android key.
• baseUrl: The URL (domain) configured in your reCAPTCHA console setup (e.g., http://my.domain.com).
• onVerify: A callback function executed when the user successfully submits a response. It receives the reCAPTCHA response token as a string.

Optional Props

• size: The size of the widget. Options: 'normal' (default) or 'invisible'.
• theme: The color theme. Options: 'light' (default) or 'dark'.
• lang: Language code for the reCAPTCHA interface.
• enterprise: Boolean to enable the reCAPTCHA Enterprise API.
• action: An additional parameter for specifying the action name (required for reCAPTCHA Enterprise).
• hideBadge: Boolean to hide the reCAPTCHA badge (only applicable when size='invisible').
• headerComponent / footerComponent: Custom React components to render at the top or bottom of the Modal.
• loadingComponent: A custom component to show while the reCAPTCHA is loading.
• modalProps: Overrides for the underlying React Native Modal component.
• webViewProps: Overrides for the underlying react-native-webview component.
• onLoad: Callback executed when reCAPTCHA is ready.
• onExpire: Callback executed when the response expires.
• onError: Callback executed when a network or other error occurs.
• onClose: Callback executed when the Modal is closed.
• recaptchaDomain: The host name of the reCAPTCHA API. Default: www.google.com.
• gstaticDomain: Customize the gstatic host. Default: www.gstatic.com.

<Recaptcha
  siteKey="YOUR_SITE_KEY"
  baseUrl="https://yourdomain.com"
  onVerify={(token) => {
    console.log("Verification token:", token);
  }}
/>