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

Variants

Regular

import { Appbar } from "@react-native-material/core";
<Appbar title="Page title" />

import { Appbar, IconButton } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Appbar  title="Page title"  leading={props => (    <IconButton      color={props.color}      icon={<Icon name="menu" size={24} color={props.color} />}    />  )}  trailing={props => [    <IconButton      color={props.color}      icon={<Icon name="heart" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="magnify" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="dots-vertical" size={24} color={props.color} />}    />,  ]}/>

Prominent

import { Appbar } from "@react-native-material/core";
<Appbar variant="prominent" title="Page title" />

import { Appbar, IconButton } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Appbar  variant="prominent"  title="Page title"  leading={props => (    <IconButton      color={props.color}      icon={<Icon name="menu" size={24} color={props.color} />}    />  )}  trailing={props => [    <IconButton      color={props.color}      icon={<Icon name="heart" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="magnify" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="dots-vertical" size={24} color={props.color} />}    />,  ]}/>

Image

import { Appbar, IconButton } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Appbar  variant="prominent"  title="Page title"  leading={props => (    <IconButton      color={props.color}      icon={<Icon name="menu" size={24} color={props.color} />}    />  )}  trailing={props => [    <IconButton      color={props.color}      icon={<Icon name="heart" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="magnify" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="dots-vertical" size={24} color={props.color} />}    />,  ]}  image={    <Image      source={{        uri: "https://i.pinimg.com/originals/42/f2/14/42f214e4d180133b810b1d2b252cf389.png",      }}      style={{ position: "absolute", top: 0, start: 0, end: 0, bottom: 0 }}    />  }/>

FAB

import { Appbar, IconButton } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Appbar  variant="prominent"  title="Page title"  leading={props => (    <IconButton      color={props.color}      icon={<Icon name="menu" size={24} color={props.color} />}    />  )}  trailing={props => [    <IconButton      color={props.color}      icon={<Icon name="heart" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="magnify" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="dots-vertical" size={24} color={props.color} />}    />,  ]}>  <FAB    icon={props => <Icon name="plus" {...props} />}    style={{ position: "absolute", end: 16, bottom: -28 }}  /></Appbar>

Coloring

import { Appbar, IconButton } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Appbar  title="Page title"  leading={props => (    <IconButton      color={props.color}      icon={<Icon name="menu" size={24} color={props.color} />}    />  )}  trailing={props => [    <IconButton      color={props.color}      icon={<Icon name="heart" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="magnify" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="dots-vertical" size={24} color={props.color} />}    />,  ]}  color="yellow"  tintColor="#1976d2"/>

Bottom App Bar

import { Appbar, IconButton } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Appbar  position="bottom"  leading={props => (    <IconButton      color={props.color}      icon={<Icon name="menu" size={24} color={props.color} />}    />  )}  trailing={props => [    <IconButton      color={props.color}      icon={<Icon name="magnify" size={24} color={props.color} />}    />,    <IconButton      color={props.color}      icon={<Icon name="dots-vertical" size={24} color={props.color} />}    />,  ]}>  <FAB    icon={props => <Icon name="plus" {...props} />}    style={{ alignSelf: "center", position: "absolute", top: -28 }}  /></Appbar>