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.

MobileBêtaNavigation

Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: the main navigation of every app.

Quand l’utiliser

The root of a mobile app with two to five sections (Home, Auctions, Messages, Me).
As the tabBar of expo-router or React Navigation.

Quand ne pas l’utiliser

To switch between views of one screen.À la place : Tabs
For more than five destinations: a list on a “More” screen.

Installation

Installer

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

Importer

import { TabBar } from "@krizaka/ui/native";

Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.

Exemples

React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.

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	Défaut	Description
`items`requis	`readonly TabBarItem<T>[]`	—	The app's main sections, two to five.
`onValueChange`requis	`(value: T) => void`	—	Called with the section pressed (navigate there); a light tick confirms it.
`value`requis	`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.

Accessibilité

A tablist of tabs, each named by its word and its badge in words (badgeLabel).
At least 48 points per item; the safe area below is kept.

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub