Skip to content
Implement Google recaptcha v2 in React Native (both Android an iOS)
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
GoogleReCaptcha.js
LICENSE add license file Aug 15, 2019
README.md
index.js add README.md Aug 15, 2019
package.json

README.md

react-native-google-recaptcha-v2

Implement Google recaptcha v2 in React Native (both Android an iOS)

Add it to your project

  1. Insall package
  • Using NPM npm install react-native-google-recaptcha-v2
  • Using Yarn yarn add react-native-google-recaptcha-v2
  1. Import package import ConfirmGoogleCaptcha from 'react-native-google-recaptcha-v2';

Usage

Check demo in Snack link

import React from 'react';
import ConfirmGoogleCaptcha from 'react-native-google-recaptcha-v2';
const siteKey = 'you_site_key';
const baseUrl = 'base_url';
class App extends React.Component  {
    onMessage = event => {
         if (event && event.nativeEvent.data) {
            if (['cancel', 'error', 'expired'].includes(event.nativeEvent.data)) {
                this.captchaForm.hide();
                return;
            } else {
                console.log('Verified code from Google', event.nativeEvent.data);
                setTimeout(() => {
                    this.captchaForm.hide();
                    // do what ever you want here
                }, 1500);
            }
        }
    };
    render() {
        return (
            <View style={styles.container}>
                <ConfirmGoogleCaptcha
                    ref={_ref => this.captchaForm = _ref}
                    siteKey={siteKey}
                    baseUrl={baseUrl}
                    languageCode='en'
                    onMessage={this.onMessage}
                />
                <Button
                    onPress={() => {
                        this.captchaForm.show();
                    }}
                    title='Click'
                    style={{ width: 120, backgroundColor: 'darkviolet' }}
                    textColor='#fff'
                />
            </View>
        );
    }
}
DEMO

iOS Android

Props

  • siteKey (String) - The site key of the Google Recaptcha.
  • baseUrl (String) The url domain defined on your Google Recaptcha.
  • onMessage (Function) - The callback function after received response, error of Google captcha or when user cancel
  • languageCode (String) - Language to be display of captcha form. Can be found at this link

MIT Licensed

You can’t perform that action at this time.