@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",
  }}
  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)

Contributing

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

License

MIT