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.

MobileBetaActions

Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.

Why it is here. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: the main creation action of a list screen.

When to use

Create on a list screen: a new challenge, a new message.
Record on a camera-first screen.

When not to use

For a secondary action or several actions.Use instead: Button
On a form: its submit button belongs at the bottom of the form.Use instead: Button

Installation

Install

npx expo install react-native-svg
npm install @krizaka/ui

Import

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
`icon`required	`ReactNode`	—	The icon (decorative).
`label`required	`string`	—	The action in words (“New challenge”) — passed translated: the accessible name, and shown when `extended`.
`onPress`required	`() => 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.
extended shows the words; collapse it while the list scrolls down.
Pass the tab bar's height in offset.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub