All files / app/components NativeColorSchemeSync.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useColorScheme } from "@mui/material/styles";
import { useEffect, useRef } from "react";
import { useIsNativeEmbed } from "utils/nativeLink";
 
/**
 * Syncs the web app's color scheme to the native mobile app on initial load.
 * This ensures the native UI matches the web app's theme preference.
 */
export default function NativeColorSchemeSync() {
  const { mode } = useColorScheme();
  const isNativeEmbed = useIsNativeEmbed();
  const lastSentModeRef = useRef<typeof mode | undefined>(undefined);
 
  useEffect(() => {
    Iif (!isNativeEmbed || !window.ReactNativeWebView) return;
    // Skip if we already sent this mode — prevents a feedback loop on some
    // Android builds where Appearance.setColorScheme() fires a system event
    // that propagates back into the WebView and re-triggers this effect.
    Iif (lastSentModeRef.current === mode) return;
    lastSentModeRef.current = mode;
 
    const nativeMode = mode === "system" ? null : mode;
    window.ReactNativeWebView.postMessage(
      JSON.stringify({
        type: "COLOR_SCHEME_CHANGE",
        mode: nativeMode,
      }),
    );
  }, [isNativeEmbed, mode]);
 
  return null;
}