Fab — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add fab

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)pressable-scale

Uso

cuándo usarlo — La acción principal única de una pantalla, flotando sobre el contenido. Uno por pantalla.
bottom / right — Desplazamientos en puntos. Conviene subir `bottom` cuando hay un tab bar o un footer debajo.
accessibilityLabel — Obligatoria: el botón es solo un ícono.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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>

Código completo del demo

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

Nombre	Tipo	Por defecto	Descripción
`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`	—	—