react-native-external-display-ec/js/useExternalDisplay.js

React Native view renderer in External Display

/**
 * @format
 * @flow strict-local
 */
import {useState, useEffect, useCallback} from 'react';
import {getScreens} from './screens';
import listenEvent from './EventEmitter';

type ExternalDisplayOptions = {
  onScreenConnect: Function,
  onScreenChange: Function,
  onScreenDisconnect: Function,
};

export const useExternalDisplay = ({
  onScreenConnect,
  onScreenChange,
  onScreenDisconnect,
}: ExternalDisplayOptions = {}) => {
  const [screens, setScreens] = useState({});

  // const reloadScreens = useCallback(() => {
  //   try {
  //     const currentScreens = getScreens();
  //     setScreens(currentScreens);
  //     return currentScreens;
  //   } catch (error) {
  //     console.warn('Failed to reload external display:', error);
  //     return {};
  //   }
  // }, []);

  // Continuously check for screens
  useEffect(() => {
    const checkScreens = () => {
      try {
        const currentScreens = getScreens();
        if (Object.keys(currentScreens).length > 0) {
          setScreens(currentScreens);
        }
      } catch (error) {
        console.warn('External display not ready:', error);
      }
    };

    // Check immediately
    checkScreens();

    // Then check every 2 seconds until we find screens
    const intervalId = setInterval(() => {
      if (Object.keys(screens).length === 0) {
        checkScreens();
      }
    }, 2000);

    return () => clearInterval(intervalId);
  }, []);

  // Listen for screen events
  useEffect(() => {
    const {connect, change, disconnect} = listenEvent({
      onScreenConnect: info => {
        setScreens(info);
        if (onScreenConnect) onScreenConnect(info);
      },
      onScreenChange: info => {
        setScreens(info);
        if (onScreenChange) onScreenChange(info);
      },
      onScreenDisconnect: info => {
        setScreens(info);
        if (onScreenDisconnect) onScreenDisconnect(info);
      },
    });

    return () => {
      connect.remove();
      change.remove();
      disconnect.remove();
    };
  }, [onScreenConnect, onScreenChange, onScreenDisconnect]);

  screens.reloadScreens = true;
  return screens;
};