A react hook for getting status bar height in ReactNative that works with iOS and android. This accounts for hotspot and GPS banners

getStatusBarHeight.ts

import { useState, useEffect } from "react";
import { NativeModules, StatusBarIOS, Platform, StatusBar } from "react-native";
import get from "lodash/get";

const { StatusBarManager } = NativeModules;

export default function useStatusBarHeight() {
  // Initialize w/ currentHeight b/c StatusBar.currentHeight works properly on android on Android
  const [height, setHeight] = useState(StatusBar.currentHeight || 0);

  useEffect(() => {
    if (Platform.OS !== "ios") return;

    StatusBarManager.getHeight(({ height }: { height: number }) => {
      setHeight(height);
    });
    const listener = StatusBarIOS.addListener(
      "statusBarFrameWillChange",
      (data: unknown) => {
        setHeight(get(data, "statusBarData.frame.height", 0));
      }
    );

    return () => listener.remove();
  }, []);

  return height;
}

I've noticed that StatusBarIOS is deprecated and updated this hook to use NativeEventEmitter.
https://gist.github.com/ecklf/dc8dee4e1c9b8cd8011199416176fb3e

Thanks for putting me in the right direction!