Find documentation for previous major version of the SDK on the v1 documentation page

Installation

Use the npm package manager to install react-native-datadome in your React Native project repository.

The React Native Fetch package uses the following dependency:

• react-native-webview

To install all dependencies, run:

npm install --save @datadome/react-native-datadome react-native-webview

Setup

Import the package

The DataDomeFetch function is a replacement for the built-in fetch API and includes an interceptor to handle DataDome responses.

import { DataDome, DataDomeModal, DataDomeFetch } from '@datadome/react-native-datadome';

const fetch = DataDomeFetch;

export default class MyApp extends Component {
  
  constructor(props) {
    super(props);
    DataDome.getInstance().setSdkKey("Client_Side_Key");
  }
}

Add modal for challenges

To display challenge pages, add a DataDomeModal component at the top of your views.
As a modal, it will be showed on top of the app when the SDK needs to show a challenge page.

export default class MyApp extends Component {
  render() {
    return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <DataDomeModal />
      <Text>Hello, world!</Text>
    </View>
    );
  }
}

Usage

To enable the interceptor from DataDome, add the datadome option in fetch requests.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: 'GET',
  headers: h,
  datadome: true
})

Advanced setup

Recommended: Enable the DataDome cookie sharing between the app and its WebViews

Share the datadome cookie between the app and WebViews to prevent multiple challenges caused by the loss of the datadome cookie.

Set sharedCookiesEnabled to true:

<WebView
  source={{
    uri: url,
  }}
  sharedCookiesEnabled={true}
/>

Optional: Activate verbose logger

For investigation purposes, customer may need to print additional logs to get more details about cookie injection, response format and response status.
These logs may be helpful in case of issue investigation, such as challenge loop issues.

The verbose logger prints info logs and is activated by calling:

DataDome.getInstance().enableVerboseLogs(true);

By default, the verbose logger is disabled: only error logs will be printed by the SDK.

How to test

📘

To test your integration, you need to activate the protection on your endpoints

Force a captcha display

❗️

Do not use the BLOCKUA User-Agent in production

To test your integration, add the header User-Agent with the value BLOCKUA to your request. This will hint the remote protection module to block the current request. The plugin will react to the blocked request (403 code) and display a challenge.