RoadsData React Native SDK

The RoadsData React Native SDK provides a native solution for integrating ads within your React Native app. Leveraging a private ads network, advanced targeting, and an all-in-one platform, our SDK simplifies the integration of advertising into your project.

Installation

You can install the RoadsData React Native SDK using npm or yarn. The Sdk is published under the npm registry here

npm install @deepcube/roadsdata-react-native-sdk

yarn add @deepcube/roadsdata-react-native-sdk

Assets Linking

/*
 * React Native CLI can be configured by creating a react-native.config.js at the root of the project
 * https://github.com/react-native-community/cli/blob/master/docs/configuration.md
 */
module.exports = {
  assets: ['./node_modules/@deepcube/roadsdata-react-native-sdk/src/assets/fonts'],
};

npx react-native-asset

Deeplinking

Deeplinking is needed in order to make some functionalities working, like: click's navigation actions and testing through test links.

If you use the react-native's Linking interface and you have already a function that handles the events that should happen, you can integrate like this.

import { RoadsDataSDK } from '@deepcube/roadsdata-react-native-sdk';

// ...

RoadsDataSDK.setDeeplinkHandler(yourHandlerFunction)

If you integrate react navigation, you should customize the way you use Linking. See the doc for details.

Logging

Default log level is ERROR. You can change it during initialization via the logLevel property.

import { RoadsDataSDK, LogLevel } from '@deepcube/roadsdata-react-native-sdk';

RoadsDataSDK.init({
      ...initProps,
      logLevel: LogLevel.DEBUG,
    });

Initialize the SDK in your App

Initialize the SDK as early as possible in your application lifecycle (typically inside your root component, e.g., App.tsx). The snippet below is adapted from the example app.

import React, { useEffect, useState } from 'react';
import { Alert } from 'react-native';
import { RoadsDataSDK, LogLevel } from '@deepcube/roadsdata-react-native-sdk';

export default function App() {
  // Retrieve this token from your backend after user authentication
  const [consumerToken, setConsumerToken] = useState('<CONSUMER_TOKEN>');

  useEffect(() => {
    RoadsDataSDK.init({
      // Ask RoadsData for the correct environment base URL
      basePath: 'https://demo.roadsdata-staging.it',
      clientId: '<CLIENT_ID>',
      consumerToken,
      logLevel: LogLevel.ERROR, // optional (see "Logging" below)
    }).then((ok: boolean) => {
      if (!ok) {
        Alert.alert(
          'SDK initialization failed.',
          'The provided consumer token is invalid. The SDK has been disabled.'
        );
      }
    });

    // Always clean up listeners when your app or screen unmounts
    return () => {
      RoadsDataSDK.removeAllListeners();
    };
  }, [consumerToken]);

  // ...rest of your app
  return null;
}

Notes

• basePath: the RoadsData API base URL for your tenant. Ask RoadsData to provide the correct value for your app.
• clientId: the client/application identifier provided by RoadsData.
• consumerToken: a non-anonymous session token that you should obtain from your backend after the user authenticates. If the token changes (login/logout), call init again with the new token. If the user isn't authenticated, you should not try to initialize this sdk.
• logLevel: defaults to ERROR. You can override it (e.g., LogLevel.DEBUG) during initialization.
• Cleanup: call RoadsDataSDK.removeAllListeners() when the component unmounts.

Deep linking

• If you use React Native’s Linking directly, register a handler with RoadsDataSDK.setDeeplinkHandler(yourHandlerFn) so ad clicks and test links can navigate correctly.
• If you use React Navigation, configure linking as described in the "Deeplinking" section below and React Navigation’s docs.

Examples and Demo

We have included an executable demo app inside the "example" folder of the project. This demo provides a practical illustration of integrating the SDK into your React Native applications.

Requests a demo via https://roadsdata.it/contatti/

System Requirements

Before integrating our SDK, make sure your app has the following installed:

• react-native-webview
• react-native-url-polyfill
• react-native-safe-area-context
• react-native-get-random-values
• @react-native-async-storage/async-storage

Contribute

We welcome contributions and bug reports through GitHub. If you encounter issues or wish to enhance our SDK, feel free to open an issue.

License

To be defined

Contact

• Report issues: RoadsData React Native SDK Issues
• Product contacts: RoadsData Contacts