rn-stylinglisted

# React Native Styling ## Problem Statement React Native styling differs fundamentally from web CSS. NativeWind bridges the gap but has its own rules. This codebase uses a hybrid approach: BrandColors for semantic colors, NativeWind for layout utilities. --- ## Pattern: BrandColors vs NativeWind Classes **Rule:** Use BrandColors for semantic colors, NativeWind for layout/spacing. ```typescript // ✅ CORRECT: Hybrid approach <View className="flex-1 p-4 rounded-lg" style={{ backgroundColor: BrandColors.background }}> <Text className="text-lg font-semibold" style={{ color: BrandColors.textPrimary }}> Title </Text> </View> // ❌ WRONG: Hardcoded hex colors (violation scanner blocks this) <View className="flex-1 p-4 bg-[#1a1a2e]"> // ❌ WRONG: NativeWind color classes for brand colors <View className="flex-1 p-4 bg-blue-500"> // ✅ ACCEPTABLE: NativeWind brand aliases (if configured) <View className="flex-1 p-4 bg-brand-blue"> ``` **When to use which:** | Use Case | Approach | |----------|----------| | Brand colors (primary, secondary) | `BrandColors.primary` | | Background colors | `BrandColors.background` | | Text colors | `BrandColors.textPrimary`, `textSecondary` | | Layout (flex, padding, margin) | NativeWind classes | | Borders, radius | NativeWind classes | | Shadows | Style object (NativeWind shadows limited on iOS) | --- ## Pattern: Theme-Aware Colors **Problem:** Supporting light/dark mode with BrandColors. ```typescript // BrandColors.ts exports both