Tab bar
The app's main sections at the bottom of the screen: an icon and a word each, a badge for what is new, clear of the home indicator.
Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.
When to use
- The root of a mobile app with two to five sections (Home, Auctions, Messages, Me).
- As the
tabBarof expo-router or React Navigation.
When not to use
- To switch between views of one screen.Use instead: Tabs
- For more than five destinations: a list on a “More” screen.
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { TabBar } 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.
Main sections
Orochia's four sections, three unread messages.
Props
The app's main sections, at the bottom of the screen: an icon and a word each, the current one in the accent, a
badge for what is new; clear of the home indicator (the safe area), a tick on change, a second press to go back to
the top. Plug it in expo-router's or React Navigation's tabBar.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | readonly TabBarItem<T>[] | — | The app's main sections, two to five. |
onValueChangerequired | (value: T) => void | — | Called with the section pressed (navigate there); a light tick confirms it. |
valuerequired | string | — | The current section. |
aria-label | string | — | The accessible name of the bar (“Main sections”) — passed translated. |
onReselect | ((value: T) => void) | — | Called when the current section is pressed again: scroll it to the top, refresh it. |
style | StyleProp<ViewStyle> | — | Styles merged last. |
Accessibility
- A
tablistoftabs, each named by its word and its badge in words (badgeLabel). - At least 48 points per item; the safe area below is kept.
Best practices
- Name each section with one word; the icon is filled when selected.
- Use the badge for what needs attention (unread), never for promotion.
onReselect: scroll the current section to the top.
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
Stepper
The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.
Tabs
Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.