Floating action button
The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.
Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.
When to use
- Create on a list screen: a new challenge, a new message.
- Record on a camera-first screen.
When not to use
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { Fab } from "@krizaka/ui/native";Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.
Examples
React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.
Extended and round
With its words, and the round button alone.
Props
The screen's main action, floating above the content in the accent — one per screen (create, compose, record). It
keeps clear of the safe area and the tab bar (offset), shows its words when extended, a light tap confirms.
| Prop | Type | Default | Description |
|---|---|---|---|
iconrequired | ReactNode | — | The icon (decorative). |
labelrequired | string | — | The action in words (“New challenge”) — passed translated: the accessible name, and shown when extended. |
onPressrequired | () => void | — | What it does. |
extended | boolean | — | Shows the words beside the icon (collapse it while the list scrolls down). |
offset | number | 0 | Extra distance from the bottom, above a tab bar (its height). Default 0. |
placement | "center" | "end" | "start" | end | Which corner. Default end (bottom right in left-to-right). |
style | StyleProp<ViewStyle> | — | Styles merged last. |
Accessibility
- A button named by
label, extended or not. - 56 points high; a light tap when pressed.
Best practices
- One per screen, for the action the screen exists for.
extendedshows the words; collapse it while the list scrolls down.- Pass the tab bar's height in
offset.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub