TabNavigator.tsx

Defines the root bottom tab navigation structure for the application

Purpose

This module defines the root-level navigation shell of the application using a bottom tab bar. It composes all top-level screens into a single NavigationContainer and conditionally includes a debug tab based on the build-time environment flag.

Its responsibilities include:

  • Creating and configuring the bottom tab navigator
  • Registering all top-level screen routes (Home, Prediction, Dashboard, Debug)
  • Localizing tab labels via react-i18next
  • Conditionally rendering the Debug tab based on the EXPO_PUBLIC_DEBUG environment variable
  • Providing the single NavigationContainer root for the application

Invariants

Single Navigation Root

The application has exactly one NavigationContainer. This component is the sole owner of navigation state and must not be nested inside another NavigationContainer.

Build-Time Debug Gating

The DEBUG_MODE constant is resolved at build time from process.env.EXPO_PUBLIC_DEBUG.

  • The Debug tab is included only when EXPO_PUBLIC_DEBUG === 'true' in .env.local
  • In production builds where the variable is unset, the tab is never registered and DebugScreen is never reachable
  • The value cannot be changed at runtime

Localized Tab Labels

All tab titles are resolved through the t() translation function and are never hardcoded strings.

Tab label keys:

Routei18n key
Hometabs.home
Predictiontabs.prediction
Dashboardtabs.dashboard
Debugtabs.debug

Variants

Debug Tab Visibility

The navigator renders either 3 or 4 tabs depending on the build:

  • Production (EXPO_PUBLIC_DEBUG unset or not 'true'): Home, Prediction, Dashboard
  • Debug (EXPO_PUBLIC_DEBUG=true): Home, Prediction, Dashboard, Debug

The DebugScreen import is always present in the bundle but the tab route is only registered when DEBUG_MODE is true.

Exports

TabNavigator (default)

const TabNavigator: React.FC

Renders the full navigation shell with a bottom tab bar. Must be mounted at the application root.

Returns

A NavigationContainer wrapping a Tab.Navigator with all registered screen routes.