TopAppBar

A Jetpack Compose TopAppBar component for displaying a title, a navigation icon, and actions at the top of a screen.

Android

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~58.0.21

Expo UI TopAppBar matches the official Jetpack Compose TopAppBar API. It displays a title, a navigation icon, and action buttons at the top of a screen.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic top app bar

Put content in the TopAppBar.Title, TopAppBar.NavigationIcon, and TopAppBar.Actions slots. Each slot is optional. Set style={{ typography: 'titleLarge' }} on the title Text to use Material 3 title typography.

BasicTopAppBar.tsx

import {
  Host,
  Icon,
  IconButton,
  Text,
  TopAppBar,
} from '@expo/ui/jetpack-compose';
import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';

const CLOSE_ICON = require('./assets/close.xml');
const EDIT_ICON = require('./assets/edit.xml');

export default function BasicTopAppBar() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <TopAppBar modifiers={[fillMaxWidth()]}>
        <TopAppBar.NavigationIcon>
          <IconButton onClick={() => console.log('Close')}>
            <Icon source={CLOSE_ICON} contentDescription="Close" />
          </IconButton>
        </TopAppBar.NavigationIcon>
        <TopAppBar.Title>
          <Text style={{ typography: 'titleLarge' }}>Inbox</Text>
        </TopAppBar.Title>
        <TopAppBar.Actions>
          <IconButton onClick={() => console.log('Edit')}>
            <Icon source={EDIT_ICON} contentDescription="Edit" />
          </IconButton>
        </TopAppBar.Actions>
      </TopAppBar>
    </Host>
  );
}

Window insets

By default, the app bar adds the status bar height above its content. It also adds any system bar or display cutout inset at its sides. These insets assume the bar is at the top edge of the window, even inside a nested Host. If a parent view already handles the insets, pass windowInsets={{}}. This removes both the top and horizontal insets.

TopAppBarWithoutInsets.tsx

import { Host, Text, TopAppBar } from '@expo/ui/jetpack-compose';
import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';

export default function TopAppBarWithoutInsets() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <TopAppBar windowInsets={{}} modifiers={[fillMaxWidth()]}>
        <TopAppBar.Title>
          <Text style={{ typography: 'titleLarge' }}>Settings</Text>
        </TopAppBar.Title>
      </TopAppBar>
    </Host>
  );
}

API

import { TopAppBar } from '@expo/ui/jetpack-compose';

Component

`TopAppBar`

Android

Type: React.Element<TopAppBarProps>

A Material 3 small top app bar that shows a title, a navigation icon, and actions.

TopAppBarProps

`children`

Android

Type: ReactNode

TopAppBar.Title, TopAppBar.NavigationIcon, and TopAppBar.Actions slots.

`colors`

Android

Optional • Type: TopAppBarColors

Colors for the app bar. Unset colors use TopAppBarDefaults.topAppBarColors().

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`windowInsets`

Android

Optional • Type: PaddingValuesRecord

Insets in dp that the app bar adds around its content. Missing sides are 0. When omitted, the app bar uses TopAppBarDefaults.windowInsets, which assumes the bar is at the top edge of the window, even inside a nested Host. Pass {} when a parent handles the insets. This removes both the top status bar inset and the horizontal system bar and display cutout insets.

Types

`PaddingValuesRecord`

Android

Per-side padding values in dp for the content.

Property	Type	Description
bottom(optional)	`number`	-
end(optional)	`number`	-
start(optional)	`number`	-
top(optional)	`number`	-

`TopAppBarColors`

Android

Colors for the top app bar.

Property	Type	Description
actionIconContentColor(optional)	`ColorValue`	Color of the action icons.
containerColor(optional)	`ColorValue`	Color of the container (background).
navigationIconContentColor(optional)	`ColorValue`	Color of the navigation icon.
titleContentColor(optional)	`ColorValue`	Color of the title.