React Native — Micro Frontends

import { FlashAnalytics, type ExperimentAssignmentResponse } from '@flash-analytics/react-native';

// Plain ref — exists before React context is mounted so the SDK can call it
// as soon as a session or identify fires.
type AssignmentsListener = (assignments: ExperimentAssignmentResponse[]) => void;
let _assignmentsListener: AssignmentsListener | null = null;

export function setAssignmentsListener(fn: AssignmentsListener | null) {
  _assignmentsListener = fn;
}

export const analytics = new FlashAnalytics({
  appId: 'your-app-id',
  endpoint: 'https://api.flashanalytics.app',
  captureAppLifecycle: true,
  captureScreenViews: false, // MFEs handle their own screen events
  captureVariants: {
    // Fires automatically whenever the SDK refreshes assignments:
    //   • new session detected (first track response)
    //   • user identifies (login)
    // The AnalyticsProvider registers a listener here to keep context state in sync.
    onAssignmentsChanged: (assignments) => _assignmentsListener?.(assignments),
  },
});

import React, { createContext, useContext, useEffect, useState } from 'react';
import type { RemoteConfigSnapshot } from '@flash-analytics/react-native';
import { analytics, setAssignmentsListener } from './analytics';

type AnalyticsContextValue = {
  deviceId: string | null;
  profileId: string | null;
  remoteConfig: RemoteConfigSnapshot | null;
  assignments: Record<string, string>;
  identify: (profileId: string, traits?: Record<string, unknown>) => void;
  track: (event: string, properties?: Record<string, unknown>, mfeName?: string) => void;
};

const AnalyticsContext = createContext<AnalyticsContextValue | null>(null);

export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
  const [deviceId, setDeviceId]         = useState<string | null>(null);
  const [profileId, setProfileId]       = useState<string | null>(null);
  const [remoteConfig, setRemoteConfig] = useState<RemoteConfigSnapshot | null>(null);
  const [assignments, setAssignments]   = useState<Record<string, string>>({});

  useEffect(() => {
    // fetchDeviceId() resolves from the local hardware ID (no HTTP call in RN).
    // After it resolves once, analytics.getDeviceIdSync() returns it synchronously.
    analytics.fetchDeviceId().then(setDeviceId);

    // Wire the SDK's onAssignmentsChanged into React state.
    // This fires automatically on new session AND on identify — no manual polling needed.
    setAssignmentsListener((incoming) => {
      const map: Record<string, string> = {};
      for (const a of incoming) map[a.experimentName] = a.variantId;
      setAssignments(map);
    });

    return () => setAssignmentsListener(null);
  }, []);

  // Re-fetch remote config when the user logs in.
  // Experiments are handled by the listener above — no autoAssignExperiments() call needed.
  useEffect(() => {
    analytics.fetchRemoteConfig().then(setRemoteConfig);
  }, [profileId]);

  function identify(id: string, traits?: Record<string, unknown>) {
    setProfileId(id);
    analytics.identify({ profileId: id, properties: traits });
  }

  function track(event: string, properties?: Record<string, unknown>, mfeName?: string) {
    analytics.track(event, {
      ...properties,
      // Tag every event with the originating MFE so you can filter in Flash Analytics
      mfe_name: mfeName ?? 'shell',
      // Force the same deviceId so all MFEs share one session
      __deviceId: deviceId ?? undefined,
    });
  }

  return (
    <AnalyticsContext.Provider
      value={{ deviceId, profileId, remoteConfig, assignments, identify, track }}
    >
      {children}
    </AnalyticsContext.Provider>
  );
}

export function useAnalytics() {
  const ctx = useContext(AnalyticsContext);
  if (!ctx) throw new Error('useAnalytics must be used inside AnalyticsProvider');
  return ctx;
}

import { AnalyticsProvider } from './AnalyticsContext';
import { RootNavigator } from './RootNavigator';

export default function App() {
  return (
    <AnalyticsProvider>
      <RootNavigator />
    </AnalyticsProvider>
  );
}

// Resolved via module federation — points to shell/AnalyticsContext
import { useAnalytics } from '../shell/AnalyticsContext';

export function CheckoutScreen() {
  const { track, profileId } = useAnalytics();

  function handlePurchase(orderId: string) {
    track('purchase_completed', { order_id: orderId, value: 49.99 }, 'checkout');
  }

  return <Button onPress={() => handlePurchase('order_123')} title="Buy" />;
}

import { useNavigationContainerRef, NavigationContainer } from '@react-navigation/native';
import { useAnalytics } from '../shell/AnalyticsContext';

export function CheckoutNavigator() {
  const navigationRef = useNavigationContainerRef();
  const { track } = useAnalytics();

  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={() => {
        const currentRoute = navigationRef.getCurrentRoute();
        if (currentRoute) {
          track('screen_viewed', { screen_name: currentRoute.name }, 'checkout');
        }
      }}
    >
      {/* screens */}
    </NavigationContainer>
  );
}

// auth MFE — after login
const { identify } = useAnalytics();
identify(user.id, { email: user.email, plan: user.plan });
// internally calls: analytics.identify({ profileId: user.id, properties: { email, plan } })

// All subsequent track() calls from any MFE carry this profileId

const { remoteConfig, assignments } = useAnalytics();

const showNewUpsell = assignments['checkout_upsell_test'] === 'variant_b';

// remoteConfig is a RemoteConfigSnapshot — use typed getters
const ctaLabel = remoteConfig?.getString('checkout_cta_label', 'Buy Now') ?? 'Buy Now';
const maxItems = remoteConfig?.getNumber('cart_max_items', 10) ?? 10;

new ModuleFederationPlugin({
  name: 'shell',
  shared: {
    react: { singleton: true, eager: true },
    'react-native': { singleton: true, eager: true },
    '../shell/AnalyticsContext': { singleton: true, eager: true },
  },
});

new ModuleFederationPlugin({
  name: 'checkout',
  remotes: { shell: 'shell@...' },
  shared: {
    react: { singleton: true },
    'react-native': { singleton: true },
  },
});