Component

StatusBar

Theme-aware status bar adapter for React Native screens.

React Native

Status bar

Preview reserved screen chrome and content spacing.

Screen content starts below the status area

import { StatusBar } from '@sohantalukder/rn-kit';

export function ScreenChrome() {
  return (
    <StatusBar
      bgColor="#FFFFFF"
      showHeader
      translucent={false}
    />
  );
}

Live component

lightdarktranslucent

Configure per screen when backgrounds change.
Preview in native apps for exact platform behavior.

Usage

import { StatusBar } from '@sohantalukder/rn-kit';

import { StatusBar } from '@sohantalukder/rn-kit';

export function ScreenChrome() {
  return (
    <StatusBar
      bgColor="#FFFFFF"
      showHeader
      translucent={false}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

barStyleStatusBarStylethemeControls light or dark status bar content.

bgColorColorValuethemeOverrides the screen background color supplied by the theme.

translucentbooleanfalseAllows content to render underneath the status bar.

showHeaderunknown-Configures show header for StatusBar.

Theme

StatusBar reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

light
dark
translucent

Best Practices

Configure per screen when backgrounds change.
Preview in native apps for exact platform behavior.