reCAPTCHA for React Native (Android and iOS)


A reCAPTCHA library for React Native (Android and iOS). Fully tested.

---

A normal widget.

---

A invisible widget.

---

A compact widget.

---

Install

$3

``bash
yarn add react-native-webview react-native-google-recaptcha
`

Or

`bash
npm i react-native-webview react-native-google-recaptcha
`

See the react-native-webview Getting Started Guide.

Import structure

`typescript
import GoogleRecaptcha, {
// Enums
GoogleRecaptchaSize, // Size enum: such GoogleRecaptchaSize.INVISIBLE
GoogleRecaptchaTheme, // Theme enum: such GoogleRecaptchaTheme.DARK
GoogleRecaptchaActionName, // Action name enum: such GoogleRecaptchaActionName.LOGIN
DEFAULT_GSTATIC_DOMAIN,
DEFAULT_RECAPTCHA_DOMAIN,
// Types (only typescript)
GoogleRecaptchaToken,
GoogleRecaptchaProps,
GoogleRecaptchaBaseProps,
GoogleRecaptchaRefAttributes
} from 'react-native-google-recaptcha'
`

Usage

With callback onVerify() method:

`tsx
import React from 'react'
import { View, Button } from 'react-native'

import GoogleRecaptcha, {
GoogleRecaptchaToken,
GoogleRecaptchaRefAttributes
} from 'react-native-google-recaptcha'

const App: React.FC = () => {
const recaptchaRef = React.useRef(null)

const handleSend = () => {
recaptchaRef.current?.open()
}

const handleVerify = (token: GoogleRecaptchaToken) => {
console.log('Recaptcha Token:', token)
}

const handleError = (error: unknown) => {
console.error('Recaptcha Error:', error)
}

return (

ref={recaptchaRef}
baseUrl="http://localhost:3000"
onError={handleError}
onVerify={handleVerify}
siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
/>



)
}
`

With async getToken() method:

`tsx
import React from 'react'
import { View, Button } from 'react-native'

import GoogleRecaptcha, {
GoogleRecaptchaSize,
GoogleRecaptchaToken,
GoogleRecaptchaRefAttributes
} from 'react-native-google-recaptcha'

const App: React.FC = () => {
const recaptchaRef = React.useRef(null)

const handleSend = async () => {
try {
const token = await recaptchaRef.current?.getToken()

console.log('Recaptcha Token:', token)
} catch (e) {
console.error('Recaptcha Error:', e)
}
}

return (

ref={recaptchaRef}
// size={GoogleRecaptchaSize.INVISIBLE}
baseUrl="http://localhost:3000"
siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
/>



)
}
`

For more details, see the Sample Project.

Test

Clone

`shell
git clone https://github.com/bilaleren/react-native-google-recaptcha.git
`

Then

`shell
cd react-native-google-recaptcha && yarn install && yarn lint && yarn test
`

Props

See prop types GoogleRecaptchaProps

Methods

See method types GoogleRecaptchaRefAttributes

Note: If using size="invisible", then challenge run automatically when open` is called.

reCAPTCHA v2 docs

- I'm not a robot
- Invisible

reCAPTCHA Enterprise docs

- Overview
- Using features

License

This project is licensed under the terms of the
MIT license.