Skip to content

Instantly share code, notes, and snippets.

@brayhoward

brayhoward/getStatusBarHeight.ts

Last active February 10, 2023 07:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brayhoward/82ed6a68ed2c3727a67cd6e0863d6a1c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brayhoward/82ed6a68ed2c3727a67cd6e0863d6a1c to your computer and use it in GitHub Desktop.
Download ZIP
A react hook for getting status bar height in ReactNative that works with iOS and android. This accounts for hotspot and GPS banners
Raw
getStatusBarHeight.ts
import { NativeModules, StatusBarIOS, Platform } from "react-native";
const { StatusBarManager } = NativeModules;
function useStatusBarHeight() {
// Initialize w/ currentHeight b/c StatusBar.currentHeight works properly on android on Android
const [height, setHeigt] = useState(StatusBar.currentHeight || 0);
useEffect(() => {
if (Platform.OS !== "ios") return;
StatusBarManager.getHeight((height: number) => setHeigt(height));
const listener = StatusBarIOS.addListener(
"statusBarFrameWillChange",
statusBarData => setHeigt(statusBarData?.frame?.height)
);
return () => listener.remove();
}, [StatusBar.currentHeight]);
return height;
}
@ecklf
Copy link

ecklf commented Aug 3, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment