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.

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@beta

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.

import { Segmented } from "@krizaka/ui/native";
import { useState } from "react";
import { View } from "react-native";

const OPTIONS = [
  { value: "feed", label: "Feed" },
  { value: "auctions", label: "Auctions" },
  { value: "challenges", label: "Challenges" },
] as const;

// Controlled: the screen holds the value and shows the matching view.
export default function NativeSegmentedDefault() {
  const [value, setValue] = useState<(typeof OPTIONS)[number]["value"]>("auctions");
  return (
    <View style={{ width: 320 }}>
      <Segmented aria-label="View" options={OPTIONS} value={value} onValueChange={setValue} />
    </View>
  );
}

Small

size="sm".

import { Segmented } from "@krizaka/ui/native";
import { useState } from "react";
import { View } from "react-native";

const OPTIONS = [
  { value: "feed", label: "Feed" },
  { value: "auctions", label: "Auctions" },
  { value: "challenges", label: "Challenges" },
] as const;

// `size="sm"`: in a header or a sheet.
export default function NativeSegmentedSmall() {
  const [value, setValue] = useState<(typeof OPTIONS)[number]["value"]>("auctions");
  return (
    <View style={{ width: 320 }}>
      <Segmented aria-label="View" options={OPTIONS} value={value} onValueChange={setValue} size="sm" />
    </View>
  );
}

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 2.0.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Segmented