React Native + Fetch
The React Native Fetch SDK protects requests made with the Fetch API by your React Native application.
Since version 3.0.0, it is built on top of the CoreDataDome SDK for React Native that handles native code, cookie storage, and challenge display.
You can find documentation for previous major versions of the SDK on the v2 page and the v1 page.
Requirements
- React Native: 0.85+ with New Architecture enabled (enabled by default)
- iOS: deployment target 15.1+
- Android:
minSdkVersion24+
- The client-side key available in your DataDome dashboard
Installation
Add the SDK and its CoreDataDome SDK dependency to your project:
npm install --save @datadome/react-native-datadome-fetch @datadome/react-native-core-datadomeor
yarn add @datadome/react-native-datadome-fetch @datadome/react-native-core-datadomeOn iOS, install the pods to link the native SDK:
cd ios && pod installConfiguration
Initialize the DataDome instance
DataDome instance- Create a configuration object.
import { DataDome, type DataDomeConfiguration } from '@datadome/react-native-datadome-fetch';
const config: DataDomeConfiguration = {
clientKey: 'YOUR_CLIENT_KEY',
};| Property | Type | Description |
|---|---|---|
clientKey | string | Required: Your DataDome client-side key. |
domain | string | null | Optional: Origin URL to scope the instance to, e.g. https://example.com. |
- Create the
DataDomeinstance.
const dataDome = new DataDome(config);Creating a DataDome instance with the same configuration again reuses the same native instance.
Create the protectedFetch function
protectedFetch functioncreateDataDomeFetch returns a drop-in replacement for the Fetch API:
import { createDataDomeFetch } from '@datadome/react-native-datadome-fetch';
const protectedFetch = createDataDomeFetch(dataDome);Usage
Use the returned function as the regular Fetch API:
const response = await protectedFetch('https://api.example.com/items', {
method: 'GET',
headers: { Accept: 'application/json' },
});For every request, the SDK will:
- Add headers to the request, including the
datadomecookie. - Send the request with the built-in Fetch API.
- Validate the response: save the
datadomecookie and, if the request was challenged, display the challenge to the end user (e.g. Slider, Device Check, or Block page). - Retry the request automatically once the challenge is resolved, and return the resulting response to the application.
Updated 11 days ago
Did this page help you?

