appjs25-eas-update-workshop-code/utils/useAppState.ts

import { useEffect, useRef } from "react";
import { AppState, AppStateStatus } from "react-native";

/**
 * Hook that returns app state, and takes a callback that is called on active state changes
 *
 * @param callback If defined, it will be called with the "activating" parameter = true when entering active state,
 * false when leaving active state
 *
 * @returns one of 'active', 'background', 'inactive', or 'unknown'
 */
export const useAppState: (
  callback?: (activating: boolean) => void,
) => AppStateStatus = (callback = undefined) => {
  const callbackRef = useRef<typeof callback>(undefined);
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const appState = useRef(AppState.currentState);

  useEffect(() => {
    const cb = (activating: boolean) =>
      callbackRef.current && callbackRef.current(activating);

    const subscription = AppState.addEventListener("change", (nextAppState) => {
      // Foregrounding
      if (cb && appState.current !== "active" && nextAppState === "active") {
        const result = true;
        cb(result);
      }
      // Backgrounding
      if (cb && appState.current === "active" && nextAppState !== "active") {
        const result = false;
        cb(result);
      }
      appState.current = nextAppState;
    });

    return () => {
      subscription.remove();
    };
  }, [callback]);

  return appState.current;
};