Tabs

Tabs organize content into separate views, allowing users to switch between different sections without leaving the page.

Preview

Basic Usage

Overview content goes here.

const [activeTab, setActiveTab] = useState('overview');

<Tabs
  tabs={[
    { key: 'overview', label: 'Overview' },
    { key: 'details', label: 'Details' },
    { key: 'settings', label: 'Settings' },
  ]}
  value={activeTab}
  onValueChange={setActiveTab}
/>

<TabPanel value="overview" selectedValue={activeTab}>
  <Text>Overview content goes here.</Text>
</TabPanel>

With Icons

<Tabs
  tabs={[
    { key: 'reading', label: 'Reading', icon: <ReadingIcon /> },
    { key: 'trigrams', label: 'Trigrams', icon: <TrigramsIcon /> },
    { key: 'history', label: 'History', icon: <HistoryIcon /> },
  ]}
  value={activeTab}
  onValueChange={setActiveTab}
/>

With Badges

<Tabs
  tabs={[
    { key: 'inbox', label: 'Inbox' },
    { key: 'saved', label: 'Saved', badge: 5 },
    { key: 'archive', label: 'Archive', badge: 23 },
  ]}
  value={activeTab}
  onValueChange={setActiveTab}
/>

Full Width

<Tabs
  tabs={[
    { key: 'cast', label: 'Cast' },
    { key: 'interpret', label: 'Interpret' },
    { key: 'save', label: 'Save' },
  ]}
  value={activeTab}
  onValueChange={setActiveTab}
  fullWidth
/>

Disabled Tabs

<Tabs
  tabs={[
    { key: 'available', label: 'Available' },
    { key: 'locked', label: 'Locked', disabled: true },
    { key: 'open', label: 'Open' },
  ]}
  value={activeTab}
  onValueChange={setActiveTab}
/>

Scrollable Tabs

For many tabs, use scrollable to allow horizontal scrolling.

<Tabs
  tabs={hexagrams.map(h => ({
    key: h.number.toString(),
    label: `Hexagram ${h.number}`,
  }))}
  value={activeTab}
  onValueChange={setActiveTab}
  scrollable
/>

API Reference

Tabs Props

Prop	Type	Default	Description
`tabs`	`TabItem[]`	Required	Array of tab items
`value`	`string`	Required	Selected tab key
`onValueChange`	`(value: string) => void`	Required	Change handler
`scrollable`	`boolean`	`false`	Enable horizontal scroll
`fullWidth`	`boolean`	`false`	Tabs fill container width
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	`'Tabs'`	Screen reader label

TabItem

Prop	Type	Required	Description
`key`	`string`	Yes	Unique tab identifier
`label`	`string`	Yes	Tab label text
`icon`	`ReactNode`	No	Optional icon
`badge`	`number`	No	Badge count
`disabled`	`boolean`	No	Disabled state

TabPanel Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Panel content
`value`	`string`	Required	Tab key this panel is for
`selectedValue`	`string`	Required	Currently selected tab
`style`	`ViewStyle`	-	Custom styles

Complete Example

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

function HexagramDetailScreen() {
  const [activeTab, setActiveTab] = useState('meaning');

  return (
    <View style={styles.container}>
      <Card style={styles.header}>
        <Text style={styles.title}>☰ Hexagram 1 - The Creative</Text>
        <Text style={styles.subtitle}>Force, Heaven, Strength</Text>
      </Card>

      <Tabs
        tabs={[
          { key: 'meaning', label: 'Meaning' },
          { key: 'lines', label: 'Lines', badge: 6 },
          { key: 'related', label: 'Related' },
          { key: 'notes', label: 'Notes' },
        ]}
        value={activeTab}
        onValueChange={setActiveTab}
        accessibilityLabel="Hexagram details navigation"
      />

      <ScrollView style={styles.content}>
        <TabPanel value="meaning" selectedValue={activeTab}>
          <Card style={styles.card}>
            <Text style={styles.sectionTitle}>Judgment</Text>
            <Text style={styles.text}>
              The Creative works sublime success, furthering through perseverance.
            </Text>
          </Card>
          <Card style={styles.card}>
            <Text style={styles.sectionTitle}>Image</Text>
            <Text style={styles.text}>
              The movement of heaven is full of power.
              Thus the superior man makes himself strong and untiring.
            </Text>
          </Card>
        </TabPanel>

        <TabPanel value="lines" selectedValue={activeTab}>
          <Card style={styles.card}>
            <Text style={styles.sectionTitle}>Line 1</Text>
            <Text style={styles.text}>
              Hidden dragon. Do not act.
            </Text>
          </Card>
          <Card style={styles.card}>
            <Text style={styles.sectionTitle}>Line 2</Text>
            <Text style={styles.text}>
              Dragon appearing in the field.
              It furthers one to see the great man.
            </Text>
          </Card>
        </TabPanel>

        <TabPanel value="related" selectedValue={activeTab}>
          <Card style={styles.card}>
            <Text style={styles.sectionTitle}>Related Hexagrams</Text>
            <Text style={styles.text}>
              Hexagram 2 - The Receptive (paired)
            </Text>
            <Text style={styles.text}>
              Hexagram 11 - Peace (derived)
            </Text>
          </Card>
        </TabPanel>

        <TabPanel value="notes" selectedValue={activeTab}>
          <Card style={styles.card}>
            <Text style={styles.sectionTitle}>Your Notes</Text>
            <Text style={styles.placeholder}>
              No notes yet. Tap to add a note.
            </Text>
          </Card>
        </TabPanel>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    padding: 20,
    margin: 16,
    marginBottom: 0,
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#8a8a9a',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  card: {
    padding: 16,
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 8,
  },
  text: {
    fontSize: 14,
    lineHeight: 20,
    color: '#8a8a9a',
  },
  placeholder: {
    fontSize: 14,
    color: '#6a6a7a',
    fontStyle: 'italic',
  },
});