Conventions

Theme System

The design system is defined in src/constants/theme.ts.

Colors


import { Colors } from '@/constants/theme';
 
Colors.primary.green     // '#004225' (brand racing green)
Colors.primary.offGreen  // '#5b786b'
Colors.primary.offWhite  // '#EFF1E5'
Colors.secondary.teal    // '#89CFBB'
Colors.secondary.violet  // '#A572FF'
Colors.secondary.royalBlue // '#2E384A'
Colors.accent.darkPurple // '#3D12A3'
Colors.accent.lightBlue  // '#64DCFF'
Colors.accent.neonGreen  // '#C8F364'
Colors.gray.50 - .900    // Figma design system grays
Colors.success           // '#22C55E'
Colors.warning           // '#F59E0B'
Colors.error             // '#EF4444'
Colors.info              // '#3B82F6'

Fonts

Poppins is the primary font, loaded in the root layout from assets/fonts/:


import { Fonts, FontSize, FontWeight } from '@/constants/theme';
 
Fonts.light       // 'Poppins-Light'
Fonts.regular     // 'Poppins-Regular'
Fonts.medium      // 'Poppins-Medium'
Fonts.semiBold    // 'Poppins-SemiBold'
Fonts.bold        // 'Poppins-Bold'
Fonts.extraBold   // 'Poppins-ExtraBold'
Fonts.italic      // 'Poppins-Italic'
 
FontSize.xs       // 12
FontSize.sm       // 14
FontSize.base     // 16
FontSize.lg       // 18
FontSize.xl       // 20
FontSize['2xl']   // 24
FontSize['3xl']   // 30

Spacing

Tailwind-inspired spacing scale (multiplied by 4):


import { Spacing } from '@/constants/theme';
 
Spacing[1]  // 4
Spacing[2]  // 8
Spacing[3]  // 12
Spacing[4]  // 16
Spacing[6]  // 24
Spacing[8]  // 32
Spacing[12] // 48

Border Radius


import { BorderRadius } from '@/constants/theme';
 
BorderRadius.sm   // 4
BorderRadius.md   // 8
BorderRadius.lg   // 12
BorderRadius.xl   // 16
BorderRadius.full // 9999

Shadows

Platform-aware shadow objects (iOS shadowColor/shadowOffset + Android elevation):


import { Shadow } from '@/constants/theme';
 
Shadow.sm   // elevation: 1
Shadow.md   // elevation: 3
Shadow.lg   // elevation: 6
Shadow.xl   // elevation: 10

Code Style

Components

Functional components only — no class components
Named exports for components: export function HouseCard() {} or export const HouseCard = () => {}
Use function keyword for pure/helper functions
File structure order: exported component, subcomponents, helpers, static content, types

TypeScript

Prefer interfaces over types for object shapes
Avoid enums — use maps/objects instead
Descriptive variable names with auxiliary verbs: isLoading, hasError, shouldGroup, isUsaMode

Directory Naming

Lowercase with dashes for all directories:


components/house-card/
features/explore-search/
hooks/use-debounce.ts

File Naming

Lowercase with dashes, matching the component/function name:


house-card.tsx         -> export function HouseCard
use-list-houses.ts     -> export const useListHouses
explore-filters-context.tsx -> export const ExploreFiltersProvider

Styling

Use StyleSheet.create() for all styles
Reference theme tokens (Colors, Fonts, Spacing, etc.) instead of hardcoding values
Responsive design via Flexbox and useWindowDimensions

Images

Use expo-image for optimized image rendering:


import { Image } from 'expo-image';

Performance

Memoize with useMemo and useCallback to prevent unnecessary re-renders
Use @shopify/flash-list (FlashList) instead of FlatList for large lists
Early returns for error/loading conditions — avoid deep nesting

Error Handling

Use early returns for error conditions
Context hooks throw if used outside their provider
API errors are caught and logged with console.error

Analytics

Mixpanel is used for event tracking via src/lib/mixpanel.ts. The track() function is used throughout the app:


import { track } from '@/lib/mixpanel';
 
track('Explore Sort Applied', { sort_type: option });

User identification happens on sign-in via the identify() function.

Formatting

Prettier for auto-formatting: npm run format
ESLint with expo + prettier configs: npm run lint
Minimize inline code comments