Fab — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add fab

Or install the whole package and import it

pnpm add orn-ui
import { Fab } from 'orn-ui/fab';

Depends on:core (theme + icons)pressable-scale

Usage

when to use — The single primary action of a screen, floating above the content. One per screen.
bottom / right — Offsets in points. Raise `bottom` when a tab bar or a footer sits underneath.
accessibilityLabel — Required: the button is only an icon.

Demo clip not recorded yet — see MEDIA.md

Variants

Default

<View style={{ height: 90 }}>
  <Fab onPress={() => {}} accessibilityLabel="Create invoice" bottom={0} right={0} />
</View>

Custom

<View style={{ height: 90 }}>
  <Fab onPress={() => {}} accessibilityLabel="Search" iconName="search" color="#00cae1" size={48} bottom={0} right={0} />
</View>

Full demo source

const variants: VariantDef[] = [
  {
    label: 'Default',
    content: (
      <View style={{ height: 90 }}>
        <Fab onPress={() => {}} accessibilityLabel="Create invoice" bottom={0} right={0} />
      </View>
    ),
  },
  {
    label: 'Custom',
    content: (
      <View style={{ height: 90 }}>
        <Fab onPress={() => {}} accessibilityLabel="Search" iconName="search" color="#00cae1" size={48} bottom={0} right={0} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`onPress`	`(e: GestureResponderEvent) => void`	—	—
`iconName?`	`IconName`	plus	—
`icon?`	`ReactNode`	—	—
`size?`	`number`	60	—
`bottom?`	`number`	20	—
`right?`	`number`	20	—
`color?`	`string`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—
`accessibilityLabel`	`string`	—	—