React Native SDK

Integrating the Uptick Digital Advertising React Native SDK

To integrate the Uptick Digital Advertising SDK into your React Native project, follow these steps:

Install the package:

npm install @uptick/react-native --save

Link the package:

react-native link @uptick/react-native

Configure for Android:

• Put the Uptick SDK in the repositories section of the build.gradle file for your Android app.

  allprojects {
    repositories {
        ...
        maven {
            url  "https://apps.uptick.com/sdk"
        }
    }
  }

• In the ReactApplication class, make sure to include the UptickWidgetViewPackage in the getPackages method.

  import com.uptick.reactnativesdk.UptickWidgetViewPackage;

  @Suppress("UnnecessaryLocalVariable")
  override fun getPackages(): List<ReactPackage> {
    val packages = PackageList(this).packages
    packages.add(UptickWidgetViewPackage())
    return packages
  }

Configure for iOS

To set up the Uptick React Native SDK for iOS apps, navigate to the iOS directory and execute the following command:

cd ios && pod install

Configure using Expo

If you’re working with Expo Go, note that the Uptick React Native SDK isn’t compatible due to its custom native code. However, you can integrate the SDK with Expo using either the bare workflow or managed workflow.

For an optimal setup, consider utilizing a custom development client. If you’re initiating a new app, simply run npx create-react-native-app -t with-dev-client to automate this process. This approach also facilitates the use of Expo Application Services (EAS Build) for Android and iOS builds.

To set up the Rokt React Native SDK with the Expo managed workflow, include the @rokt/react-native-sdk plugin in the plugins array within your app.json or app.config.js file.

{
  "expo": {
    "plugins": ["@uptick/react-native"]
  }
}

If you’re not using EAS Build, make sure to run the Expo prebuild command with the –clean option. This command helps to rebuild your app with any plugin changes you’ve made.

Initializing the SDK:

Initialize the SDK by setting your INTEGRATION_ID. This should be done in your App.js or the entry point of your application.

import Uptick from '@uptick/react-native';
// Inside your App component or entry point
Uptick.init("YOUR_INTEGRATION_ID");

Adding the Placeholder View:

Create a view in your JSX where the advertising widget will be displayed. Use the component provided by the Uptick SDK.

import { UptickWidgetView } from '@uptick/react-native';
// Inside your component
<UptickWidgetView style={styles.UptickWidget} />

Activating the Widget:

Activate the widget to power it and fetch the necessary content.

import { UptickWidgetView } from '@uptick/react-native';

// Inside your component
<UptickWidgetView
  style={styles.UptickWidget}
  onActivationSuccess={() => console.log("Widget activation successful")}
  onActivationFailed={(error) => console.error("Widget activation failed", error)}
/>

Note:

• Ensure that the UptickWidgetView component is correctly imported and used in your JSX.
• Replace YOUR_INTEGRATION_ID with the correct integration ID assigned to your app. Using an incorrect or generic ID will result in unsuccessful widget activation.

Troubleshooting Tips:

• Check the layout to ensure that the UptickWidgetView is correctly placed.
• Confirm that the integration ID provided during initialization is accurate.
• Ensure there are no conflicting components or styles in your app that might affect the widget’s functionality. If issues persist, contact our technical support team for assistance.
• Make sure to implement the Error Delegate method in order to be aware of all errors.