Skip to content

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

License

Notifications You must be signed in to change notification settings

xuho/react-native-google-recaptcha-v2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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';

Dependencies

  1. react-native-modal

  2. react-native-webview

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

Note

You can import GoogleReCaptcha from 'react-native-google-recaptcha-v2/GoogleReCaptcha'; to customize UI by yourself

DEMO

iOS

iOS

Android

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
  • cancelButtonText (String) - Title of cancel button.

License

MIT Licensed

Support me

Buy Me A Coffee

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published