SegmentedControl

SegmentedControl allows users to choose between multiple options. Use for toggling between views or filtering content.

Preview

HexagramTrigramsLines

Basic Usage

DayWeekMonth

const [period, setPeriod] = useState('day');

<SegmentedControl
  options={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
  ]}
  value={period}
  onValueChange={setPeriod}
/>

Sizes

SmallOption

MediumOption

LargeOption

Size	Height	Usage
`sm`	32px	Compact toolbars
`md`	40px	Default
`lg`	48px	Prominent controls

Full Width

AllSavedRecent

<SegmentedControl
  options={[
    { value: 'all', label: 'All' },
    { value: 'saved', label: 'Saved' },
    { value: 'recent', label: 'Recent' },
  ]}
  value={filter}
  onValueChange={setFilter}
  fullWidth
/>

Disabled Options

FreeProTeam

<SegmentedControl
  options={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Team', disabled: true },
  ]}
  value={plan}
  onValueChange={setPlan}
/>

Disabled Control

OneTwoThree

<SegmentedControl
  options={options}
  value={value}
  onValueChange={setValue}
  disabled
/>

API Reference

Props

Prop	Type	Default	Description
`options`	`SegmentedControlOption[]`	Required	Available options
`value`	`string`	Required	Selected value
`onValueChange`	`(value: string) => void`	Required	Change handler
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size
`fullWidth`	`boolean`	`false`	Stretch to fill width
`disabled`	`boolean`	`false`	Disable all options
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	`'Segmented control'`	A11y label

SegmentedControlOption

Prop	Type	Description
`value`	`string`	Option value
`label`	`string`	Display label
`disabled`	`boolean`	Disable this option

Complete Example

import { SegmentedControl, Card, Text } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function HexagramDetailScreen({ hexagram }) {
  const [view, setView] = useState('overview');

  const viewOptions = [
    { value: 'overview', label: 'Overview' },
    { value: 'trigrams', label: 'Trigrams' },
    { value: 'lines', label: 'Lines' },
    { value: 'history', label: 'History' },
  ];

  const renderContent = () => {
    switch (view) {
      case 'overview':
        return <OverviewTab hexagram={hexagram} />;
      case 'trigrams':
        return <TrigramsTab hexagram={hexagram} />;
      case 'lines':
        return <LinesTab hexagram={hexagram} />;
      case 'history':
        return <HistoryTab hexagram={hexagram} />;
      default:
        return null;
    }
  };

  return (
    <View style={styles.container}>
      <Card style={styles.header}>
        <Text style={styles.hexNumber}>#{hexagram.number}</Text>
        <Text style={styles.hexName}>{hexagram.name}</Text>
        <Text style={styles.hexChinese}>{hexagram.chinese}</Text>
      </Card>

      <SegmentedControl
        options={viewOptions}
        value={view}
        onValueChange={setView}
        fullWidth
        style={styles.tabs}
      />

      <View style={styles.content}>
        {renderContent()}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    alignItems: 'center',
    paddingVertical: 24,
  },
  hexNumber: {
    fontSize: 14,
    color: '#8a8a9a',
  },
  hexName: {
    fontSize: 24,
    fontWeight: '600',
    marginTop: 4,
  },
  hexChinese: {
    fontSize: 32,
    marginTop: 8,
  },
  tabs: {
    marginHorizontal: 16,
    marginVertical: 16,
  },
  content: {
    flex: 1,
    padding: 16,
  },
});