TabBar

The TabBar provides primary navigation between main sections of the app. It uses a minimal design with gold accent indicators and haptic feedback.

Preview

Light Dark OLED

Global

CAST

BROWSE

LEARN

HISTORY

---

Anatomy

Light Dark OLED

Global

CAST

BROWSE

LEARN

HISTORY

1Gold indicator dot (active)

2Uppercase label

3Touch target (full width)

Element	Active	Inactive
Indicator	4x4px gold dot	Hidden
Label	Gold, medium weight	Gray, regular weight
Touch	Full tab area responds	Full tab area responds

---

Tab States

Inactive

Light Dark OLED

Global

BROWSE

Default state for unselected tabs.

Active

Light Dark OLED

Global

CAST

Currently selected tab with gold indicator and label.

Pressed

Light Dark OLED

Global

LEARN

Visual feedback during touch (70% opacity).

---

Behavior

Haptic Feedback

The TabBar triggers selection haptics on every tap:

const onPress = () => {
  haptics.selection(); // Light haptic feedback
  navigation.navigate(route.name);
};

Safe Area

The TabBar automatically adjusts for device safe areas (notch, home indicator):

const bottomPadding = insets.bottom > 0
  ? insets.bottom
  : theme.spacing.compact;

Device	Bottom Padding
iPhone with Face ID	~34px
iPhone with Home Button	12px (fallback)
Android	12px (fallback)

---

Specifications

Property	Value
Base Height	64px
Label Size	11px
Letter Spacing	0.5px (wide)
Indicator Size	4x4px
Background	Surface @ 95% opacity
Border Top	1px border color

---

API Reference

Props

The TabBar receives standard React Navigation bottom tab props:

Prop	Type	Description
state	TabNavigationState	Current navigation state
descriptors	BottomTabDescriptorMap	Tab configuration
navigation	NavigationProp	Navigation object

Usage

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CustomTabBar } from '@synchronicity/react-native';

const Tab = createBottomTabNavigator();

function Navigation() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} />}
      screenOptions={{
        headerShown: false,
      }}
    >
      <Tab.Screen name="Cast" component={CastScreen} />
      <Tab.Screen name="Browse" component={BrowseScreen} />
      <Tab.Screen name="Learn" component={LearnScreen} />
      <Tab.Screen name="History" component={HistoryScreen} />
    </Tab.Navigator>
  );
}

---

Design Decisions

Text-Only Labels

We use text labels instead of icons for several reasons:

1. Clarity: Words are unambiguous
2. Accessibility: Better for screen readers
3. Contemplative design: Less visual noise
4. Brand: Unique, memorable navigation

Minimal Indicator

The small gold dot is chosen over:

• Underlines (too heavy)
• Background fills (too prominent)
• Icon changes (we don’t use icons)

The dot is subtle but clearly visible, drawing the eye without demanding it.

Uppercase Labels

Uppercase with wide letter spacing creates:

• Visual rhythm
• Clear separation from content
• Intentional, ceremonial feel

---

Accessibility

• Role: Each tab is accessibilityRole="button"
• Label: Clear text description
• State: accessibilityState={{ selected: isFocused }}
• Hint: Navigate to the selected tab
• Touch target: Full tab width, 64px+ height

<TouchableOpacity
  accessibilityRole="button"
  accessibilityLabel="Cast"
  accessibilityState={{ selected: true }}
  accessibilityHint="Navigate to Cast tab"
>
  ...
</TouchableOpacity>

---

Complete Example

import { CustomTabBar } from '@synchronicity/react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} />}
      screenOptions={{
        headerShown: false,
        tabBarHideOnKeyboard: true,
      }}
    >
      <Tab.Screen
        name="Cast"
        component={CastScreen}
        options={{ title: 'Cast' }}
      />
      <Tab.Screen
        name="Browse"
        component={BrowseScreen}
        options={{ title: 'Browse' }}
      />
      <Tab.Screen
        name="Learn"
        component={LearnScreen}
        options={{ title: 'Learn' }}
      />
      <Tab.Screen
        name="History"
        component={HistoryScreen}
        options={{ title: 'History' }}
      />
    </Tab.Navigator>
  );
}