Integrate Rights Center

The NativeRightCenter component provides a pre-built UI for DPDPA data subject rights — letting users access, correct, or delete their personal data and withdraw consent.

Mount the component

Create a dedicated screen for the Rights Center:

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

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

export default function RightsCenterScreen() {
  return (
    <View style={{ flex: 1 }}>
      <NativeRightCenter
        userId="user-uuid"
        apiKey={extra.truConsentApiKey}
        organizationId={extra.truConsentOrganizationId}
        apiUrl={extra.truConsentApiUrl}
        assetId={extra.truConsentAssetId}
      />
    </View>
  );
}

Handle authenticated vs. guest users

Resolve the user ID before rendering the component:

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator, Text, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NativeRightCenter } from '@truconsent/consent-notice-react-native';
import { useAuth } from '../hooks/useAuth';

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

async function getOrCreateGuestId(): Promise<string> {
  const stored = await AsyncStorage.getItem('guest_id');
  if (stored) return stored;
  const id = `guest_${Date.now()}_${Math.random().toString(36).slice(2)}`;
  await AsyncStorage.setItem('guest_id', id);
  return id;
}

export default function RightsCenterScreen() {
  const { user } = useAuth();
  const [userId, setUserId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function resolveUserId() {
      const id = user ? user.id : await getOrCreateGuestId();
      setUserId(id);
      setIsLoading(false);
    }
    resolveUserId();
  }, [user]);

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (!userId) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Unable to load Rights Center</Text>
        <TouchableOpacity onPress={() => { setIsLoading(true); }}>
          <Text>Retry</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <NativeRightCenter
        userId={userId}
        apiKey={extra.truConsentApiKey}
        organizationId={extra.truConsentOrganizationId}
        apiUrl={extra.truConsentApiUrl}
        assetId={extra.truConsentAssetId}
      />
    </View>
  );
}

// In your Stack navigator (e.g. app/_layout.tsx with Expo Router)
<Stack.Screen
  name="rights-center"
  component={RightsCenterScreen}
  options={{ title: 'Privacy & Data Rights' }}
/>

Link to it from your settings or account screen:

import { useRouter } from 'expo-router';

export default function SettingsScreen() {
  const router = useRouter();

  return (
    <View>
      <TouchableOpacity
        onPress={() => router.push('/rights-center')}
        style={styles.row}
      >
        <Text>Privacy & Data Rights</Text>
      </TouchableOpacity>
    </View>
  );
}

Import reference

NativeRightCenter is a named export. TruConsentModal is the default export:

// Default export — consent banner
import TruConsentModal from '@truconsent/consent-notice-react-native';

// Named export — rights center
import { NativeRightCenter } from '@truconsent/consent-notice-react-native';

// Both at once
import TruConsentModal, { NativeRightCenter } from '@truconsent/consent-notice-react-native';

Component props

* Required

Prop	Type	Description
`userId` *	string	Authenticated user ID. Must match the ID used when consent was recorded.
`apiKey` *	string	API key from the platform dashboard.
`organizationId` *	string	Your org ID — sent on every request.
`apiUrl` *	string	SDK base URL: `https://trukit-dev.truconsent.io`
`assetId` *	string	Asset UUID from the platform.

DPDPA rights surfaced

Right	DPDPA reference
Access personal data	Section 11
Correction and erasure	Section 12
Grievance redressal	Section 13
Withdraw consent	Section 6
Nominate a representative	Section 14

← Integrate consent banner