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.
A Sample App is available to help with sample usage and debugging issues.
$ yarn add rn-google-recaptcha-v2
For npm use
$ npm install --save rn-google-recaptcha-v2
Follow the instructions on the React Native WebView Getting Started Guide to add react-native-webview
dependency to your project
import React, { Component } from 'react';
import { SafeAreaView } from 'react-native';
import GoogleReCaptcha from 'rn-google-recaptcha-v2';
const siteKey = 'you_site_key';
const baseUrl = 'base_url';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
recaptchaViewHeight: 90 //initial default height
};
}
render() {
const { recaptchaViewHeight } = this.state;
return (
<SafeAreaView style={{flex:1}}>
<GoogleReCaptcha
style={{ height: recaptchaViewHeight }}
siteKey={siteKey}
url={baseUrl}
languageCode="en"
onMessage={this.onRecaptchaEvent} />
</SafeAreaView>
);
}
onRecaptchaEvent = event => {
if (event && event.nativeEvent.data) {
const data = decodeURIComponent(
decodeURIComponent(event.nativeEvent.data),
);
if (data.startsWith('CONTENT_PARAMS:')) {
let params = JSON.parse(data.substring(15));
let recaptchaViewHeight = params.visibility === 'visible' ? params.height : 90;
this.setState({ recaptchaViewHeight });
} else if (['cancel', 'error', 'expired'].includes(data)) {
return;
} else {
console.log('Verified code from Google', data);
this.setState({ recaptchaToken: data });
}
}
};
}
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 linkMIT