Glowup
ACTIONS · 17 / 89
AnimatedFAB
AnimatedFAB — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/AnimatedFAB.tsx
Live demo
New ticket
Properties
7 controls
Icon
Label
Extended
Animate from
Right
󰍝
Icon mode
Static
󰍝
Placement
Inline
󰍝
Disabled
Usage
AnimatedFAB.tsx
<AnimatedFAB icon="plus" label="New ticket" />
Variants
The states and shapes this component is meant to be used in.
Extended
New work order
Collapsed
New work order
Collapsed to the icon; the label animates back in when `extended` flips.
Shrink on scroll
The behaviour it exists for: the label collapses as soon as the list underneath moves, and comes back at the top.
Scroll the list
Work order 1
Work order 2
Work order 3
Work order 4
Work order 5
Work order 6
Work order 7
Work order 8
Work order 9
Work order 10
Work order 11
Work order 12
New work order
Disabled
Unavailable
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
12 on AnimatedFABProps
Filter props
󰍉
icon
required
MaterialCommunityIconsGlyphs
label
required
string
Always required: it is the label that animates.
onPress
required
() => void
animateFrom
"left" | "right"
default: "right"
Edge the label grows from. Match it to the FAB's own corner.
disabled
boolean
default: false
duration
number
default: 150
Animation duration (ms).
extended
boolean
default: true
`true` shows the label, `false` collapses to the icon. Drive it from a scroll offset to get the M3 "shrink on scroll" behaviour.
iconMode
"static" | "dynamic"
default: "static"
`static` keeps the icon put and slides the label out beside it. `dynamic` lets the icon travel with the label as the pill grows.
placement
"floating" | "inline"
default: "floating"
`inline` drops the absolute positioning (toolbar, card action row).
position
AnimatedFABPosition
default: "bottom-right"
style
StyleProp<ViewStyle>
testID
string
󰅁
Previous
FAB
Next
SpeedDial
󰅂