Expo Status Bar

import { 
  StatusBar, 
  setStatusBarStyle, 
  setStatusBarHidden,
  setStatusBarBackgroundColor,
  setStatusBarNetworkActivityIndicatorVisible,
  setStatusBarTranslucent,
  StatusBarStyle,
  StatusBarAnimation,
  StatusBarProps
} from "expo-status-bar";

// ColorValue is imported from React Native when needed for function parameters
import { type ColorValue } from "react-native";

const { 
  StatusBar, 
  setStatusBarStyle, 
  setStatusBarHidden,
  setStatusBarBackgroundColor,
  setStatusBarNetworkActivityIndicatorVisible,
  setStatusBarTranslucent
} = require("expo-status-bar");

import React from "react";
import { StatusBar } from "expo-status-bar";

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      {/* Your app content */}
    </>
  );
}

/**
 * A component that allows you to configure your status bar without directly calling imperative
 * methods like `setBarStyle`. Multiple StatusBar components can be mounted simultaneously,
 * with props merged in mount order.
 */
function StatusBar(props: StatusBarProps): JSX.Element;

interface StatusBarProps {
  /**
   * Sets the color of the status bar text. Default value is "auto" which
   * picks the appropriate value according to the active color scheme.
   * @default 'auto'
   */
  style?: StatusBarStyle;
  
  /**
   * If the transition between status bar property changes should be
   * animated. Supported for backgroundColor, barStyle and hidden.
   */
  animated?: boolean;
  
  /**
   * If the status bar is hidden.
   */
  hidden?: boolean;
  
  /**
   * The transition effect when showing and hiding the status bar using
   * the hidden prop.
   * @default 'fade'
   * @platform ios
   */
  hideTransitionAnimation?: StatusBarAnimation;
  
  /**
   * If the network activity indicator should be visible.
   * @platform ios
   */
  networkActivityIndicatorVisible?: boolean;
  
  /**
   * The background color of the status bar.
   * @platform android
   */
  backgroundColor?: string;
  
  /**
   * If the status bar is translucent. When translucent is set to true,
   * the app will draw under the status bar. This is the default behaviour in
   * projects created with Expo tools because it is consistent with iOS.
   * @default true
   * @platform android
   */
  translucent?: boolean;
}

import { StatusBar } from "expo-status-bar";

// Auto theming (adapts to light/dark mode)
<StatusBar style="auto" />

// Always light content
<StatusBar style="light" />

// Hide with animation
<StatusBar hidden={true} hideTransitionAnimation="slide" />

// Android-specific styling
<StatusBar 
  style="dark" 
  backgroundColor="#ff0000" 
  translucent={false} 
/>

// iOS-specific network indicator
<StatusBar 
  style="auto" 
  networkActivityIndicatorVisible={true} 
/>

/**
 * Set the bar style of the status bar.
 * @param style - The color of the status bar text
 * @param animated - If the transition should be animated
 */
function setStatusBarStyle(style: StatusBarStyle, animated?: boolean): void;

/**
 * Toggle visibility of the status bar.
 * @param hidden - If the status bar should be hidden
 * @param animation - Animation to use when toggling hidden, defaults to 'none'
 */
function setStatusBarHidden(hidden: boolean, animation?: StatusBarAnimation): void;

/**
 * Set the background color of the status bar.
 * @param backgroundColor - The background color of the status bar
 * @param animated - true to animate the background color change, false to change immediately
 * @platform android
 */
function setStatusBarBackgroundColor(backgroundColor: ColorValue, animated?: boolean): void;

/**
 * Toggle visibility of the network activity indicator.
 * @param visible - If the network activity indicator should be visible
 * @platform ios
 */
function setStatusBarNetworkActivityIndicatorVisible(visible: boolean): void;

/**
 * Set the translucency of the status bar.
 * @param translucent - Whether the app can draw under the status bar. When true, content will be
 * rendered under the status bar. This is always true on iOS and cannot be changed.
 * @platform android
 */
function setStatusBarTranslucent(translucent: boolean): void;

/**
 * Status bar text color styles with automatic theming support
 */
type StatusBarStyle = 'auto' | 'inverted' | 'light' | 'dark';

/**
 * Animation types for status bar visibility transitions
 */
type StatusBarAnimation = 'none' | 'fade' | 'slide';

/**
 * React Native color value type (from react-native)
 * Used for function parameters that accept various color formats
 */
type ColorValue = string | number;