Skip to main content

App Bar

The App Bar displays information and actions relating to the current screen.

The top App Bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

It can transform into a contextual action bar or be used as a navbar.

💬 Feedback 🎨 Material Design

Import

import { AppBar } from "@react-native-material/core";

Usage

Basic App Bar

App Bar with Button and Avatar components

Bottom App Bar

Color and Tint Color

Enable Color On Dark

Following the Material Design guidelines, the color prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the enableColorOnDark prop to true.

<AppBar color="primary" enableColorOnDark />

Center the Title and the Subtitle

Props

variant

Whether you want to place the AppBar at the top or the bottom of the screen.

Type: "top" | "bottom";

Default: "top"

Optional: Yes


title

The primary text to display in the AppBar.

Type: string | React.ReactNode | ((props: { color: string }) => React.ReactNode | null) | null;

Optional: Yes


subtitle

The secondary text to display in the AppBar.

Type: string | React.ReactNode | ((props: { color: string }) => React.ReactNode | null) | null;

Optional: Yes


centerTitle

Whether the title and subtitle should be centered.

Type: boolean;

Default: false

Optional: Yes


leading

The element displayed before the title.

Type: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;

Optional: Yes


trailing

The element displayed after the title.

Type: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;

Optional: Yes


color

The fill color of the AppBar's background.

Type: Color;

Default: "primary"

Optional: Yes


tintColor

The color of the AppBar's content (title, subtitle, icons, etc.).

Type: Color;

Optional: Yes


transparent

Whether the AppBar's background is transparent.

Type: boolean;

Default: false

Optional: Yes


enableColorOnDark

If true, the color prop will be applied in dark mode.

Type: boolean;

Default: false

Optional: Yes


contentContainerStyle

The style of the content container view.

Type: StyleProp<ViewStyle>;

Optional: Yes


titleContentStyle

The style of the title and subtitle container view.

Type: StyleProp<ViewStyle>;

Optional: Yes


titleStyle

The style of the title text.

Type: StyleProp<TextStyle>;

Optional: Yes


subtitleStyle

The style of the subtitle text.

Type: StyleProp<TextStyle>;

Optional: Yes


leadingContainerStyle

The style of the leading element container view.

Type: StyleProp<ViewStyle>;

Optional: Yes


trailingContainerStyle

The style of the trailing element container view.

Type: StyleProp<ViewStyle>;

Optional: Yes


...SurfaceProps