/ React Native / Phase 6 Phase 6 Days 29-34
Motion, Gestures, Performance & Accessibility Reanimated, Gesture Handler, frame budgets, lists, memory, screen readers, and inclusive interaction
Phase Goal Create responsive native-feeling motion without sacrificing correctness, battery, or accessibility.
Day 29: Animation Mental Model & Reanimated
Frames, JS thread, UI thread, and worklets Build the mental model for Frames, JS thread, UI thread, and worklets Implement Frames, JS thread, UI thread, and worklets in a small typed example Apply Frames, JS thread, UI thread, and worklets to a realistic mobile product flow Debug the platform-specific failure modes of Frames, JS thread, UI thread, and worklets
Shared values, animated styles, timing, spring, and interpolation Build the mental model for Shared values, animated styles, timing, spring, and interpolation Implement Shared values, animated styles, timing, spring, and interpolation in a small typed example Apply Shared values, animated styles, timing, spring, and interpolation to a realistic mobile product flow Debug the platform-specific failure modes of Shared values, animated styles, timing, spring, and interpolation
Entry, exit, layout, and reduced-motion behavior Build the mental model for Entry, exit, layout, and reduced-motion behavior Implement Entry, exit, layout, and reduced-motion behavior in a small typed example Apply Entry, exit, layout, and reduced-motion behavior to a realistic mobile product flow Debug the platform-specific failure modes of Entry, exit, layout, and reduced-motion behavior
Animation as state communication rather than decoration
Day 30: Gestures & Interruptible Interaction
Gesture state, recognition, composition, and conflicts Build the mental model for Gesture state, recognition, composition, and conflicts Implement Gesture state, recognition, composition, and conflicts in a small typed example Apply Gesture state, recognition, composition, and conflicts to a realistic mobile product flow Debug the platform-specific failure modes of Gesture state, recognition, composition, and conflicts
Pan, tap, long press, pinch, and velocity Build the mental model for Pan, tap, long press, pinch, and velocity Implement Pan, tap, long press, pinch, and velocity in a small typed example Apply Pan, tap, long press, pinch, and velocity to a realistic mobile product flow Debug the platform-specific failure modes of Pan, tap, long press, pinch, and velocity
Gesture-driven animation and snap decisions
Cancellation, accessibility alternatives, and platform expectations
Day 31: Performance Measurement & Rendering
16.67ms frame budget and two-thread symptoms
React Native DevTools profiler and release-mode measurement
Render causes, memoization cost, and selector stability
Image, bundle, startup, and memory investigation Build the mental model for Image, bundle, startup, and memory investigation Implement Image, bundle, startup, and memory investigation in a small typed example Apply Image, bundle, startup, and memory investigation to a realistic mobile product flow Debug the platform-specific failure modes of Image, bundle, startup, and memory investigation
Day 32: High-Scale Lists & Media Performance
Virtualization configuration from measurements
Stable renderItem, keys, item layouts, and pagination Build the mental model for Stable renderItem, keys, item layouts, and pagination Implement Stable renderItem, keys, item layouts, and pagination in a small typed example Apply Stable renderItem, keys, item layouts, and pagination to a realistic mobile product flow Debug the platform-specific failure modes of Stable renderItem, keys, item layouts, and pagination
Image caching, prefetching, placeholders, and memory pressure Build the mental model for Image caching, prefetching, placeholders, and memory pressure Implement Image caching, prefetching, placeholders, and memory pressure in a small typed example Apply Image caching, prefetching, placeholders, and memory pressure to a realistic mobile product flow Debug the platform-specific failure modes of Image caching, prefetching, placeholders, and memory pressure
Avoiding nested virtualized lists and blank-area regressions
Day 33: Accessibility Beyond Labels
VoiceOver, TalkBack, focus order, roles, states, and actions Build the mental model for VoiceOver, TalkBack, focus order, roles, states, and actions Implement VoiceOver, TalkBack, focus order, roles, states, and actions in a small typed example Apply VoiceOver, TalkBack, focus order, roles, states, and actions to a realistic mobile product flow Debug the platform-specific failure modes of VoiceOver, TalkBack, focus order, roles, states, and actions
Dynamic type, contrast, reduced motion, and touch targets Build the mental model for Dynamic type, contrast, reduced motion, and touch targets Implement Dynamic type, contrast, reduced motion, and touch targets in a small typed example Apply Dynamic type, contrast, reduced motion, and touch targets to a realistic mobile product flow Debug the platform-specific failure modes of Dynamic type, contrast, reduced motion, and touch targets
Accessible forms, errors, modals, and announcements Build the mental model for Accessible forms, errors, modals, and announcements Implement Accessible forms, errors, modals, and announcements in a small typed example Apply Accessible forms, errors, modals, and announcements to a realistic mobile product flow Debug the platform-specific failure modes of Accessible forms, errors, modals, and announcements
Real-device assistive-technology test protocol
Day 34: Mini Project — Choreography Cue Composer
Large virtualized cue sheet and animated rehearsal cursor
Drag-to-reorder, duration adjustment, undo, and accessible controls Build the mental model for Drag-to-reorder, duration adjustment, undo, and accessible controls Implement Drag-to-reorder, duration adjustment, undo, and accessible controls in a small typed example Apply Drag-to-reorder, duration adjustment, undo, and accessible controls to a realistic mobile product flow Debug the platform-specific failure modes of Drag-to-reorder, duration adjustment, undo, and accessible controls
Measured gesture latency, render stability, memory, and reduced motion Build the mental model for Measured gesture latency, render stability, memory, and reduced motion Implement Measured gesture latency, render stability, memory, and reduced motion in a small typed example Apply Measured gesture latency, render stability, memory, and reduced motion to a realistic mobile product flow Debug the platform-specific failure modes of Measured gesture latency, render stability, memory, and reduced motion
Project requirements, constraints & review Build the mental model for Project constraints, profiler evidence, transfer change, and assistive-tech audit Implement Project constraints, profiler evidence, transfer change, and assistive-tech audit in a small typed example Apply Project constraints, profiler evidence, transfer change, and assistive-tech audit to a realistic mobile product flow Debug the platform-specific failure modes of Project constraints, profiler evidence, transfer change, and assistive-tech audit
Choreography Cue Composer Build a rehearsal tool for a dance leader arranging hundreds of lighting and movement cues. Drag and pinch interactions may accelerate editing, but every decision must also be possible with labelled controls, switch access, keyboard input where available, and reduced motion.
After this phase, you'll be able to:
Frames, JS thread, UI thread, and worklets Shared values, animated styles, timing, spring, and interpolation Entry, exit, layout, and reduced-motion behavior Animation as state communication rather than decoration Gesture state, recognition, composition, and conflicts Pan, tap, long press, pinch, and velocity Gesture-driven animation and snap decisions Cancellation, accessibility alternatives, and platform expectations You can apply Phase 6 skills in a tested mobile project on Android and iOS.