import { StatusBar } from '@uhg-abyss/mobile';Usage
The StatusBar component controls the app's status bar. The status bar is the zone, typically at the top of
the screen, that displays the current time, Wi-Fi and cellular network information, battery level
and/or other status icons.
This component is a customized version of React Native's StatusBar core component, offering additional configuration
options and integration with our design system. It allows you to manage the status bar's style, visibility, and backgroundColor
to match the application's theme with our design tokens.
Usage with Navigator
It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.
Imperative API
For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. However, it is not recommended to use the static API and the component for the same prop because any value set by the static API will get overridden by the one set by the component in the next render.
Performance Considerations
The StatusBar is a lightweight component, but to ensure optimal performance:
- Minimize Dynamic Changes: Limit frequent updates to the status bar's properties, as unnecessary changes can impact performance, especially on lower-end devices.
- Use Animations Judiciously: While animations can enhance the user experience, use them sparingly to avoid performance degradation.
Accessibility Considerations
When configuring the StatusBar, ensure that the chosen colors and styles provide sufficient contrast and readability. The status bar should be easily readable in various lighting conditions and should not obscure critical content or UI elements.
StatusBar Classes
| Class Name | Description |
|---|---|
| abyss-status-bar-root | StatusBar root element |
StatusBar Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| backgroundColor | Abyss.Color | - | The background color of the status bar |