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