React Native + Fetch

New Architecture

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: minSdkVersion 24+

Installation

Add the SDK and its CoreDataDome SDK dependency to your project:

npm install --save @datadome/react-native-datadome-fetch @datadome/react-native-core-datadome

or

yarn add @datadome/react-native-datadome-fetch @datadome/react-native-core-datadome

On iOS, install the pods to link the native SDK:

cd ios && pod install

Configuration

Initialize the DataDome instance

  1. Create a configuration object.
import { DataDome, type DataDomeConfiguration } from '@datadome/react-native-datadome-fetch';

const config: DataDomeConfiguration = {
  clientKey: 'YOUR_CLIENT_KEY',
};
PropertyTypeDescription
clientKeystringRequired: Your DataDome client-side key.
domainstring | nullOptional: Origin URL to scope the instance to, e.g. https://example.com.
  1. Create the DataDome instance.
const dataDome = new DataDome(config);

Creating a DataDome instance with the same configuration again reuses the same native instance.

Create the protectedFetch function

createDataDomeFetch 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:

  1. Add headers to the request, including the datadome cookie.
  2. Send the request with the built-in Fetch API.
  3. Validate the response: save the datadome cookie and, if the request was challenged, display the challenge to the end user (e.g. Slider, Device Check, or Block page).
  4. Retry the request automatically once the challenge is resolved, and return the resulting response to the application.

Did this page help you?