HorizontalFloatingToolbar

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

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

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

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 onPress={() => console.log('Edit pressed')}>
          <Icon source={require('./assets/edit.xml')} contentDescription="Edit" />
        </IconButton>
        <IconButton onPress={() => 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