React Native

npm install @cookiechimp/react-native @react-native-async-storage/async-storage

import { CookieChimpProvider } from "@cookiechimp/react-native";

export default function App() {
  return (
    <CookieChimpProvider accountId="YOUR_ACCOUNT_ID">
      <RootNavigator />
    </CookieChimpProvider>
  );
}

import config from "./cookiechimp-config.json";

<CookieChimpProvider config={config}>{children}</CookieChimpProvider>;

import { useCategory, usePreferences } from "@cookiechimp/react-native";

function Settings() {
  const analytics = useCategory("analytics");
  const preferences = usePreferences();
  return (
    <Button title="Privacy settings" onPress={preferences.show} />
  );
}

import { CookieChimp } from "@cookiechimp/react-native";

CookieChimp.show();
CookieChimp.showPreferences();
CookieChimp.acceptCategory("all");
CookieChimp.acceptCategory([]); // necessary only
CookieChimp.acceptCategory(["analytics"]);
CookieChimp.acceptService(["Firebase Analytics"], "analytics");
CookieChimp.acceptedCategory("analytics"); // boolean
CookieChimp.acceptedService("Firebase Analytics", "analytics"); // boolean
CookieChimp.getUserPreferences();
const stop = CookieChimp.onChange((preferences, categories, services) => {});
CookieChimp.reset(); // forget the decision and show the banner again

import analytics from "@react-native-firebase/analytics";
import { CookieChimp } from "@cookiechimp/react-native";

CookieChimp.registerVendor("Firebase Analytics", "analytics", {
  onStart: () => analytics().setAnalyticsCollectionEnabled(true),
  onStop: () => analytics().setAnalyticsCollectionEnabled(false),
});

import { CookieChimp, connectFirebase, presets } from "@cookiechimp/react-native";

CookieChimp.registerVendor(presets.mixpanel(mixpanel));
CookieChimp.registerVendor(presets.appsFlyer(appsFlyer));

// Analytics, Crashlytics and Performance collection, plus Consent Mode v2.
connectFirebase({ analytics: analytics(), crashlytics: crashlytics() });

import {
  CookieChimp,
  useBanner,
  useConsentDraft,
  useConsentText,
  usePreferences,
} from "@cookiechimp/react-native";

function MyBanner() {
  const { open } = useBanner();
  const text = useConsentText();
  if (!open || !text) return null;
  return (
    <Sheet title={text.banner.title} body={text.banner.description}>
      <Button title={text.banner.acceptAll} onPress={() => CookieChimp.acceptCategory("all")} />
      <Button title={text.banner.rejectAll} onPress={() => CookieChimp.acceptCategory([])} />
      <Button title={text.banner.customize} onPress={CookieChimp.showPreferences} />
    </Sheet>
  );
}

function MyPreferences() {
  const { open, hide } = usePreferences();
  const text = useConsentText();
  const draft = useConsentDraft();
  if (!open || !text) return null;
  return (
    <Sheet title={text.preferences.title} onClose={hide}>
      {draft.categories.map((category) => (
        <Row
          key={category.id}
          label={category.label}
          value={category.enabled}
          disabled={category.required}
          onChange={(on) => draft.toggleCategory(category.id, on)}
        />
      ))}
      <Button title={text.preferences.save} onPress={draft.save} />
    </Sheet>
  );
}

const translations = {
  de: { ui: { poweredBy: "Mit {name}" }, data: { device_id: "Gerätekennung" } },
  is: { ui: { acceptAll: "Samþykkja allt", rejectAll: "Hafna valfrjálsu" } },
};

<CookieChimpProvider accountId="YOUR_ACCOUNT_ID" translations={translations} />;