import React from 'react'; import { Appearance, StatusBar as NativeStatusBar, useColorScheme, type ColorSchemeName, } from 'react-native'; import type { StatusBarProps, StatusBarStyle, StatusBarAnimation } from './types'; /** * A component that allows you to configure your status bar declaratively. * * You will likely have multiple `StatusBar` components mounted in the same app at the same time. * For example, if you have multiple screens in your app, you may end up using one per screen. * The props of each `StatusBar` component will be merged in the order that they were mounted. * This component is built on top of the [StatusBar](https://reactnative.dev/docs/statusbar) * component exported from React Native, and it provides defaults that work better for Expo users. */ export function StatusBar({ style, hideTransitionAnimation, animated, hidden }: StatusBarProps) { // Pick appropriate default value depending on current theme, so if we are // locked to light mode we don't end up with a light status bar const colorScheme = useColorScheme(); const barStyle = React.useMemo(() => styleToBarStyle(style, colorScheme), [style, colorScheme]); return (