This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
HorizontalFloatingToolbar
A Jetpack Compose HorizontalFloatingToolbar component for displaying a floating action bar.
Expo UI HorizontalFloatingToolbar matches the official Jetpack Compose FloatingActionButton API and displays a horizontal toolbar that floats above content, containing action buttons.
Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Usage
Toolbar with FloatingActionButton
Use IconButton as direct children for toolbar items, and HorizontalFloatingToolbar.FloatingActionButton for the primary action.
import { Host, HorizontalFloatingToolbar, IconButton, Icon } from '@expo/ui/jetpack-compose'; export default function ToolbarWithFABExample() { return ( <Host matchContents> <HorizontalFloatingToolbar> <IconButton onClick={() => console.log('Edit pressed')}> <Icon source={require('./assets/edit.xml')} contentDescription="Edit" /> </IconButton> <IconButton onClick={() => console.log('Share pressed')}> <Icon source={require('./assets/share.xml')} contentDescription="Share" /> </IconButton> <HorizontalFloatingToolbar.FloatingActionButton onPress={() => console.log('Add pressed')}> <Icon source={require('./assets/add.xml')} contentDescription="Add" /> </HorizontalFloatingToolbar.FloatingActionButton> </HorizontalFloatingToolbar> </Host> ); }
API
import { HorizontalFloatingToolbar } from '@expo/ui/jetpack-compose';
Components
Type: React.Element<HorizontalFloatingToolbarProps>
Renders a HorizontalFloatingToolbar component.
A horizontal toolbar that floats above content, typically used for action buttons.
HorizontalFloatingToolbarColorsPer-slot color overrides. Any field set here replaces the corresponding color from the variant default; unset fields fall back to the variant.
Type: React.Element<HorizontalFloatingToolbarFloatingActionButtonProps>
FloatingActionButton component for HorizontalFloatingToolbar. This component marks its children to be rendered in the FAB slot.
Types
| Property | Type | Description |
|---|---|---|
| fabContainerColor(optional) | ColorValue | Color of the floating action button container (background). |
| fabContentColor(optional) | ColorValue | Color of the floating action button content (icon). |
| toolbarContainerColor(optional) | ColorValue | Color of the toolbar container (background). |
| toolbarContentColor(optional) | ColorValue | Color of the toolbar content (icons/text). |