A component to display action items in a bar. It can be placed at the top or bottom. The top bar usually contains the screen title, controls such as navigation buttons, menu button etc. The bottom bar usually provides access to a drawer and up to four actions.

By default Appbar uses primary color as a background, in dark theme with adaptive mode it will use surface colour instead. See Dark Theme for more informations


import * as React from 'react';
import { Appbar } from 'react-native-paper';
import { StyleSheet } from 'react-native';

const MyComponent = () => (
 <Appbar style={styles.bottom}>
     onPress={() => console.log('Pressed archive')}
    <Appbar.Action icon="mail" onPress={() => console.log('Pressed mail')} />
    <Appbar.Action icon="label" onPress={() => console.log('Pressed label')} />
      onPress={() => console.log('Pressed delete')}

export default MyComponent

const styles = StyleSheet.create({
  bottom: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,


Type: boolean

Whether the background color is a dark color. A dark appbar will render light text and vice-versa.

Type: React.ReactNode

Content of the Appbar.

Available in v5.x with theme version 3
Type: 'small' | 'medium' | 'large' | 'center-aligned'
Default value: 'small'

Mode of the Appbar.

  • small - Appbar with default height (64).
  • medium - Appbar with medium height (112).
  • large - Appbar with large height (152).
  • center-aligned - Appbar with default height and center-aligned title.
Available in v5.x with theme version 3
Type: boolean

Whether Appbar background should have the elevation along with primary color pigment.

Type: Theme
Type: StyleProp<ViewStyle>
Edit this page