FloatingActionButton

Floating action button (FAB) for primary screen actions.

Basic Usage

import { FloatingActionButton } from '@multinaire/expo-ui';

<FloatingActionButton
  icon="Plus"
  title="Add"
  onPress={() => {}}
/>

Props

Prop	Type	Default	Description
title	string	—	Button label text
icon	IconName	—	Icon name displayed alongside the title
reversed	boolean	false	When true, the icon is placed after the title instead of before
position	'left' | 'center' | 'right'	'center'	Horizontal alignment of the FAB. A 'center' FAB stretches between the screen's gutters; 'left' and 'right' shrink to their content
width	number	—	Fixed width of the FAB
height	number	—	Fixed height of the FAB
margin	SpacingProps	—	Outer margin
animate	boolean	false	When true, applies an entrance animation when the button mounts
isLoading	boolean	false	Show a loading animation and disable the button
testID	string	title	Test identifier for UI automation. Defaults to the title value
onPress	() => void	—	Press handler. When omitted the button renders in a disabled (dimmed) state

Examples

Basic FAB

<FloatingActionButton
  icon="Plus"
  title="New"
  onPress={() => createNew()}
/>

Icon Only FAB

<FloatingActionButton
  icon="Plus"
  title=""
  width={56}
  height={56}
  onPress={() => {}}
/>

Different Positions

// Right aligned (default)
<FloatingActionButton
  position="right"
  icon="Plus"
  title="Add"
  onPress={() => {}}
/>

// Center aligned
<FloatingActionButton
  position="center"
  icon="Camera"
  title="Capture"
  onPress={() => {}}
/>

// Left aligned
<FloatingActionButton
  position="left"
  icon="Menu"
  title="Menu"
  onPress={() => {}}
/>

With Animation

<FloatingActionButton
  animate
  icon="Plus"
  title="Create"
  onPress={() => {}}
/>

In a Screen Layout

<Container flex={1}>
  <ListContainer data={items} renderItem={...} />

  <FloatingActionButton
    icon="Plus"
    title="Add Item"
    onPress={() => navigation.navigate('AddItem')}
  />
</Container>