/ React Native / Phase 2 Phase 2 Days 6-11
Layout, Styling & Responsive Mobile UI Yoga/Flexbox, StyleSheet, adaptive design, forms, lists, keyboard, and accessibility
Phase Goal Create interfaces that feel intentionally mobile across screen sizes, font scales, themes, and input methods.
Day 6: Yoga, Flexbox & the Mobile Layout Axis
Yoga layout and default column direction
Main axis, cross axis, grow, shrink, basis, and gap Build the mental model for Main axis, cross axis, grow, shrink, basis, and gap Implement Main axis, cross axis, grow, shrink, basis, and gap in a small typed example Apply Main axis, cross axis, grow, shrink, basis, and gap to a realistic mobile product flow Debug the platform-specific failure modes of Main axis, cross axis, grow, shrink, basis, and gap
Intrinsic size, percentages, absolute positioning, and measurement Build the mental model for Intrinsic size, percentages, absolute positioning, and measurement Implement Intrinsic size, percentages, absolute positioning, and measurement in a small typed example Apply Intrinsic size, percentages, absolute positioning, and measurement to a realistic mobile product flow Debug the platform-specific failure modes of Intrinsic size, percentages, absolute positioning, and measurement
Debugging overflow and compressed content
Day 7: StyleSheet, Tokens, Themes & Dark Mode
StyleSheet creation and style-array precedence
Spacing, color, typography, radius, and elevation tokens Build the mental model for Spacing, color, typography, radius, and elevation tokens Implement Spacing, color, typography, radius, and elevation tokens in a small typed example Apply Spacing, color, typography, radius, and elevation tokens to a realistic mobile product flow Debug the platform-specific failure modes of Spacing, color, typography, radius, and elevation tokens
useColorScheme and semantic theme roles
Dynamic type and contrast-aware design
Day 8: Images, Icons & Responsive Media
Bundled versus remote images and explicit dimensions
resizeMode, aspect ratios, caching awareness, and placeholders Build the mental model for resizeMode, aspect ratios, caching awareness, and placeholders Implement resizeMode, aspect ratios, caching awareness, and placeholders in a small typed example Apply resizeMode, aspect ratios, caching awareness, and placeholders to a realistic mobile product flow Debug the platform-specific failure modes of resizeMode, aspect ratios, caching awareness, and placeholders
Vector icons and platform-native symbols
Responsive media cards without layout shift
Day 9: Lists That Scale: FlatList & SectionList
ScrollView versus virtualized-list decision
Stable keys, renderItem, separators, headers, and empty states Build the mental model for Stable keys, renderItem, separators, headers, and empty states Implement Stable keys, renderItem, separators, headers, and empty states in a small typed example Apply Stable keys, renderItem, separators, headers, and empty states to a realistic mobile product flow Debug the platform-specific failure modes of Stable keys, renderItem, separators, headers, and empty states
Windowing, item layout, pagination signals, and memoization judgment Build the mental model for Windowing, item layout, pagination signals, and memoization judgment Implement Windowing, item layout, pagination signals, and memoization judgment in a small typed example Apply Windowing, item layout, pagination signals, and memoization judgment to a realistic mobile product flow Debug the platform-specific failure modes of Windowing, item layout, pagination signals, and memoization judgment
Refresh, loading, failure, and retry states Build the mental model for Refresh, loading, failure, and retry states Implement Refresh, loading, failure, and retry states in a small typed example Apply Refresh, loading, failure, and retry states to a realistic mobile product flow Debug the platform-specific failure modes of Refresh, loading, failure, and retry states
Day 10: Forms, Keyboard & Input UX
TextInput modes, controlled values, focus, and submit behavior Build the mental model for TextInput modes, controlled values, focus, and submit behavior Implement TextInput modes, controlled values, focus, and submit behavior in a small typed example Apply TextInput modes, controlled values, focus, and submit behavior to a realistic mobile product flow Debug the platform-specific failure modes of TextInput modes, controlled values, focus, and submit behavior
Keyboard avoidance, dismissal, return keys, and autofill Build the mental model for Keyboard avoidance, dismissal, return keys, and autofill Implement Keyboard avoidance, dismissal, return keys, and autofill in a small typed example Apply Keyboard avoidance, dismissal, return keys, and autofill to a realistic mobile product flow Debug the platform-specific failure modes of Keyboard avoidance, dismissal, return keys, and autofill
Validation timing, error announcements, and form state
Switches, selections, date inputs, and native conventions Build the mental model for Switches, selections, date inputs, and native conventions Implement Switches, selections, date inputs, and native conventions in a small typed example Apply Switches, selections, date inputs, and native conventions to a realistic mobile product flow Debug the platform-specific failure modes of Switches, selections, date inputs, and native conventions
Day 11: Mini Project — Community Recipe Exchange
Cuisine-grouped virtualized recipe catalogue
Keyboard-safe contribution form, search, and dietary filters
Theme-aware phone and tablet recipe layouts
Project requirements, constraints & review Build the mental model for Project constraints, accessibility audit, transfer change, and visual checklist Implement Project constraints, accessibility audit, transfer change, and visual checklist in a small typed example Apply Project constraints, accessibility audit, transfer change, and visual checklist to a realistic mobile product flow Debug the platform-specific failure modes of Project constraints, accessibility audit, transfer change, and visual checklist
Community Recipe Exchange Build a responsive recipe catalogue for a neighborhood cooking club deciding what to cook with available time and dietary constraints. The supplied local dataset must remain usable at large text sizes and on narrow phones and tablets.
After this phase, you'll be able to:
Yoga layout and default column direction Main axis, cross axis, grow, shrink, basis, and gap Intrinsic size, percentages, absolute positioning, and measurement Debugging overflow and compressed content StyleSheet creation and style-array precedence Spacing, color, typography, radius, and elevation tokens useColorScheme and semantic theme roles Dynamic type and contrast-aware design You can apply Phase 2 skills in a tested mobile project on Android and iOS.