React Native DataDome module for React Navigation and URQL

Module for supporting DataDome in React Native applications using both React Navigation and URQL.

Installation

Use the package manager npm to install mobile-sdk-react-navigation-urql.

npm install @datadome/mobile-sdk-react-navigation-urql

iOS Installation

On npm installation completion, navigate to the iOS folder and run a pod installation

pod install

Warning: Cocoa Pod installation may occasionally not be successful (this is a known React Native issue). We suggest that you clean the ios build folder and run a fresh pod installation, as below:

rm -rf ios/build/

pod install

Usage

App.tsx file changes

import {
  DataDome,
  navigationRef,
} from "@datadome/mobile-sdk-react-navigation-urql";

// ...

// 1. Create a local DataDome instance
var ddInstance = DataDome.getInstance();

// 2. Set your client-side SDK key
ddInstance.setSdkKey("my-datadome-client-side-sdk-key");

// 3. Set up the map exchange, and the fetch wrapper
var client = createClient({
  url: "https://datadome.co/graphql",
  fetch: ddInstance.fetchWrapper,
  exchanges: [
    dedupExchange,
    cacheExchange,
    mapExchange(ddInstance.getMapExchange()),
    fetchExchange,
  ],
});

// 4. Provide access to your URQL client
ddInstance.setUrqlClient(client);

// 5. Include the navigationRef as a prop in your NavigationContainer
function App(): JSX.Element {
  return (
    <NavigationContainer ref={navigationRef}>
      <Provider value={client}>
        <RootNavigation />
      </Provider>
    </NavigationContainer>
  );
}

Root Navigation changes

import { DataDomeModal } from "@datadome/mobile-sdk-react-navigation-urql";

// ...

// 1. Register the DataDomeModal as part of your stack
<Stack.Group>
  <Stack.Screen
    name="DataDomeModal"
    component={DataDomeModal}
    options={{ headerShown: false }}
  />
</Stack.Group>;

Configuration

NavRef already set up

In the case that you already have a package that requires setting up its own navigation ref, you can invoke a second DataDome method for our package to use yours.

import { DataDome } from "@datadome/mobile-sdk-react-navigation-urql";

// ...

// 1. Create a local DataDome instance
var ddInstance = DataDome.getInstance();

// 2. Set your client-side SDK key
ddInstance.setSdkKey("my-datadome-client-side-sdk-key");

// 3. Set your navigation ref
ddInstance.setNavRef(merchantNavigationRef);

MapExchange already set up

In the case that you are already using your own mapExchange, we kindly ask you to include the DataDome mapExchange first. This is because exchanges bubble.

var client = createClient({
  url: "https://datadome.co/graphql",
  exchanges: [
    dedupExchange,
    cacheExchange,
    mapExchange(ddInstance.getMapExchange()),
    mapExchange(secondMapExchange()),
    fetchExchange,
  ],
});

License

MIT