@valture/react-native-recaptcha-v3 NPM

react-native-recaptcha-v3

A React Native component for seamless integration of Google reCAPTCHA v3 into React Native applications.

Installation

Prerequisites

This library depends on react-native-webview. Ensure it’s already installed in your project. If not, install it along with the package:

# Install both packages if WebView is not installed
npm install @valture/react-native-recaptcha-v3 react-native-webview
# or
yarn add @valture/react-native-recaptcha-v3 react-native-webview

If react-native-webview is already installed:

npm install @valture/react-native-recaptcha-v3
# or
yarn add @valture/react-native-recaptcha-v3

Usage

import ReCaptcha, { GoogleRecaptchaRefAttributes } from '@valture/react-native-recaptcha-v3';
import React, { useRef } from 'react';

const YourComponent = () => {
  const recaptchaRef = useRef<GoogleRecaptchaRefAttributes>(null);

  const handleVerify = async () => {
    try {
      const token = await recaptchaRef.current?.getToken('your_action');
      console.log('reCAPTCHA token:', token);
      // Send token to your backend for verification
    } catch (error) {
      console.error('reCAPTCHA error:', error);
    }
  };

  return (
    <ReCaptcha
      ref={recaptchaRef}
      siteKey="your_site_key_here"
      baseUrl="your_domain_here"
      onVerify={(token) => console.log('Verified:', token)}
      onError={(error) => console.error('Error:', error)}
    />
  );
};

Props

Prop	Type	Required	Description
`siteKey`	`string`	Yes	Your Google reCAPTCHA v3 site key.
`baseUrl`	`string`	Yes	Your domain URL (must match reCAPTCHA configuration).
`action`	`string`	No	Custom action name (default: `'submit'`).
`onVerify`	`function`	No	Callback function when verification succeeds.
`onError`	`function`	No	Callback function when verification fails.
`style`	`ViewStyle`	No	Custom styles for the WebView.
`containerStyle`	`ViewStyle`	No	Custom styles for the container.

Methods

`getToken(action?: string): Promise<string | null>`

Retrieves a new reCAPTCHA token for the given action.
Returns a Promise that resolves with the token string.

Example:

const token = await recaptchaRef.current?.getToken('custom_action');
console.log('Token:', token);

Full Example

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import ReCaptcha, { GoogleRecaptchaRefAttributes } from '@valture/react-native-recaptcha-v3';

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

  const handleSubmit = async () => {
    try {
      const token = await recaptchaRef.current?.getToken('login');
      console.log('Token:', token);
      // Send token to your backend
    } catch (error) {
      console.error('reCAPTCHA error:', error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <ReCaptcha
        ref={recaptchaRef}
        siteKey="your_site_key_here"
        baseUrl="https://your-domain.com"
        onVerify={(token) => console.log('Verified:', token)}
        onError={(error) => console.error('Error:', error)}
        containerStyle={{position: 'absolute', backfaceVisibility: 'hidden', opacity: 0}}  // to make it invisible
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

Troubleshooting

Ensure your siteKey matches the key configured on the Google reCAPTCHA Admin Console.
baseUrl should correspond to the domain registered with Google reCAPTCHA.