Skip to content

Instantly share code, notes, and snippets.

@ecklf
Last active April 9, 2024 17:13
Show Gist options
  • Save ecklf/dc8dee4e1c9b8cd8011199416176fb3e to your computer and use it in GitHub Desktop.
Save ecklf/dc8dee4e1c9b8cd8011199416176fb3e to your computer and use it in GitHub Desktop.
Determine the current status bar height. This is useful to determine keyboardVerticalOffset for KeyboardAvoidingView, since iPhone X and newer use different dimensions.
import { useEffect, useState } from "react";
import {
NativeEventEmitter,
NativeModules,
Platform,
StatusBar,
} from "react-native";
const { StatusBarManager } = NativeModules;
export default function useStatusBarHeight() {
const [value, setValue] = useState(StatusBar.currentHeight || 0);
useEffect(() => {
if (Platform.OS !== "ios") return;
const emitter = new NativeEventEmitter(StatusBarManager);
StatusBarManager.getHeight(({ height }: { height: number }) => {
setValue(height);
});
const listener = emitter.addListener("statusBarFrameWillChange", (data) =>
setValue(data.frame.height),
);
return () => listener.remove();
}, []);
return value;
}
Copy link

ghost commented Mar 4, 2022

This works also:

import {NativeModules} from 'react-native';
const {StatusBarManager} = NativeModules;
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;

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