Buttons that split, join and stretch between sets — with a signature sheet built on it.
Pro<MorphingButtonGroup />2 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| buttons MorphingButtonGroup: the buttons to show now; changing it morphs the row. | { key, label, icon?, variant?, onPress? }[] | — |
| height Button height. | number | 44 |
| gap Space between buttons. | number | 10 |
| duration Morph length in ms. | number | 380 |
| SignatureSheet label The pill's text. | string | 'Sign' |
| SignatureSheet title Card title. | string | 'Add Signature' |
| SignatureSheet onConfirm The finished signature. | ({ paths, width, height }) => void | — |
| SignatureSheet onCancel Closed without signing. | () => void | — |
| SignatureSheet cardHeight Height of the open card. | number | 340 |
| style Root style. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Morph
- Buttons with the same key keep their place and resize; new ones grow in from nothing and leaving ones shrink away, on one smooth ease (no bounce).
- Labels
- A label change cross-fades while the button resizes.
- Signature
- The pad draws smoothed strokes; undo removes the last one, Reset clears, Confirm asks once more. onConfirm gets SVG path data and the pad size.
- Haptics
- A tick on each button, a light tap opening the sheet, success on confirm.
- Reduced motion
- Morphs are instant.
Source
Did you like the content?