@applicaster/zapp-react-native-utils/reactHooks/layout/index.ts

Applicaster Zapp React Native utilities package

import * as R from "ramda";
import { StatusBar, Platform } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { platformSelect, isTV } from "../../reactUtils";
import { useIsNavBarVisible } from "../navigation";

import { isTablet } from "./isTablet";

export { isTablet } from "./isTablet";

export { getDeviceInfo } from "./getDeviceInfo";

export { useLayoutVersion } from "./useLayoutVersion";

export { useDimensions } from "./useDimensions";

/**
 * This function tells wether the device is an iOS device with a notch, like
 * iPhone X and all iOS devices onwards except for SE devices
 *
 * @param {Object} dimensions - Dimensions object from React Native
 * @returns {Boolean}
 */
export function isIPhoneX(dimensions) {
  const { width, height } = dimensions;
  const isLandscape = dimensions?.width > dimensions?.height;
  const orientation = isLandscape ? "landscape" : "portrait";

  return (
    Platform?.OS === "ios" &&
    !isTablet(dimensions, orientation) &&
    R.max(width, height) > 800
  );
}

/**
 * this function provides the status bar height for the current device
 * @returns {Number} height of the status bar in pixels
 */
export function useStatusBarHeight() {
  const inset = useSafeAreaInsets();
  const StatusBarHeight = inset.top;

  return platformSelect({
    ios: StatusBarHeight,
    android: StatusBar.currentHeight,
    default: 0,
  });
}

const getNavbarHeight = () => {
  return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
};

export function useCurrentNavbarHeight() {
  const isNavBarVisible = useIsNavBarVisible();
  const navbarHeight = getNavbarHeight();

  return isNavBarVisible ? navbarHeight : 0;
}