HorizontalFloatingToolbar

A Jetpack Compose HorizontalFloatingToolbar component for displaying a floating action bar.

Android

GitHub

npm

Changelog

Recommended version:

~55.0.17

Expo UI HorizontalFloatingToolbar matches the official Jetpack Compose FloatingActionButton API and displays a horizontal toolbar that floats above content, containing action buttons.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Use IconButton as direct children for toolbar items, and HorizontalFloatingToolbar.FloatingActionButton for the primary action.

ToolbarWithFABExample.tsx

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