import { AppBar } from '@uhg-abyss/mobile';

Basics

AppBar can be fully customized using the left, right, and center props, as well as by passing components to nestedContent and children.

Accessories

App Bar contains options to add several partner components, depending on the page the App Bar is designed for. These accessories can be placed in the children of the AppBar.

• SearchBar
  • a SearchBar is used in AppBar content and the AppBar is wrapped in a ScrollProvider , set animateRight to enable the right-side hide/show animation while collapsing. Without a ScrollProvider, this prop has no effect.
• ProgressBar
  • A complementary visual representation of the current step a user is on while completing a form of inputs.
• Tabs
  • A navigation tool for secondary pages and actions. When a page contains Tabs, the user is able to horizontally scroll through the list of options.
• Segmented Controls
  • A list of options, and there cannot be more than one segment selected, so under the hood this behaves like a radio group.
• Avatar
  • Used on the homepage App Bar, and within the nested actions for Selector Section to show the current user on the app.

Center Content

Use the center prop to add content to the AppBar. If the center prop is present, it will be preferred to heading, subheading, and eyebrow.

Nested Content

Use the AppBar.NestedContent component to add nested content to the AppBar with the nestedContent prop. The AppBar.NestedContent component adds padding and around the nested content and gaps between the nested content.

For enabling animations on the collapsing/expanding AppBar content based on page scroll, see the ScrollProvider documentation.

Banner

Use the Banner prop to pass an accessory such as GlobalAppProcess to be displayed at the top of the AppBar.

• GlobalAppProcess : Used to communicate system status or background processes.

Left and Right

The left and right props are used to placed content on the left and right sides of the heading.

Variants

The App Bar’s functionality should change based on the page that it is on.

• Homepage - On the homepage, App Bar announces the user’s name, and shows the Avatar of the specific user.
• Level 1 - Level One pages are reserved for the pages that are the highest level of navigation. There is no previous content that navigated them to this page, and to return to the homepage, the user will click on the Homepage tab on Tab Bar.
• Level 2 - Level Two pages are nested pages within a Level One page. The Back button in the upper left corner of the heading section will bring the user back to the Level One page. Like the Level One page, these pages also host a number of nested components used to help users navigate the page.

ScrollProvider Integration

For collapsing/expanding behavior, place AppBar and your scrollable content under the same ScrollProvider and spread scrollProps from useCollapsibleScroll into your scroll container.

import { Animated } from 'react-native';
import {
  AppBar,
  ScrollProvider,
  useCollapsibleScroll,
  SearchInputButton,
  Button,
  ProgressBar,
} from '@uhg-abyss/mobile';

const ScreenContent = () => {
  const { scrollProps } = useCollapsibleScroll();

  return (
    <>
      <AppBar
        heading="Home"
        animateRight
        nestedContent={
          <AppBar.NestedContent>
            <SearchInputButton placeholder="Search" />
          </AppBar.NestedContent>
        }
        right={
          <Button
            size="small"
            icon={{ name: 'search' }}
            iconPosition="iconOnly"
          />
        }
      />
      <Animated.ScrollView {...scrollProps}>
        {/* Scrollable content */}
      </Animated.ScrollView>
    </>
  );
};

const App = () => {
  return (
    <ScrollProvider>
      <ScreenContent />
    </ScrollProvider>
  );
};

AppBar Props

Prop Name	Type	Default	Description
animateRight	boolean	-	Enables right-side collapse animation (fade/scale) when used with ScrollProvider. Animation is automatically disabled when the scroll content is not tall enough to support a full collapse (controlled by shouldAnimate from ScrollContext).
background	node	-	Sets background for the AppBar
banner	node	-	Places content at the top of the AppBar. To be used for the GlobalAppProcess component.
center	node	-	Place content in the center of the app bar. Overrides heading, subheading, and eyebrow components.
children	node	-	The content of the app bar
eyebrow	string | node	-	Adds an eyebrow string above the heading
heading	string | node	-	Sets the heading of the app bar
headingAlignment	'center' | 'left'	-	Sets the alignment of the heading
left	node	-	Place content on the left side of the app bar
nestedContent	node	-	Nested content above the main content of the app bar
right	node	-	Place content on the right side of the app bar
subheading	string | node	-	Sets the subheading of the app bar
truncateHeading	boolean	-	Allows the heading to be truncated

AppBar Classes

Class Name	Description
abyss-app-bar-background	App Bar background
abyss-app-bar-center	Container for the center of the app bar
abyss-app-bar-eyebrow	Eyebrow text of the app bar
abyss-app-bar-heading	Heading text of the app bar
abyss-app-bar-left	Container for the left side of the app bar
abyss-app-bar-right	Container for the right side of the app bar
abyss-app-bar-root	AppBar root element
abyss-app-bar-subheading	Subheading text of the app bar
abyss-app-bar-wrapper	Container for the left, center, and right elements of the app bar

AppBar.NestedContent Classes

Class Name	Description
abyss-app-bar-nested-content-root	Nested content subcomponent root element

It is the responsibility of consuming teams to make sure all components within AppBar are accessible.

Dynamic Type

AppBar scales to 3XL. Additional Icons and Text passed to any prop of type node should have maxFontSizeMultiplier={1.3} set.

Search tokens

AppBar Tokens

Token Name	Value
app-bar.color.surface.container	#002677
app-bar.color.text.heading	#FFFFFF
app-bar.color.text.paragraph	#FFFFFF
app-bar.color.text.button.rest	#FFFFFF
app-bar.color.text.button.active	#A5DFE7
app-bar.color.icon.utility	#FFFFFF
app-bar.color.icon.decorative	#F5B700
app-bar.spacing.padding.vertical.main-content.portrait	8
app-bar.spacing.padding.vertical.main-content.landscape	4
app-bar.spacing.padding.vertical.nested-content.portrait	8
app-bar.spacing.padding.vertical.nested-content.landscape	4
app-bar.spacing.padding.horizontal.main-content.portrait	16
app-bar.spacing.padding.horizontal.main-content.landscape	44
app-bar.spacing.padding.horizontal.nested-content.portrait	16
app-bar.spacing.padding.horizontal.nested-content.landscape	44
app-bar.spacing.gap.horizontal.main-content	12
app-bar.spacing.gap.vertical.nested-content	8

AppBar Classes

V2	V1	Status
app-bar-background	app-bar-background	Unchanged
app-bar-center	app-bar-center	Unchanged
app-bar-eyebrow	app-bar-eyebrow	Unchanged
app-bar-heading	app-bar-title	Renamed
app-bar-left	app-bar-left	Unchanged
app-bar-right	app-bar-right	Unchanged
app-bar-root	app-bar-root	Unchanged
app-bar-subheading	app-bar-subtitle	Renamed
app-bar-wrapper	app-bar-wrapper	Unchanged

AppBar Props

V2	V1	Status
background	background	Unchanged
banner	banner	Unchanged
children	children	Unchanged
eyebrow	eyebrow	Unchanged
heading	title	Renamed
headingAlignment	titleAlignment	Renamed
left	left	Unchanged
nestedContent	nestedContent	Unchanged
right	right	Unchanged
subheading	subtitle	Renamed
truncateHeading	truncateTitle	Renamed