Navigation
Tab Configuration
The main tab navigator is defined in src/app/(tabs)/_layout.tsx. It uses a CustomTabBar component (src/components/custom-tab-bar.tsx) for rendering.
Tabs
| Tab | Route Name | Icon Component | Visibility |
|---|---|---|---|
| Explore | explore | ExploreIcon | Always |
| Viewings/Rental | viewings | ViewingsIcon | Always (title changes with HOUSR_2_0 flag) |
| Bills | bills | BillsIcon | UK only (hidden when isUsaMode) |
| Promotions | promotions | PromotionsIcon | Always |
| Profile | profile | ProfileIcon | Always |
| Likes | likes | — | Hidden (href: null, not in tab bar) |
Tab icons are defined in src/components/tab-icons.tsx. Active tint color is Colors.primary.green (#004225).
Feature Flag Tab Changes
The viewings tab title is controlled by the HOUSR_2_0 feature flag:
title: featureFlags.HOUSR_2_0 ? 'rental' : 'viewings'Route Protection
NavigationGuardProvider (src/context/navigation-guard-context.tsx) protects routes that require authentication.
Protected routes: events, wallet, profile, viewings, bills, roomie, rideshare
Protection works at two levels:
- Tab bar level —
CustomTabBarchecks auth before allowing tab navigation - Route level —
NavigationGuardProviderintercepts pathname changes and redirects unauthenticated users to/sign-in
Dynamic Routes
| Route | Path | Description |
|---|---|---|
| House detail | house/[id].tsx | Property overview page |
| Perk info | perk-info/[id].tsx | Perk detail page |
| Inquiry detail | (tabs)/viewings/inquiry/[id].tsx | Viewing inquiry detail |
| Roomie chat | (tabs)/explore/roomie/chat/[roomId].tsx | Roomie chat room |
Explore Sub-Navigation
The explore tab contains nested route groups for roomie and rideshare:
(tabs)/explore/
index.tsx # Main explore screen (house listings + map)
_layout.tsx # Explore stack layout
roomie/
_layout.tsx # Roomie stack
index.tsx # Roomie landing
explore.tsx # Browse profiles
about-you.tsx # Profile setup
bio.tsx # Bio entry
profile-pic.tsx # Photo upload
more-info.tsx # Additional details
house-pics.tsx # House photos
chat.tsx # Chat list
chat/[roomId].tsx # Individual chat
edit-profile.tsx # Edit profile
edit-profile-item.tsx # Edit single profile field
edit-profile-pic.tsx # Change photo
edit-house-pics.tsx # Change house photos
rideshare/
_layout.tsx # Rideshare stack
index.tsx # Rideshare landing
create-ride.tsx # Create a ride
search-ride.tsx # Search for rides
search-results.tsx # Search results
ride-info.tsx # Ride details
ride-details.tsx # Ride details (alt)
ride-created.tsx # Ride confirmation
rides.tsx # My rides
edit-ride.tsx # Edit ride
profile.tsx # Rideshare profile
edit-profile.tsx # Edit rideshare profile
driver-landing.tsx # Driver dashboard
driver/update-profile.tsx # Driver profile update
chat.tsx # Chat for ride request
messages.tsx # Messages listPromotions Sub-Navigation
(tabs)/promotions/
_layout.tsx # Promotions layout
(tabs)/
_layout.tsx # Material top tabs
perks.tsx # Perks tab
events.tsx # Events tab
wallet.tsx # Wallet tab
(perks)/
_layout.tsx # Perks stack
perk-search.tsx # Perk search
perk-redeem.tsx # Perk redemptionBills Sub-Navigation
(tabs)/bills/
_layout.tsx # Bills stack
index.tsx # Bills landing
bills-quotes.tsx # View quotes
bills-signup.tsx # Signup flow
quote-display.tsx # Quote display
finalise-details.tsx # Finalize details
direct-debit.tsx # Direct debit setup
alternative-address.tsx # Alternative address
signup-waiting-page.tsx # Waiting state
usage.tsx # Usage dashboard
your-meter-readings.tsx # Meter readings list
submit-meter-readings.tsx # Submit readings
request-smart-meter.tsx # Smart meter requestWelcome City Modal
For unauthenticated UK users, a WelcomeCityModal prompts city selection on first launch. In US mode, the city defaults to “Lincoln” automatically. Controlled by WelcomeCityModalController in the root layout.