Flutter & React Native: Mobile CMP Implementation

# Flutter & React Native: Mobile CMP Implementation **Date:** March 22, 2026 **Author:** GetCookies Team **Category:** Technical **Reading Time:** 14 min --- Mobile apps are the new frontier for privacy enforcement. Apple's **App Tracking Transparency (ATT)** and Google Play's **Data Safety** requirements mean you can't just "wing it" with consent anymore. If you are building cross-platform apps with **Flutter** or **React Native**, you have a unique challenge: you need a Consent Management Platform (CMP) that speaks both "Native" (iOS/Android) and "Dart/JS". This guide explores how to implement GetCookies in cross-platform mobile environments. ## The "Double Consent" Problem On iOS, you often need *two* layers of consent: 1. **Apple ATT:** The system popup ("Allow App to track you?"). 2. **GDPR/CMP:** The detailed preferences (Purposes, Vendors). **Best Practice:** Show the GDPR CMP *first*. If the user says "No" to tracking there, do not even show the Apple ATT prompt (it's redundant and annoying). Only show ATT if the user accepts tracking in the CMP. ## React Native Implementation For React Native, we use a WebView overlay or a Native Module bridge. ### 1. The WebView Approach (Easiest) Use `react-native-webview` to load your GetCookies web widget. * **Pros:** Same configuration as your website. Updates instantly without app store release. * **Cons:** Doesn't control native SDKs (like Firebase) automatically. ### 2. The Bridge Approach (Robust) You listen for messages from the WebView and set native flags. ```javascript // App.js import { Settings } from 'react-native-fbsdk-next'; const onConsentMessage = (event) => { const consent = JSON.parse(event.nativeEvent.data); if (consent.categories.marketing) { Settings.setAdvertiserTrackingEnabled(true); // Enable Facebook SDK } else { Settings.setAdvertiserTrackingEnabled(false); } }; ``` ## Flutter Implementation In Flutter, the logic is similar using `webview_flutter`. ```dart // consent_dialog.dart WebView( initialUrl: 'https://cdn.getcookies.io/mobile-wrapper.html?id=YOUR_ID', javascriptChannels: { JavascriptChannel( name: 'GetCookiesBridge', onMessageReceived: (JavascriptMessage message) { Map consent = jsonDecode(message.message); if (consent['marketing']) { FacebookAppEvents().setAdvertiserTracking(enabled: true); } }, ), }, ) ``` ## Google Consent Mode in Apps Google Analytics for Firebase now supports Consent Mode. You must map your CMP choices to Firebase consent types: * `ad_storage` * `analytics_storage` * `ad_user_data` * `ad_personalization` **Crucial:** Set these defaults in your `Info.plist` (iOS) and `AndroidManifest.xml` (Android) so they apply *before* the app code even runs. ## Conclusion Mobile consent is harder than web consent because you are controlling compiled SDKs, not dynamic script tags. The key is "Bridging": using the CMP UI to drive the native configuration of your analytics and ad SDKs.