To integrate the Uptick Digital Advertising SDK into your React Native project, follow these steps:
npm install @uptick/react-native --save
react-native link @uptick/react-native
repositories
section of the build.gradle
file for your Android app.allprojects { repositories { ... maven { url "https://apps.uptick.com/sdk" } } }
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 }
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
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.
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");
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} />
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)} />
YOUR_INTEGRATION_ID
with the correct integration ID assigned to your app. Using an incorrect or generic ID will result in unsuccessful widget activation.