Tab Context

Tab navigation state, visit tracking, state persistence, and preload optimization.

Tab Context

Source: contexts/TabContext.tsx (131 lines)

The TabProvider manages bottom tab navigator state, tracks tab visit history for performance optimization, persists per-tab state across tab switches, and provides analytics data for usage patterns.

---

Context API

const {
  visitedTabs,        // Set of tab IDs the user has visited this session
  markTabVisited,     // Mark a tab as visited (triggers analytics)
  tabStates,          // Map of saved per-tab state objects
  saveTabState,       // Persist state for a specific tab
  getTabState,        // Retrieve saved state for a tab (with 24h expiry)
  clearTabState,      // Clear saved state for a tab
  isTabReady,         // Whether the tab system has finished initializing
  shouldPreload,      // Whether a given tab should be preloaded
  tabSwitchCount,     // Total number of tab switches this session
  lastActiveTab,      // ID of the most recently active tab
} = useTabContext();

---

Tab Visit Tracking

The provider initializes with the “commits” tab pre-marked as visited (since it’s the default landing tab). Each tab switch calls markTabVisited(), which:

1. Adds the tab ID to the visitedTabs Set
2. Increments the tabSwitchCount counter
3. Updates lastActiveTab to the new tab ID

---

Per-Tab State Persistence

Each tab can save arbitrary state that survives tab switches:

// Save scroll position when leaving the tab
saveTabState("schedules", { scrollY: 450, selectedDate: "2026-05-21" });

// Restore when returning
const state = getTabState("schedules");
if (state) scrollTo(state.scrollY);

State entries are timestamped on save. The getTabState() function automatically expires entries older than 24 hours, clearing stale state that no longer reflects the current data.

---

Preload Optimization

The shouldPreload() function determines which tabs should eagerly load their content:

const shouldPreload = useCallback((tabId: string) => {
  return visitedTabs.has(tabId) ||
         ['commits', 'schedules'].includes(tabId);
}, [visitedTabs]);

The “commits” and “schedules” tabs are always preloaded. Other tabs are preloaded only after the user has visited them at least once this session.

---

AppState Integration

The provider listens to React Native’s AppState changes. When the app goes to background, it can persist critical tab state to AsyncStorage (currently a placeholder for future implementation).

---

Initialization

The tab system performs async initialization on mount with a 100ms delay before marking isTabReady as true. Components can gate rendering on this flag to prevent layout jumps during cold start.