React Native How To Hide StatusBar

Open android/app/src/main/res/values/styles.xml

Add windowLayoutInDisplayCutoutMode

  <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

CustomStatusBar

import React, { useEffect } from "react";
import {
  StatusBar as OriginStatusBar,
  StatusBarProps,
  View,
  ViewProps,
} from "react-native";

interface IStatusBarProps extends StatusBarProps {
  className?: ViewProps["className"];
  zIndex?: number;
}

export default function StatusBar(props: IStatusBarProps) {
  const { backgroundColor, barStyle, className, zIndex } = props;

  useEffect(() => {
    if (barStyle) {
      OriginStatusBar.setBarStyle(barStyle);
    } else {
      OriginStatusBar.setBarStyle("dark-content");
    }
  }, [barStyle]);
  return (
    <View
      className={className}
      style={{
        zIndex: typeof zIndex === "number" ? zIndex : 10000,
        position: "absolute",
        top: 0,
        backgroundColor: backgroundColor ?? "transparent",
        width: "100%",
        height: OriginStatusBar.currentHeight,
      }}
    />
  );
}

Set default React Native StatusBar style in App.tsx

import { StatusBar } from "react-native";

StatusBar.setBackgroundColor("transparent");
StatusBar.setTranslucent(true);