AppBar

The App Bar is used for branding, screen titles, navigation and actions. In iOS this bar is usually called Navigation Bar.

Basic Usage

import { useTheme } from '@shopgate/engage/core';

function MyPageComponent() {
  const { View, AppBar } = useTheme();

  return (
    <View>
      <AppBar title="My page title"/>
      {/* your page content goes here */}
    </View>
  );
}

Custom Left Action

import { useTheme } from '@shopgate/engage/core';
import { CrossIcon, AppBarAndroid } from '@shopgate/engage/components';

function CustomLeftAction() {
  function handleClick() {
    // Perform some action here.
  }

  return <AppBarAndroid.Icon icon={CrossIcon} onClick={handleClick} />;
}

function MyPageComponent() {
  const { View, AppBar } = useTheme();

  return (
    <View>
      <AppBar title="My page title" left={CustomLeftAction} />
      {/* your page content goes here */}
    </View>
  );
}

Props

Name	Type	Default	Description
title	string	null	The page title to display.
left	Component	<ArrowIcon />	The component for rendering the left actions.
center	Component	<AppBar.Title />	The component for rendering the center display. By default this will render the title prop.
right	Component	<SearchButton /> && <CartButton />	The component to render the right actions.
below	Component	<ProgressBar />	The component to render below the main contents of the App Bar.
backgroundColor	string	#fff	The background color.
textColor	string	#000	The text color.
shadow	boolean	true	Whether the App Bar should have a shadow.