Integrate consent banner

With your assetId and bannerId ready, add TruConsentModal to your React Native app. The component fetches its configuration on mount and auto-hides if the user has already consented to all purposes.

Install the package

npm install @truconsent/consent-notice-react-native

Store your credentials

Add your SDK credentials to app.json under the extra field so they are available via expo-constants:

{
  "expo": {
    "extra": {
      "truConsentApiKey": "your-api-key",
      "truConsentOrganizationId": "your-organization-id",
      "truConsentAssetId": "your-asset-id",
      "truConsentApiUrl": "https://trukit-dev.truconsent.io"
    }
  }
}

Mount the component

Import TruConsentModal and add it to your screen. Place it as a sibling to your main content so it renders as an overlay:

import React from 'react';
import { View } from 'react-native';
import Constants from 'expo-constants';
import TruConsentModal from '@truconsent/consent-notice-react-native';

const extra = Constants.expoConfig?.extra ?? {};

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MainContent />
      <TruConsentModal
        apiKey={extra.truConsentApiKey}
        organizationId={extra.truConsentOrganizationId}
        bannerId="CP003"
        userId="user-uuid-or-session-id"
        assetId={extra.truConsentAssetId}
        apiUrl={extra.truConsentApiUrl}
        companyName="Your Company"
        onClose={(type) => console.log('Consent banner closed:', type)}
      />
    </View>
  );
}

Show the banner conditionally

Show the banner only when needed — for example, before a form submission:

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import Constants from 'expo-constants';
import TruConsentModal from '@truconsent/consent-notice-react-native';

const extra = Constants.expoConfig?.extra ?? {};

export default function SignupScreen() {
  const [showConsent, setShowConsent] = useState(false);

  const handleConsentClose = (type: string) => {
    setShowConsent(false);
    if (type === 'approved' || type === 'partial_consent') {
      proceedWithSignup();
    } else {
      Alert.alert('Consent required', 'You must consent to continue.');
    }
  };

  const proceedWithSignup = () => {
    // proceed with form submission
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Sign Up" onPress={() => setShowConsent(true)} />
      {showConsent && (
        <TruConsentModal
          apiKey={extra.truConsentApiKey}
          organizationId={extra.truConsentOrganizationId}
          bannerId="CP003"
          userId="user-uuid"
          assetId={extra.truConsentAssetId}
          apiUrl={extra.truConsentApiUrl}
          onClose={handleConsentClose}
        />
      )}
    </View>
  );
}

Component props

* Required

Prop	Type	Description
apiKey *	string	API key from the platform dashboard.
organizationId *	string	Your org ID — sent on every request.
bannerId *	string	Collection point display_id from the platform (e.g. CP003).
assetId *	string	Asset UUID from the platform.
apiUrl *	string	SDK base URL: https://trukit-dev.truconsent.io
userId	string	Authenticated user ID or guest UUID. Used to look up prior consent records.
logoUrl	string	Logo URL shown in the banner header.
companyName	string	Company name shown in the banner.
onClose	function	Called on close with one of the consent action types below.

onClose callback values

Value	Meaning
approved	User consented to all purposes
declined	User declined all purposes
partial_consent	User consented to some purposes
revoked	User withdrew a previously granted consent
no_action	Banner auto-dismissed (user already consented)

Troubleshooting

Banner does not appear

• Verify bannerId, assetId, and organizationId are correct.
• If the user has already consented to all purposes, the component auto-hides and onClose fires with no_action.

401 Unauthorized

• Check your API key is correct and matches your organization.

403 Forbidden

• Your app bundle ID or domain is not allowlisted. Go to Settings → API Settings → Allowed Domains in the platform dashboard and add it.

---

← Fetch collection pointNext: Integrate Rights Center →