Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-turnstile) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-turnstile

A wrapper for Cloudflare Turnstile for use with React Native app.

How It Works

The cookies used by CloudFlare Turnstile are incompatible with react-native-webview. This package circumvents that by loading a tiny Next.js app running CloudFlare that creates an interface between a react-native-webview component and the Turnstile widget.

IMPORTANT: You must add the domain turnstile.1337707.xyz to your Turnstile domains list. This is the hosted instance on CloudFlare.

Installation

npm i react-native-turnstile react-native-webview

If you're running Expo, then:

expo install react-native-webview
npm i react-native-turnstile

Usage

import { useRef } from "react";
import ReactNativeTurnstile, { resetTurnsile } from "react-native-turnstile";

// ...

// Programmatic access example:
const turnstileResetRef = useRef();

const result = await fetch('/path/to/some/api');
if (!result.ok) {
  throw new Error(`Request failed with code ${result.status}`);
  resetTurnstile(turnstileResetRef);
}


function TurnstileWidget() {
  return (
    <ReactNativeTurnstile
        sitekey="xxxxxxxxxxxxxxxxxxx"
        onVerify={token => console.log(token)}
        resetRef={resetTurnstileRef}
        style={{ marginLeft: 'auto', marginRight: 'auto' }}
    />
  );
}

Turnstile tokens expire after 5 minutes, to automatically reset the challenge once they expire, set the autoResetOnExpire prop to true or reset the widget yourself using the onExpire callback.

Documentation

ReactNativeTurnstile takes the following arguments:

name	type	description
sitekey	`string`	sitekey of your website (REQUIRED)
action?	`string`	-
cData?	`string`	-
theme?	`string`	one of "light", "dark", "auto"
size?	`string`	one of "compact", "normal"
tabIndex?	`number`	-
responseField?	`boolean`	controls generation of `<input />` element
responseFieldName?	`string`	changes the name of `<input />` element
retry?	`string`	one of "auto", "never"
retryInterval?	`number`	interval of retries in ms
autoResetOnExpire?	`boolean`	automatically reset the widget when the token expires
id?	`string`	id of the div
resetRef?	`TurnstileResetRef`	ref in which to inject the reset()
className?	`string`	only provided to facilitate NativeWind classes
style?	`StyleProp<ViewStyle>`	passed to the RN View container

And the following callbacks:

name	arguments	description
onVerify?	token	called when challenge is passed (REQUIRED)
onLoad?	widgetId	called when the widget is loaded
onError?	error	called when an error occurs
onExpire?	token	called when the token expires
onTimeout?	-	called when the challenge expires

For more details on what each argument does, see the Cloudflare Documentation.