V99AppBar

A top bar consists of a toolbar and potentially other components.

I. Props

Name	Type	Default	Description
title	React.ReactNode	-	The Title of AppBar
showBack	boolean	true	Is show button back on AppBar
showFull	boolean	-	Is show full AppBar status bar
onBackPress	() => void	-	Handle callback when back button is pressed
bottomLine	boolean	true	Is show bottom border AppBar
hasSearch	boolean	-	Is show Search bar on the bottom of AppBar
transparent	boolean	-	Is transparent background AppBar
leftActions	Array[]	-	Array components in the left Title
rightActions	Array[]	-	Array components in the right Title

II. Usage

import { V99AppBar } from 'v99-kits'

IV. Appbar template:

• default
• full
• left actions
• right actions
• search bar

AppBar

Example

<V99AppBar
  title={'AppBar'}
  onBackPress={() => {
    // Action on back
  }}
  showBack={true}
/>

Demo

---

AppBar full

Example

<V99AppBar 
  title={'AppBar'}
  onBackPress={() => {
      // Action on back
  }}
  showBack={true}
  showFull={true}
/>

Demo

---

AppBar left actions

Example

<V99AppBar
  title={'AppBar'}
  showBack={false}
  leftActions={[
    <V99ButtonIcon
      iconName={'coin_v99'}
      rightText={<V99Text color={V99Colors.primary900} L2>V99</V99Text>}
      key={'coin_v99'}
    />,
  ]}
/>

Demo

---

AppBar right actions

Example

<V99AppBar
  title={'AppBar'}
  showBack={true}
  rightActions={[
    <V99ButtonIcon iconName={'system_setting'} key={'system_setting'} />,
    <V99ButtonIcon iconName={'system_wallet_add_line'} key={'system_wallet_add_line'} />,
    <V99ButtonIcon iconName={'system_qr'} key={'system_qr'} />,
  ]}
/>

Demo

---

AppBar have search bar

Example

<V99AppBar
  title={'AppBar'}
  showBack={true}
  rightActions={[
    <V99ButtonIcon iconName={'system_setting'} key={'system_setting'} />,
  ]}
  hasSearch={true}
  value={state.textSearch}
  onChangeText={text => state.setTextSearch(text)}
/>

Demo