SDK React Native - Fetch

1. Installation

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

The React Native Fetch module uses two peer dependencies:

• @react-native-async-storage/async-storage
• react-native-webview

To install all dependencies, run:

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

iOS

For iOS, navigate to the ios folder and install pods.

cd ios/ && pod install

2. Setup

Import

First, import DataDome module and use DataDomeFetch .
DataDomeFetch extends the original fetch , and adds an interceptor to handle DataDome responses.
If the datadome option is not activated in the fetch options, or if the response is not a DataDome response, it behaves like the original fetch.

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

var fetch = DataDomeFetch;

Set SDK Key

Set client-side key

In order to identify the traffic, please get your Client side SDK Key from the Dashboard and add it to DataDome instance with the method setSdkKey

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

Add captcha container

To display challenge pages, add a DataDomeModal component at the top of your views.
Like a modal, it will be showed only when the SDK needs to show a challenge page.
For Android, users can manually close it.

In the DataDomeModal component, you need to set the ref of this component to the DataDome module instance.

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

3. Usage

To activate DataDome module, add the datadome option in fetch requests.

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

For older React Native versions that do not include credentials in options, add this option.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
	method: 'GET',
	headers: h,
	datadome: true,
	credentials: 'include' // or can also be 'same-origin'
})

4. 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.