@economist/react-native-consent

react-native-consent

Consent management for mobile

Installation

npm install @economist/react-native-consent

or

yarn add @economist/react-native-consent

Usage

Use it like a view, this gives you more flexibility, because you can integrate that view in any screen.

import { ConsentView } from '@economist/react-native-consent';

// ...

const onUserConsentReceived = React.useCallback((_userData: SPUserData, error: string | null) => {
  // ...
}, []);

<ConsentView
  onConsentReceived={onUserConsentReceived}
  config={{
    propertyName: 'mobile.multicampaign.demo',
    accountId: 22,
    privacyManagerId: "14967",
  }}
  // This prop is optional, once set to a truthy value, it will auto apply the consent for the specified vendors and call the `onConsentReceived`.
  autoApplyGdprConsent={{
    // Vendor and Category IDs can be found in Sourcepoint dashboard
    vendorIds: [
      '5f59ef68b07d032d081f78fa',
      '5f0f39014effda6e8bbd2006',
      '5ea2d4894e5aa15059fde8a0',
      '5ef5f16871012e14626a25e2',
    ],
    categoryIds: ['633c3d8a32ec04073bd0c4b4'],
  }}
  style={{ width: '100%', height: '100%' }}
  renderLoading=(() => <MyCustomLoadingIndicator>) // completely custom loading indicator
  loadingAccentColor={"blue"} // the color for the default loading indicator
/>;

Use the already defined native iOS / Android screens. This will a show transparent modal on iOS and a transparent not fullscreen activity on Android.

import {
  consentManagement,
  ConsentConfig,
  SPUserData,
} from '@economist/react-native-consent';

const onUserConsentReceived = React.useCallback(
  (_userData: SPUserData, error: string | null) => {
    Alert.alert('Consent received');
  },
  []
);

const onShowConsentPress = React.useCallback(() => {
  consentManagement.showConsentPopup({
    propertyName: 'mobile.multicampaign.demo',
    accountId: 22,
    privacyManagerId: '14967',
  });
}, []);

React.useEffect(() => {
  consentManagement.listenForConsentResponse(onUserConsentReceived);
}, []);

return (
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'white',
    }}
  >
    <TouchableOpacity onPress={onShowConsentPress}>
      <Text>Show native consent popup</Text>
    </TouchableOpacity>
  </View>
);

For Android you also need to declare a new activity in your AndroidManifest.xml file.

 <activity
  android:name="com.consent.views.consentactivity.ConsentActivity"
  android:theme="@style/RNConsent.Theme.Transparent"
  android:exported="false" />

Utility functions

Get the current consent data saved in the local storage. Useful if you want to check if the consent was given or not.

let result: Promise<SPUserData> =
  await consentManagement.getUserConsentFromLocalStorage(config);

Clears the cache. Useful if you are switching the config.

consentManagement.clearAllData();

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT