@applicaster/zapp-react-native-ui-components/Components/Screen/hooks.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
import {
  useGetScreenOrientation,
  isOrientationCompatible,
} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
import {
  useCurrentScreenData,
  useDimensions,
  useRoute,
  useIsTablet,
} from "@applicaster/zapp-react-native-utils/reactHooks";
import { useMemo, useEffect, useState } from "react";

export const useWaitForValidOrientation = () => {
  const { width: screenWidth, height } = useDimensions("screen", {
    fullDimensions: true,
    updateForInactiveScreens: false,
  });

  const currentScreenData = useCurrentScreenData();

  const { screenData } = useRoute();

  const [readyState, setReadyState] = useState(false);

  const isTablet = useIsTablet();

  const { appData } = usePickFromState(["appData"]);
  const isTabletPortrait = appData?.isTabletPortrait;

  const layoutData = useMemo(
    () => ({ isTablet, isTabletPortrait, width: screenWidth, height }),
    [isTablet, isTabletPortrait, screenWidth, height]
  );

  const targetScreenData =
    currentScreenData || (screenData as any)?.targetScreen || screenData;

  const orientation = useGetScreenOrientation(targetScreenData);

  const isReadyForDisplay = isOrientationCompatible({
    orientation,
    layoutData,
  });

  useEffect(() => {
    if (isReadyForDisplay && !readyState) {
      setReadyState(true);
    }
  }, [readyState, orientation, layoutData]);

  return readyState;
};