Skip to content

Instantly share code, notes, and snippets.

@brayhoward

brayhoward/getStatusBarHeight.ts

Last active February 10, 2023 07:32
Show Gist options
  • Save brayhoward/82ed6a68ed2c3727a67cd6e0863d6a1c to your computer and use it in GitHub Desktop.
Save brayhoward/82ed6a68ed2c3727a67cd6e0863d6a1c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. brayhoward revised this gist Jul 16, 2020. 1 changed file with 14 additions and 7 deletions.
    21 changes: 14 additions & 7 deletions getStatusBarHeight.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,28 @@
    import { NativeModules, StatusBarIOS, Platform } from "react-native";
    import { useState, useEffect } from "react";
    import { NativeModules, StatusBarIOS, Platform, StatusBar } from "react-native";
    import get from "lodash/get";

    const { StatusBarManager } = NativeModules;

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

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

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

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

    return height;
    }
    }
  2. brayhoward created this gist Jul 16, 2020.
    21 changes: 21 additions & 0 deletions getStatusBarHeight.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    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;
    }