React Native 101: Capstone 5.0 Introduction Pull together components, state, layout, lists, and (optionally) navigation into a real mini-app. Coding 101’s capstone was “Sally Says”; ours is Color Echo — a mobile memory game — plus a free-choice app. Lesson 5 - Overview Color Echo — build the game Build your own app Capstone 5.1 Color Echo Goal: The app plays a sequence of colors (highlight pads in order). The player repeats the sequence by tapping. Each round adds one more step. Wrong tap → game over and show score (longest sequence). Requirements Four colored pads (e.g. red, blue, green, yellow) in a 2×2 Flexbox grid State for: sequence array, player step index, whether the app is “playing back,” score / round Start button begins round 1 with one random color After successful repeat, append a new random color and replay the full sequence Disable taps during playback Visual feedback when a pad is “lit” (brighter color or opacity) Alert or on-screen message on game over Suggested approach Build the static 2×2 pad UI with Pressable Add a function flashPad(color) that lights a pad for ~400ms Add playSequence() that awaits flashing each color in order On pad press, compare to sequence[playerIndex] If match and end of sequence → next round; if mismatch → game over Helpful snippet ideas Try yourself first. A reference solution is on the Answers tab. Capstone 5.2 Build your own app Ship a small Expo app that uses at least: Multiple components (or screens) useState for meaningful interaction StyleSheet + Flexbox layout Either FlatList or React Navigation (ideally both) Idea starters Habit check-in tracker for the week Flashcard deck for a language you are learning Tip / bill splitter with history Simple recipe list → detail screen When done, celebrate — you can build real mobile UIs. Keep practicing by reading Expo docs and shipping tiny weekly apps. Prior Lesson Back to Intro