https://github.com/bilaleren/react-native-google-recaptcha
A reCAPTCHA library for React Native (Android and iOS).
https://github.com/bilaleren/react-native-google-recaptcha
google-recaptcha react-native react-native-google-recaptcha react-native-recaptcha
Last synced: about 1 year ago
JSON representation
A reCAPTCHA library for React Native (Android and iOS).
- Host: GitHub
- URL: https://github.com/bilaleren/react-native-google-recaptcha
- Owner: bilaleren
- License: mit
- Created: 2022-12-07T13:43:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-17T11:46:45.000Z (over 1 year ago)
- Last Synced: 2025-04-06T10:44:06.287Z (over 1 year ago)
- Topics: google-recaptcha, react-native, react-native-google-recaptcha, react-native-recaptcha
- Language: TypeScript
- Homepage:
- Size: 8.8 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# reCAPTCHA for React Native (Android and iOS)
[](https://www.npmjs.com/package/react-native-google-recaptcha)
A reCAPTCHA library for React Native (Android and iOS). Fully tested.
---
A normal widget.
Normal
---
A invisible widget.
Invisible
---
A compact widget.
Compact
---
## Install
### Install the module
```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](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md).
## 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 (
)
}
```
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 (
)
}
```
For more details, see the [Sample Project](https://github.com/bilaleren/react-native-google-recaptcha/blob/master/Example/App.tsx).
## 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](https://github.com/bilaleren/react-native-google-recaptcha/blob/master/src/GoogleRecaptcha.tsx#L48)
## Methods
See method types [GoogleRecaptchaRefAttributes](https://github.com/bilaleren/react-native-google-recaptcha/blob/master/src/GoogleRecaptcha.tsx#L22)
Note: If using `size="invisible"`, then challenge run automatically when `open` is called.
## reCAPTCHA v2 docs
- [I'm not a robot](https://developers.google.com/recaptcha/docs/display)
- [Invisible](https://developers.google.com/recaptcha/docs/invisible)
## reCAPTCHA Enterprise docs
- [Overview](https://cloud.google.com/recaptcha-enterprise/docs/)
- [Using features](https://cloud.google.com/recaptcha-enterprise/docs/using-features)
## License
This project is licensed under the terms of the
[MIT license](https://github.com/bilaleren/react-native-google-recaptcha/blob/master/LICENCE).