App Anatomy
This browser-based coding tool lets students write React Native code and watch it update live.
What is Expo Snack?
A reusable piece of a screen, like a button, a picture, or a line of text, is called this.
What is a component?
This is the one organized place at the bottom of a file where every color, size, and space lives.
What is the StyleSheet?
This is the system that controls the "trips" a user takes between screens.
What is navigation?
Along with one color palette and even spacing, this repeated setting is one of the three marks of a polished app.
What is a type scale (matching text sizes)?
This is the first screen users see when they open the app, unlike the one that appears after tapping "See More."
What is Screen1.js?
This component acts like an empty box that groups others together but doesn't show anything on its own.
What is View?
This invisible "arranger" system controls how components are laid out on the screen.
What is flexbox?
This hook gives a screen access to the app's navigation system.
What is useNavigation?
This is the most important rule when picking colors, so text stays easy to read.
What is contrast?
This is the JavaScript-based tool used to build mobile apps, seen in real apps like Discord and Instagram.
What is React Native?
This is the syntax used in the return section that looks like HTML but is actually JavaScript underneath.
What is JSX?
This flexbox property sets whether components line up in a row or a column.
What is flexDirection?
This function is called with a screen's name inside its parentheses to open that screen.
What is navigate()?
This printed tool helped students test their own app like a first-time user.
What is the UX Cheat Sheet?
These are the four parts every React Native file always has.
What are imports, component, return, and styles?
This component needs a constant holding an image URL defined in the component section before it can be placed in the return section.
What is Image?
This flexbox property centers content along the main direction, like top-to-bottom.
What is justifyContent?
This function loads a picture straight from the project's assets folder.
What is require()?
During peer review, students traded a positive note and this second kind of note.
What is an improvement note?
This file connects the app's two screens and remains unchanged throughout the sprint.
What is App.js?
This JSX rule means tags that don't wrap around anything, like Image, must close themselves with a slash.
What is self-closing?
This flexbox property centers content across the main direction, like side-to-side.
What is alignItems?
This button did nothing back in Lesson 1, but this lesson finally wired it up with navigate() to send users from Screen2 back to Screen1.
What is the "Go Back" button?
This was the "big question" partners had to answer about each other's two screens.
What is "Do our two screens look like one app?"