Function useSizeClass

blue_modules/sizeClass.ts:158–219

()

 * React hook to use size classes in components
 */
export function useSizeClass(): SizeClassInfo {
  const [sizeClassInfo, setSizeClassInfo] = useState<SizeClassInfo>(cachedSizeClassInfo);

  useEffect(() => {
    let isMounted = true;

    const applySizeClass = (info: SizeClassInfo) => {
      if (!isMounted) return;
      cachedSizeClassInfo = info;
      setSizeClassInfo(info);
      console.debug(
        `[SizeClass] Updated:`,
        `horizontal=${SizeClass[info.horizontalSizeClass]}`,
        `vertical=${SizeClass[info.verticalSizeClass]}`,
        `orientation=${info.orientation}`,
        `isLargeScreen=${info.isLargeScreen}`,
      );
    };

    const updateFromDimensions = () => {
      const calculated = calculateFromDimensions();
      applySizeClass(calculated);
    };

    const requestNativeUpdate = async () => {
      const nativeInfo = await fetchNativeSizeClass();
      if (nativeInfo) {
        applySizeClass(nativeInfo);
      }
    };

    const dimensionSubscription = Dimensions.addEventListener('change', () => {
      updateFromDimensions();
      requestNativeUpdate();
    });

    const appStateSubscription = AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
      if (nextAppState === 'active') {
        requestNativeUpdate();
      }
    });

    const nativeSubscription = sizeClassNativeEmitter?.addListener(NATIVE_EVENT_NAME, (payload: NativeSizeClassPayload) => {
      const normalized = normalizeNativePayload(payload);
      if (normalized) {
        applySizeClass(normalized);
      }
    });

    // Kick off an initial native fetch to override the heuristic when available.
    requestNativeUpdate();

    return () => {
      isMounted = false;
      dimensionSubscription.remove();
      appStateSubscription.remove();
      nativeSubscription?.remove();
    };