AppBar

Top app bars display navigation, title, and actions at the top of the screen. Follows the Material Design 3 Top App Bar specification.

Usage

import { AppBar } from '@onlynative/components/appbar'

<AppBar title="Home" />

Variants

Variant	Description
small	Compact single-row bar (default)
center-aligned	Title centered in the bar
medium	Expanded two-row bar
large	Expanded with larger title typography

With Back Button

<AppBar
  title="Details"
  canGoBack
  onBackPress={() => navigation.goBack()}
/>

With Actions

<AppBar
  title="Inbox"
  actions={[
    { icon: 'magnify', accessibilityLabel: 'Search', onPress: () => {} },
    { icon: 'dots-vertical', accessibilityLabel: 'More', onPress: () => {} },
  ]}
/>

Props

No props found for AppBar.