Segmented

A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.

MobileBetaNavigation

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: switching a view inside a screen.

When to use

At the top of a screen, to switch between two to four views of the same content: feed, auctions, challenges.

When not to use

To filter a list.Use instead: Chip
On the web.Use instead: Tabs

Installation

Install

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

Import

import { Segmented } 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.

Default

Controlled, three views.

Small

size="sm".

Props

Switches between views of one screen: equal segments on a track, the chosen one raised — the web Tabs variant="segmented". A tab list for screen readers. To filter a list, use Chip.Group.

Prop	Type	Default	Description
`onValueChange`required	`(value: T) => void`	—	Called with the view pressed.
`options`required	`readonly SegmentedOption<T>[]`	—	The views, in order; `label` passed translated.
`value`required	`string`	—	The selected view (controlled).
`aria-label`	`string`	—	The accessible name of the tab list — passed translated.
`size`	`"sm" \| "md"`	`md`	sm · md (default).
`style`	`StyleProp<ViewStyle>`	—	Styles merged last.

Accessibility

A tab list named by aria-label; each segment is a tab with its selected state.
An option with disabled is announced as disabled and cannot be pressed.

Best practices

Controlled: keep value in the screen's state (or the route).
One or two words per segment, passed translated.

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