> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# System bars

> Set the status bar and the Android navigation bar for your app.

```tsx theme={null}
import { useEffect } from 'react';
import { useStatusBar, useNavigationBar } from '@cskn/sdk';

function DarkScreen() {
  const statusBar = useStatusBar();
  const navigationBar = useNavigationBar();

  useEffect(() => {
    statusBar.set({ style: 'light', backgroundColor: '#000000' });
    navigationBar.set({ style: 'light', backgroundColor: '#000000' });
  }, [statusBar, navigationBar]);

  return <div style={{ background: '#000' }}>…</div>;
}
```

The values belong to your app. When it is closed or sent to the background the shell restores its own appearance, and reapplies yours when your app becomes active again. Both hooks return stable objects, so they are safe in an effect's dependency list.

## Options

<ParamField path="style" type="'light' | 'dark'">
  Text and icon color. `'light'` means white icons, for dark backgrounds.
</ParamField>

<ParamField path="backgroundColor" type="string">
  Painted by the shell behind the bar.
</ParamField>

<ParamField path="hidden" type="boolean">
  Hide the bar entirely, for an immersive reader or video player. Shown again when your app closes.
</ParamField>

The navigation bar exists only on Android; on iOS `useNavigationBar` / `setNavigationBar` are ignored. Without hooks, use `setStatusBar(options)` and `setNavigationBar(options)`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.