Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A react hook for getting status bar height in ReactNative that works with iOS and android. This accounts for hotspot and GPS banners
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.