React Native

This page walks through setting up a mobile app. For every prop, hook and method, see the React Native SDK reference.

The CookieChimp React Native SDK shows the banner and preferences you design in the dashboard as native screens. It records each decision on the device and in your Consent Log, and it starts and stops your analytics and advertising SDKs as people change their choices. It works in Expo Go, Expo development builds and bare React Native apps. SDK 1.2.0 is published on npm. Keep the CookieChimp packages you use on matching versions. See versions and deployment for the coordinated release.

What you need

A Mobile App account in CookieChimp. To set one up, choose Mobile App when you add an account, and our team will help you get started.
Your Account ID, shown on the SDK Setup page of that account.
React Native 0.80 or newer (Expo SDK 54 or newer) and React 18 or newer.

Install the SDK

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

With Expo:

npx expo install @cookiechimp/react-native@1.2.0 @react-native-async-storage/async-storage

In a bare React Native app, run npx pod-install afterwards.

Add the provider

Wrap your app with CookieChimpProvider and pass your Account ID:

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

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

Your app renders immediately. The banner appears once the stored decision and your dashboard settings have loaded, and only when the user still needs to choose. Dashboard changes reach your users without an app release.

To keep the banner clear of the notch and home indicator, pass safe-area insets from react-native-safe-area-context: insets={useSafeAreaInsets()}.

Let users change their choice

Apps don’t show a floating cookie icon. Instead, add a Privacy settings row to your app’s settings screen and open the preferences from it:

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

<SettingsRow title="Privacy settings" onPress={() => CookieChimp.showPreferences()} />;

CookieChimp picks the banner for the user’s region, so GDPR (opt-in) and CCPA (opt-out) rules apply in the right places. Tell the SDK the region in one of two ways:

Pass country (such as "DE" or "US-CA") when your app already knows where the user is.
Set geolocation to true to let CookieChimp look up the country.

When neither is set, the SDK shows the dashboard’s default banner with the GDPR fallback: optional categories stay off until the user chooses, even if that banner normally uses opt-out rules. The device language does not determine the user’s region.

<CookieChimpProvider accountId="YOUR_ACCOUNT_ID" geolocation>

Everything in the Banner Designer applies to your app: layout, position, button placement, colors, dark mode, corner radius, logos, copy and translations. Banners and preferences animate in and out, and the animations are skipped when the device asks for reduced motion. Mobile App accounts also get a Full Screen layout. It covers the whole screen with your logo, title and copy, with the buttons pinned to the bottom. When the banner uses Full Screen, the preferences open full screen too.

Describe your SDKs

Mobile SDKs don’t set cookies, so instead of a cookie list each vendor in your preferences shows what the SDK collects. These labels follow Apple’s App Privacy details and Google Play’s Data safety section, so you can reuse the answers you gave the app stores:

Label	Example
Data collected	Device ID, App interactions, Crash data
Used for	Analytics, App functionality
Tracks users across other apps	No
Kept for	14 months
SDK packages	iOS `FirebaseAnalytics`, Android `com.google.firebase:firebase-analytics`

In Vendor Management, choose Add from library to add common SDKs such as Firebase, Amplitude, AppsFlyer, Sentry and Google AdMob with these labels already filled in. Edit any SDK to review its labels under App data. Register each vendor once. CookieChimp calls onStart when the user allows it and onStop when they withdraw consent:

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),
});

Most SDKs start collecting as soon as the app launches, before any JavaScript runs. Turn off their automatic collection so they stay off until onStart is called. For Firebase Analytics, add this to firebase.json in your project root and rebuild the app:

{
  "react-native": {
    "analytics_auto_collection_enabled": false
  }
}

Use the vendor’s name exactly as it appears in Vendor Management. To read consent in a component, use the useCategory("analytics") hook. See the SDK reference for more. Each decision is stored on the device and then sent to CookieChimp. Records are queued and retried while the device is offline. They appear in your Consent Log marked as iOS or Android, so you can prove consent for app users the same way as for website visitors.

Ship your settings inside the app (optional)

If your app must not download its settings, go to SDK Setup, choose offline mode, download the configuration JSON and pass it as config:

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

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

This skips config downloads; consent records are still delivered when the device is online. Set syncConsents={false} if you also want to disable record delivery. You will need to download the file again and ship an app update whenever you change your banner, categories or vendors.

Verify your integration

Before shipping, check both iOS and Android with your own Account ID:

On a fresh install, confirm the banner matches your dashboard settings and optional SDKs stay disabled until consent allows them.
Accept, reject and save custom choices. Restart the app and confirm those choices persist.
Open Privacy settings, withdraw consent and confirm your vendor callbacks disable collection.
Make a decision while offline, reconnect or return the app to the foreground, and confirm the queued record reaches your CookieChimp Consent Log with the correct iOS or Android platform.
Check that retries produce one stored record per decision and that an offline configuration update is included in your app build.

An Expo bundle export checks packaging. Run the app on devices and confirm stored consent records before treating connected delivery as verified.

Next steps

React Native SDK reference: every provider prop, hook and method.
Banner Designer: design the banner and preferences.
Consent Log: see the records your app sends.

Get Started

Platform Specific Installation

Mobile Apps

Features

Integrations

Advanced

What you need

Install the SDK

Add the provider

Let users change their choice

Choose which banner applies

Design the banner

Describe your SDKs

Ship your settings inside the app (optional)

Verify your integration

Next steps

​What you need

​Install the SDK

​Add the provider

​Let users change their choice

​Choose which banner applies

​Design the banner

​Describe your SDKs

​Start and stop SDKs with consent

​Consent records

​Ship your settings inside the app (optional)

​Verify your integration

​Next steps

What you need

Install the SDK

Add the provider

Let users change their choice

Choose which banner applies

Design the banner

Describe your SDKs

Start and stop SDKs with consent

Consent records

Ship your settings inside the app (optional)

Verify your integration

Next steps