Docyrus
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-fabRequired Packages(1 package)
pnpm add react-native-reanimatedUsage
import { Fab } from '@/components/docyrus-native/fab';
<Fab onPress={() => console.log('pressed')} />
<Fab label="Add" variant="primary" position="bottom-right" />
<Fab
variant="secondary"
items={[
{ label: 'Camera', onPress: () => {} },
{ label: 'Gallery', onPress: () => {} },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
onPress | () => void | — | Press handler (when no items provided) |
label | string | — | Extended label text next to icon |
icon | ReactNode | — | Custom icon element |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Screen position |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'primary' | Color variant |
disabled | boolean | false | Disabled state |
items | FabItem[] | — | Menu items (opens ActionSheet when pressed) |
menuTitle | string | — | Title for the ActionSheet menu |
className | string | — | Additional CSS classes |
textClassName | string | — | Label text CSS classes |
FabItem
| Prop | Type | Description |
|---|---|---|
label | string | Menu item label |
icon | ReactNode | Menu item icon |
onPress | () => void | Menu item press handler |
Type Exports
| Type | Description |
|---|---|
FabProps | Props for Fab component |
FabItem | Menu item configuration object |
FabSize | 'sm' | 'md' | 'lg' |
FabPosition | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' |
FabVariant | 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' |