DocumentationAPIChangelogTest your siteWatch a demoDashboard
Documentation
  1. Platform Integrations: Client-side Mobile
  2. React Native SDKs
  3. React Native + Fetch

Migrate from V2 to V3

Requirements

  • React Native 0.85+ with the New Architecture enabled (previously 0.72)
  • iOS 15.1+ (previously iOS 11+)
  • Android minSdkVersion 24+

Step 1: Update your dependencies

Remove the former @datadome/react-native-datadome package:

npm uninstall @datadome/react-native-datadome

Install the new SDK package and the CoreDataDome SDK:

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

react-native-webview is no longer required by the SDK. You can remove it if your application does not use it either:

npm uninstall @datadome/react-native-webview

On iOS, install the pods:

cd ios && pod install

Step 2: Create a DataDome instance

The client-side key must now be passed to the DataDome constructor, as a clientKey property.

Before:

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

DataDome.getInstance().setSdkKey('YOUR_CLIENT_KEY');

After:

import { DataDome } from '@datadome/react-native-datadome-fetch';

const dataDome = new DataDome({ clientKey: 'YOUR_CLIENT_KEY' });

Step 3: Replace DataDomeFetch

DataDomeFetch must be replaced with the drop-in replacement returned by createDataDomeFetch. The datadome: true option is no longer needed.

Before:

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

const fetch = DataDomeFetch;

fetch('https://api.example.com/items', {
  method: 'GET',
  headers: { Accept: 'application/json' },
  datadome: true,
});

After:

import { createDataDomeFetch } from '@datadome/react-native-datadome-fetch';

const fetch = createDataDomeFetch(dataDome);

fetch('https://api.example.com/items', {
  method: 'GET',
  headers: { Accept: 'application/json' },
});

Step 4: Remove DataDomeModal

Remove the DataDomeModal component from your views: challenges are now displayed natively by the SDK.

Before:

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

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

After:

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

Updated 4 days ago

Did this page help you?