To integrate the React Native SDK into your app, follow the steps outlined below.
Add the token to your environment variables:
export TRUSTARC_TOKEN=<token>
Create a
.npmrc
file in the root of your project.
@trustarc:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${TRUSTARC_TOKEN}
This file tells npm/yarn to use GitHub Packages for the
@trustarc
scope and provides authentication using your environment
token.
Add the dependency to your
package.json.
"dependencies": {
"@trustarc/trustarc-react-native-consent-sdk": "latest"
}
For Expo Project:
Configure access to the GitHub Packages Maven repository
for Android by updating the
app.json
or
app.config.js.
For app.json:
{
"expo": {
"plugins": [
[
"expo-build-properties",
{
"android": {
"minSdkVersion": 28,
"extraMavenRepos": [
{
"url": "https://maven.pkg.github.com/trustarc/trustarc-mobile-consent",
"credentials": {
"username": "trustarc",
"password": "<token>"
}
}
]
}
}
]
]
}
}
For app.config.js:
module.exports = {
expo: {
plugins: [
[
"expo-build-properties",
{
android: {
minSdkVersion: 28,
extraMavenRepos: [
{
url: "https://maven.pkg.github.com/trustarc/trustarc-mobile-consent",
credentials: {
username: "trustarc",
password: process.env.TRUSTARC_TOKEN
}
}
]
},
},
],
],
},
};
For Expo Project:
Add the following configuration to your
app.json
or
app.config.js
file if you have an iOS build.
{
"expo": {
"ios": {
"infoPlist": {
"NSUserTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."
}
}
}
}
For non-Expo Project:
Add the following to your
Info.plist.
<dict ...> <key>NSUserTrackingUsageDescription</key> <string>This identifier will be used to deliver personalized ads to you.</string> <dict>
Install the package:
npm install # or yarn install
For Expo Project:
Run
npx expo prebuild
to generate the necessary native iOS and Android project
files for your React Native application. Optionally,
run
npx expo prebuild --clean
to start from scratch with a clean build.
For non-Expo Project: If your project includes iOS, navigate to the iOS directory and install pods:
cd ios && pod install && cd ..
Create a new component (for example,
TrustArcConsentScreen.tsx)
and copy the following sample implementation into it.
Then import and render this component inside your main
app screen or navigation flow.
import React, {useEffect, useState} from 'react';
import {
View,
Text,
NativeEventEmitter,
NativeModules,
StyleSheet,
} from 'react-native';
import {
SdkMode,
TrustArcSdk,
} from '@trustarc/trustarc-react-native-consent-sdk';
export default function TrustArcScreen() {
const [isSdkInitialized, setSdkInitialized] = useState(false);
// Create new SDK instance
const trustArcSdk: TrustArcSdk = new TrustArcSdk();
// Create the event emitter to listen for native events
const eventEmitter = new NativeEventEmitter(NativeModules.TrustArcMobileSdk);
// Function to initialize and start the SDK
const loadSdk = async () => {
try {
await trustArcSdk.initialize(SdkMode.standard);
await trustArcSdk.start('mac_trustarc.com', '', '');
} catch (error) {
console.error('TrustArc SDK failed to initialize:', error);
}
};
// Initialize SDK once and listen for completion
useEffect(() => {
const sdkInitListener = eventEmitter.addListener('onSdkInitFinish', () => {
setSdkInitialized(true);
console.log('TrustArc SDK initialized successfully');
});
loadSdk(); // Only once on mount
return () => {
sdkInitListener.remove(); // Clean up listener on unmount
};
}, []);
// UI rendering
return (
<View style={styles.container}>
<Text style={styles.text}>
{isSdkInitialized
? '✅ TrustArc SDK is ready!'
: '⌛ Initializing TrustArc SDK...'}
</Text>
</View>
);
}
// Example styling (optional)
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 16,
padding: 10,
},
});