Expo screen orientation "addOrientationChangeListener" bug reporduction

layout-context.tsx

import React from "react";
import * as ScreenOrientation from "expo-screen-orientation";

export type LayoutContextProps = {
  currentOrientation: ScreenOrientation.Orientation | undefined;
};

export interface LayoutProviderProps {
  children: React.ReactNode;
}

const LayoutContext = React.createContext<LayoutContextProps | undefined>(
  undefined,
);

LayoutContext.displayName = "LayoutContext";

export function LayoutProvider({ children }: LayoutProviderProps) {
  const [currentOrientation, setCurrentOrientation] = React.useState<
    ScreenOrientation.Orientation | undefined
  >();

  async function initCurrentOrientation() {
    if (typeof currentOrientation === "undefined") {
      await ScreenOrientation.unlockAsync();
      const orientation = await ScreenOrientation.getOrientationAsync();
      setCurrentOrientation(orientation);
    }
  }

  React.useEffect(() => {
    const screenOrientationListener =
      ScreenOrientation.addOrientationChangeListener((event) => {
        setCurrentOrientation(event.orientationInfo.orientation);
      });
    return () => screenOrientationListener.remove();
  }, []);

  React.useEffect(() => {
    initCurrentOrientation();
  }, []);

  React.useEffect(() => {
    console.log({
      currentOrientation,
    });
  }, [currentOrientation]);

  return (
    <LayoutContext.Provider value={{ currentOrientation }}>
      {children}
    </LayoutContext.Provider>
  );
}

export const useLayout = () => {
  const context = React.useContext(LayoutContext);
  if (context === undefined) {
    throw new Error(`useLayout must be used within a LayoutProvider`);
  }
  return context;
};