rn-google-recaptcha-v2
Implement Google recaptcha v2 in React Native (both Android and iOS)
Our package uses react-native-webview
under the hood to bring you the functionality of auto-resizable google recaptcha v2 using webview. This solves the problem of resizing webview content when using google recaptcha v2.
Sample App
A Sample App is available to help with sample usage and debugging issues.
Installation
1. Add rn-google-recaptcha-v2 to your project
$ yarn add rn-google-recaptcha-v2
For npm use
$ npm install --save rn-google-recaptcha-v2
2. Add react-native-webview dependency to your project
Follow the instructions on the React Native WebView Getting Started Guide to add react-native-webview
dependency to your project
Usage
;;; const siteKey = 'you_site_key';const baseUrl = 'base_url'; { superprops; thisstate = recaptchaViewHeight: 90 //initial default height ; } { const recaptchaViewHeight = thisstate; return <SafeAreaView style=flex:1> <GoogleReCaptcha style= height: recaptchaViewHeight siteKey=siteKey url=baseUrl languageCode="en" onMessage=thisonRecaptchaEvent /> </SafeAreaView> ; } { if event && eventnativeEventdata const data = ; if data let params = JSON; let recaptchaViewHeight = paramsvisibility === 'visible' ? paramsheight : 90; this; else if 'cancel' 'error' 'expired' return; else console; this; };
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 cancellanguageCode
(String) - Language to be display of captcha form. Can be found at this link
License
MIT