@cbarroso/react_native_recaptcha

About

This is a React-Native Recaptcha component that is customizable. Currently only recaptcha v2 is available.

Installation

npm i react-native-recaptcha

or

yarn add react-native-recaptcha

⚠ Important

This component uses react-native-webview, so please run the following installation:

npm i react-native-webview

or

yarn add react-native-webview

Usage

import React, {useState} from 'react';
import {Recaptcha} from 'react-native-recaptcha';

interface CaptchaRefProps {
  hide: () => void;
  show: () => void;
}

export default function App() {
  const [captcha, setCaptcha] = useState('');
  const [showCaptcha, setShowCaptcha] = useState(false);

  const captchaRef = useRef < CaptchaRefProps > null;

  const onMessage = (event: string) => {
    if (event !== 'expired' && event !== 'error') {
      if (event.includes('Timeout')) {
        captchaRef?.current?.show();
      } else if (['cancel', 'error', 'expired'].includes(event)) {
        captchaRef.current?.hide();
        setCaptcha('');
        setShowCaptcha(false);
      } else {
        setCaptcha(event);
        setShowCaptcha(false);
        setTimeout(() => {
          captchaRef?.current?.hide();
        }, 1500);
      }
    } else {
      setLoading(false);
      captchaRef?.current?.hide();
      setCaptcha('');
      setShowCaptcha(false);
    }
  };

  return (
    <View>
      {showCaptcha && (
        <Recaptcha
          ref={captchaRef}
          onCancel={onCancel}
          siteKey={SITE_KEY}
          baseUrl={YOUR_URL}
          languageCode="pt-BR"
          cancelButtonText="Cancelar"
          onMessage={onMessage}
        />
      )}
    </View>
  );
}