### Domain Configuration Example

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Example demonstrating how to configure `recaptchaDomain` and `gstaticDomain` for specific regions.

```APIDOC
## Domain Configuration

Configure `recaptchaDomain` and `gstaticDomain` for use in regions where Google services require alternative domains. The `baseUrl` must match a domain registered in your reCAPTCHA console.

```tsx
import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const GlobalRecaptchaExample = () => {
  const recaptcha = useRef<RecaptchaRef | null>(null);

  return (
    <View>
      <Button
        title="Verify (China)"
        onPress={() => recaptcha.current?.open()}
      />
      <Recaptcha
        ref={recaptcha}
        siteKey="your-site-key"
        baseUrl="http://your-domain.cn"
        recaptchaDomain="recaptcha.net"
        gstaticDomain="www.recaptcha.net"
        lang="zh-CN"
        onVerify={(token) => console.log('Verified:', token)}
      />
    </View>
  );
};
```
```

--------------------------------

### Install react-native-recaptcha-that-works with npm

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Install the library and its peer dependency react-native-webview using npm.

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

--------------------------------

### Install react-native-recaptcha-that-works with Yarn

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Install the library and its peer dependency react-native-webview using Yarn.

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

--------------------------------

### Basic Recaptcha Component Setup

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Configure the reCAPTCHA component with essential site key and base URL. Ensure these match your reCAPTCHA v2 setup in the Google Cloud console.

```jsx
<Recaptcha 
   siteKey="abc123"
   baseUrl="http://mysite.com"
/>
```

--------------------------------

### Install react-native-recaptcha-that-works

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Install the package and its peer dependency react-native-webview using either yarn or npm.

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

```bash
npm install --save react-native-recaptcha-that-works react-native-webview
```

--------------------------------

### TypeScript Usage Example for reCAPTCHA

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Integrate the reCAPTCHA component in a React Native application using TypeScript. This example includes type definitions for the ref and event handlers. Ensure to replace placeholder values for siteKey and baseUrl.

```tsx
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>
    );
};

```

--------------------------------

### JavaScript Usage Example for reCAPTCHA

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Integrate the reCAPTCHA component in a React Native application using JavaScript. Ensure to replace placeholder values for siteKey and baseUrl. The 'invisible' size is configured here.

```jsx
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>
    );
}

```

--------------------------------

### Troubleshooting

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Common issues and their solutions.

```APIDOC
## Troubleshooting

### WebView not loading on iOS
This can be a bug in `react-native-webview`.

**Issues**:
- https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/65
- https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/69

**PRs**:
- https://github.com/react-native-webview/react-native-webview/pull/3615
- https://github.com/react-native-webview/react-native-webview/pull/3880

### reCAPTCHA `siteKey` or `baseUrl` invalid
This package utilizes the web version of **reCAPTCHA v2**. Therefore, for the `siteKey` prop, you must use the **site public key** from the reCAPTCHA console.

Create a new reCAPTCHA v2 key here: https://www.google.com/recaptcha/admin/create

The `baseUrl` prop must be a valid domain set in the **Domains** section of your reCAPTCHA console.

**Example Usage**:
```jsx
<Recaptcha 
   siteKey="abc123"
   baseUrl="http://mysite.com"
/>
```
```

--------------------------------

### Recaptcha Component Props

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Reference for all available component props, including their types, defaults, and descriptions.

```APIDOC
## RecaptchaProps Reference

Complete TypeScript interface for all available component props with their types, defaults, and descriptions.

```typescript
type RecaptchaProps = {
  // Required props
  siteKey: string;         // Your Web reCAPTCHA site key
  baseUrl: string;         // Domain configured in reCAPTCHA console
  onVerify: (token: string) => void; // Callback with verification token

  // Optional size and theme
  size?: 'invisible' | 'normal' | 'compact'; // Default: 'normal'
  theme?: 'dark' | 'light';                   // Default: 'light'
  lang?: string;                              // Language code (auto-detected if not set)

  // Optional callbacks
  onLoad?: () => void;           // Fired when reCAPTCHA is ready
  onExpire?: () => void;         // Fired when token expires
  onError?: (error: any) => void; // Fired on errors
  onClose?: () => void;          // Fired when modal closes

  // Optional customization
  headerComponent?: ReactNode;   // Component above WebView
  footerComponent?: ReactNode;   // Component below WebView
  loadingComponent?: ReactNode;  // Custom loading indicator
  style?: StyleProp<ViewStyle>;  // WebView container style
  modalProps?: ModalProps;       // Override Modal props
  webViewProps?: WebViewProps;   // Override WebView props

  // Optional domain configuration
  recaptchaDomain?: string;      // Default: 'www.google.com'
  gstaticDomain?: string;        // Default: 'www.gstatic.com'
  hideBadge?: boolean;           // Default: false

  // Enterprise features
  enterprise?: boolean;          // Default: false
  action?: string;               // Action name for Enterprise
};

type RecaptchaRef = {
  open(): void;   // Opens the reCAPTCHA modal
  close(): void;  // Closes the reCAPTCHA modal
};
```
```

--------------------------------

### Implement Invisible reCAPTCHA

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Use size="invisible" to automatically trigger the challenge when open() is called. The onVerify callback fires immediately if the user is verified, otherwise a visual challenge appears. The badge can be hidden with hideBadge={true}.

```tsx
import React, { useRef, useState } from 'react';
import { View, Button, Text } from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const InvisibleRecaptchaExample = () => {
  const recaptcha = useRef<RecaptchaRef | null>(null);
  const [isVerified, setIsVerified] = useState(false);

  const handleSubmitForm = () => {
    // Trigger invisible reCAPTCHA before form submission
    recaptcha.current?.open();
  };

  const handleVerify = (token: string) => {
    setIsVerified(true);
    // Now proceed with form submission
    submitFormWithToken(token);
  };

  const submitFormWithToken = async (token: string) => {
    await fetch('https://api.example.com/submit', {
      method: 'POST',
      body: JSON.stringify({ recaptchaToken: token, formData: {} }),
    });
  };

  return (
    <View>
      <Button title="Submit Form" onPress={handleSubmitForm} />
      {isVerified && <Text>Verified!</Text>}
      <Recaptcha
        ref={recaptcha}
        siteKey="your-invisible-site-key"
        baseUrl="http://your-domain.com"
        size="invisible"
        hideBadge={true}
        onVerify={handleVerify}
        onError={(err) => console.error('Verification failed:', err)}
      />
      <Text style={{ fontSize: 10 }}>
        Protected by reCAPTCHA. Privacy Policy and Terms of Service apply.
      </Text>
    </View>
  );
};

```

--------------------------------

### MIT License

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

The MIT License is a permissive free software license originating at the Massachusetts Institute of Technology. It allows users to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software.

```plaintext
The MIT License (MIT)

Copyright (c) 2020 Douglas Nassif Roma Junior
```

--------------------------------

### Component Props

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Configuration options for the reCAPTCHA component.

```APIDOC
## Component Props

### `headerComponent`
- **Type**: `React Element`
- **Description**: A component to render on top of the Modal.

### `footerComponent`
- **Type**: `React Element`
- **Description**: A component to render on the bottom of the Modal.

### `loadingComponent`
- **Type**: `React Element`
- **Description**: A custom loading component.

### `style`
- **Type**: `ViewStyle`
- **Description**: Customize default style such as background color.

### `modalProps`
- **Type**: `ModalProps`
- **Description**: Override the Modal props.

### `webViewProps`
- **Type**: `WebViewProps`
- **Description**: Override the WebView props.

### `lang`
- **Type**: `string`
- **Description**: Language code for the reCAPTCHA widget. If not set, the device language is used.

### `siteKey`
- **Type**: `string`
- **Required**: Yes
- **Description**: Your Web reCAPTCHA site key. Must be a Web key, not for Android.

### `baseUrl`
- **Type**: `string`
- **Required**: Yes
- **Description**: The URL (domain) configured in the reCAPTCHA console setup. Example: `http://my.domain.com`.

### `size`
- **Type**: `'invisible'`, `'normal'`, or `'compact'`
- **Default**: `'normal'`
- **Description**: The size of the reCAPTCHA widget.

### `theme`
- **Type**: `'dark'` or `'light'`
- **Default**: `'light'`
- **Description**: The color theme of the widget.

### `onLoad`
- **Type**: `function()`
- **Description**: A callback function executed when the reCAPTCHA is ready to use.

### `onVerify`
- **Type**: `function(token)`
- **Required**: Yes
- **Description**: A callback function executed when the user submits a successful response. The reCAPTCHA response token is passed to the callback.

### `onExpire`
- **Type**: `function()`
- **Description**: A callback function executed when the reCAPTCHA response expires and the user needs to re-verify. Only works if the webview remains open after `onVerify` has been called for a long time.

### `onError`
- **Type**: `function(error)`
- **Description**: A callback function executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If specified, you are responsible for informing the user to retry.

### `onClose`
- **Type**: `function()`
- **Description**: A callback function executed when the Modal is closed.

### `recaptchaDomain`
- **Type**: `string`
- **Default**: `www.google.com`
- **Description**: The host name of the reCAPTCHA valid API. See detail: https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally.

### `gstaticDomain`
- **Type**: `string`
- **Default**: `www.gstatic.com`
- **Description**: Customize reCAPTCHA `gstatic` host.

### `hideBadge`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: 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: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed.

### `enterprise`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Use the new reCAPTCHA Enterprise API. Note: for enterprise, you need to choose the `size` when creating the `siteKey`.

### `action`
- **Type**: `string`
- **Description**: An additional parameter for specifying the action name associated with the protected element for reCAPTCHA Enterprise API.

```

--------------------------------

### Configure reCAPTCHA for Specific Regions

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Use `recaptchaDomain` and `gstaticDomain` for regions where Google services require alternative domains. Ensure `baseUrl` matches a domain registered in your reCAPTCHA console.

```tsx
import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const GlobalRecaptchaExample = () => {
  const recaptcha = useRef<RecaptchaRef | null>(null);

  return (
    <View>
      <Button
        title="Verify (China)"
        onPress={() => recaptcha.current?.open()}
      />
      <Recaptcha
        ref={recaptcha}
        siteKey="your-site-key"
        baseUrl="http://your-domain.cn"
        recaptchaDomain="recaptcha.net"
        gstaticDomain="www.recaptcha.net"
        lang="zh-CN"
        onVerify={(token) => console.log('Verified:', token)}
      />
    </View>
  );
};

```

--------------------------------

### Component Methods

Source: https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/README.md

Available methods to control the reCAPTCHA component.

```APIDOC
## Component Methods

### `open`
- **Type**: `function`
- **Description**: Open the reCAPTCHA Modal.

### `close`
- **Function**: `close`
- **Description**: Close the reCAPTCHA Modal.

**Note**: If using `size="invisible"`, the challenge runs automatically when `open` is called.
```

--------------------------------

### RecaptchaRef Methods for Control

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Utilize the `open()` and `close()` methods exposed by the `RecaptchaRef` to programmatically control the reCAPTCHA modal's visibility.

```tsx
import React, { useRef, useCallback } from 'react';
import { View, Button } from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const VerificationScreen = () => {
  const recaptcha = useRef<RecaptchaRef | null>(null);

  // Open the reCAPTCHA modal
  const startVerification = useCallback(() => {
    recaptcha.current?.open();
  }, []);

  // Programmatically close the modal
  const cancelVerification = useCallback(() => {
    recaptcha.current?.close();
  }, []);

  return (
    <View>
      <Button title="Start Verification" onPress={startVerification} />
      <Button title="Cancel" onPress={cancelVerification} />
      <Recaptcha
        ref={recaptcha}
        siteKey="your-site-key"
        baseUrl="http://your-domain.com"
        onVerify={(token) => console.log('Token:', token)}
      />
    </View>
  );
};

```

--------------------------------

### Customize reCAPTCHA Styling and Components

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Customize the modal appearance using style, headerComponent, footerComponent, and loadingComponent props. Underlying Modal and WebView behavior can be overridden with modalProps and webViewProps.

```tsx
import React, { useRef } from 'react';
import {
  View,
  Button,
  Text,
  ActivityIndicator,
  StyleSheet,
} from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const styles = StyleSheet.create({
  recaptchaStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
  },
  header: {
    backgroundColor: '#fff',
    padding: 16,
    alignItems: 'flex-end',
  },
  footer: {
    backgroundColor: '#fff',
    padding: 8,
    alignItems: 'center',
  },
});

const CustomStyledRecaptcha = () => {
  const recaptcha = useRef<RecaptchaRef | null>(null);

  return (
    <View>
      <Button
        title="Verify"
        onPress={() => recaptcha.current?.open()}
      />
      <Recaptcha
        ref={recaptcha}
        siteKey="your-site-key"
        baseUrl="http://your-domain.com"
        size="normal"
        theme="dark"
        lang="en"
        style={styles.recaptchaStyle}
        headerComponent={
          <View style={styles.header}>
            <Button
              title="Close"
              onPress={() => recaptcha.current?.close()}
            />
          </View>
        }
        footerComponent={
          <View style={styles.footer}>
            <Text>Complete the challenge above</Text>
          </View>
        }
        loadingComponent={
          <ActivityIndicator size="large" color="#4285F4" />
        }
        modalProps={{
          animationType: 'fade',
          statusBarTranslucent: true,
        }}
        webViewProps={{
          incognito: true,
        }}
        onVerify={(token) => console.log('Token:', token)}
      />
    </View>
  );
};

```

--------------------------------

### Implement reCAPTCHA Enterprise

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Enable reCAPTCHA Enterprise features by setting enterprise={true} and optionally specifying an action parameter. This mode uses Google Cloud's reCAPTCHA Enterprise API for risk scores and enhanced bot detection.

```tsx
import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const EnterpriseRecaptchaExample = () => {
  const recaptcha = useRef<RecaptchaRef | null>(null);

  const handleVerify = (token: string) => {
    // Send token to backend for Enterprise assessment
    fetch('https://api.example.com/assess', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        token,
        expectedAction: 'login',
      }),
    });
  };

  return (
    <View>
      <Button
        title="Login"
        onPress={() => recaptcha.current?.open()}
      />
      <Recaptcha
        ref={recaptcha}
        siteKey="your-enterprise-site-key"
        baseUrl="http://your-domain.com"
        enterprise={true}
        action="login"
        size="invisible"
        onVerify={handleVerify}
        onError={(err) => console.error('Enterprise error:', err)}
      />
    </View>
  );
};

```

--------------------------------

### RecaptchaProps TypeScript Interface

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Defines all available props for the Recaptcha component, including required keys, optional settings for size, theme, language, callbacks, and domain configurations.

```typescript
type RecaptchaProps = {
  // Required props
  siteKey: string;         // Your Web reCAPTCHA site key
  baseUrl: string;         // Domain configured in reCAPTCHA console
  onVerify: (token: string) => void; // Callback with verification token

  // Optional size and theme
  size?: 'invisible' | 'normal' | 'compact'; // Default: 'normal'
  theme?: 'dark' | 'light';                   // Default: 'light'
  lang?: string;                              // Language code (auto-detected if not set)

  // Optional callbacks
  onLoad?: () => void;           // Fired when reCAPTCHA is ready
  onExpire?: () => void;         // Fired when token expires
  onError?: (error: any) => void; // Fired on errors
  onClose?: () => void;          // Fired when modal closes

  // Optional customization
  headerComponent?: ReactNode;   // Component above WebView
  footerComponent?: ReactNode;   // Component below WebView
  loadingComponent?: ReactNode;  // Custom loading indicator
  style?: StyleProp<ViewStyle>;  // WebView container style
  modalProps?: ModalProps;       // Override Modal props
  webViewProps?: WebViewProps;   // Override WebView props

  // Optional domain configuration
  recaptchaDomain?: string;      // Default: 'www.google.com'
  gstaticDomain?: string;        // Default: 'www.gstatic.com'
  hideBadge?: boolean;           // Default: false

  // Enterprise features
  enterprise?: boolean;          // Default: false
  action?: string;               // Action name for Enterprise
};

type RecaptchaRef = {
  open(): void;   // Opens the reCAPTCHA modal
  close(): void;  // Closes the reCAPTCHA modal
};

```

--------------------------------

### Recaptcha Component Usage

Source: https://context7.com/douglasjunior/react-native-recaptcha-that-works/llms.txt

Integrate the Recaptcha component into your React Native application. Control its visibility and handle verification callbacks using a ref.

```tsx
import React, { useRef } from 'react';
import { View, Button, Alert } from 'react-native';
import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';

const App = () => {
  const recaptchaRef = useRef<RecaptchaRef | null>(null);

  const handleVerify = (token: string) => {
    console.log('Verification token:', token);
    // Send token to your backend for verification
    fetch('https://your-api.com/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });
  };

  return (
    <View>
      <Button
        title="Verify Human"
        onPress={() => recaptchaRef.current?.open()}
      />
      <Recaptcha
        ref={recaptchaRef}
        siteKey="your-recaptcha-site-key"
        baseUrl="http://your-domain.com"
        size="normal"
        theme="light"
        onVerify={handleVerify}
        onExpire={() => console.warn('Token expired')}
        onError={(err) => console.error('reCAPTCHA error:', err)}
        onClose={() => console.log('Modal closed')}
        onLoad={() => console.log('reCAPTCHA loaded')}
      />
    </View>
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.