AppBar

Top app bars display navigation, title, and actions at the top of the screen. Follows the Material Design 3 Top App Bar specification.

Usage

Open on Snack ↗

import { AppBar } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1 }}>
          <AppBar title="Home" />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Variants

Variant	Description
small	Compact single-row bar (default)
center-aligned	Title centered in the bar
medium	Expanded two-row bar
large	Expanded with larger title typography

With Back Button

Open on Snack ↗

import { AppBar } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Alert, View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1 }}>
          <AppBar
            title="Details"
            canGoBack
            onBackPress={() => Alert.alert('Back pressed')}
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

With Actions

Open on Snack ↗

import { AppBar } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Alert, View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1 }}>
          <AppBar
            title="Inbox"
            actions={[
              { icon: 'magnify', accessibilityLabel: 'Search', onPress: () => Alert.alert('Search') },
              { icon: 'dots-vertical', accessibilityLabel: 'More', onPress: () => Alert.alert('More') },
            ]}
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
title	string	-	Yes	Title text displayed in the bar.
variant	enum	small	No	Layout variant.
colorScheme	enum	surface	No	Color scheme that determines the default container and content colors. `containerColor` and `contentColor` props override these defaults.
canGoBack	boolean		No	When `true`, renders a back button in the leading slot.
onBackPress	() => void	-	No	Called when the auto-rendered back button is pressed.
insetTop	boolean		No	When `true`, wraps the bar in a SafeAreaView that handles the top inset.
elevated	boolean		No	When `true`, adds shadow/elevation to indicate the bar is scrolled.
leading	ReactNode	-	No	Custom leading content. When provided, overrides `canGoBack`.
trailing	ReactNode	-	No	Custom trailing content. When provided, overrides `actions`.
actions	AppBarAction[]	-	No	Array of actions rendered in the trailing slot. Each entry is either an icon action (`{ icon }`) or a text action (`{ label }`, e.g. "Save").
containerColor	string	-	No	Override the container (background) color. Applied to both normal and elevated states.
contentColor	string	-	No	Override the content (title and icon) color.
titleStyle	StyleProp<TextStyle>	-	No	Additional style applied to the title text.
style	StyleProp<ViewStyle>	-	No	Custom style applied to the root container.