@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks.ts

Applicaster Zapp React Native utilities package

import { useEffect, useMemo, useState } from "react";
import { AccessibilityManager } from "./index";

/**
 * This hook is used to instantiate the accessibility manager and update localizations used by the class.
 * If the plugin config is not provided or it does not contain any localizations, the accessibility manager will not be updated.
 * We use the plugin configuration because it offers a flattened structure where we can easily access the accessibility labels and hints
 * i.e. pluginConfiguration = {
 *   accessibility_close_label: "Close",
 *   accessibility_close_hint: "Press here to close",
 * }
 */
export const useAccessibilityManager = (
  pluginConfiguration: Record<string, any> = {}
) => {
  const accessibilityManager = useMemo(() => {
    return AccessibilityManager.getInstance();
  }, []);

  useEffect(() => {
    if (pluginConfiguration) {
      accessibilityManager.updateLocalizations(pluginConfiguration);
    }
  }, [pluginConfiguration, accessibilityManager]);

  useEffect(() => {
    const subscription = accessibilityManager.getStateAsObservable().subscribe({
      next: () => {
        // TODO: handle accessibility states
        // screenReaderEnabled: false
        // reduceMotionEnabled: false
        // boldTextEnabled: false
      },
    });

    return () => subscription.unsubscribe();
  }, [accessibilityManager]);

  return accessibilityManager;
};

export const useInitialAnnouncementReady = (
  accessibilityManager: AccessibilityManager
) => {
  const [isReady, setIsReady] = useState(
    accessibilityManager.isInitialPlayerAnnouncementReady
  );

  useEffect(() => {
    const subscription = accessibilityManager
      .getInitialAnnouncementReadyObservable()
      .subscribe(setIsReady);

    return () => subscription.unsubscribe();
  }, [accessibilityManager]);

  return isReady;
};

export const useAnnouncementActive = (
  accessibilityManager: AccessibilityManager
) => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const subscription = accessibilityManager
      .getTTSStateObservable()
      .subscribe(setIsActive);

    return () => subscription.unsubscribe();
  }, [accessibilityManager]);

  return isActive;
};