React Native 101: Screens & Layout 3.0 Introduction On the web you used HTML tags and CSS. In React Native, layout is mostly Flexbox via StyleSheet, and structure is View / Text / Image. Lesson 3 - Overview View, Text, StyleSheet Flexbox layout ScrollView and SafeAreaView Images and icons Platform differences (iOS / Android) Project Overview Profile Card — Name, bio, styled card Flexbox Playground — Row of colored boxes with space-between Scrollable Bio — Long text that scrolls Photo Gallery row — Horizontal images Platform Badge — Show iOS vs Android label Screens & Layout 3.1 View, Text, StyleSheet Prefer StyleSheet.create over giant inline style objects for reusable styles. Project 3.1: Profile Card Build a simple profile card with title and bio styles. Screens & Layout 3.2 Flexbox layout Default flex direction in RN is column (top to bottom). Common props: flex: 1 — fill available space flexDirection: 'row' — left to right justifyContent — main axis alignment alignItems — cross axis alignment gap — spacing between children (newer RN) Project 3.2: Flexbox Playground Three colored boxes in a row with space-between. Then try center and space-around. Screens & Layout 3.3 ScrollView and SafeAreaView ScrollView — content taller than the screen. SafeAreaView — avoid notches / home indicators (or use react-native-safe-area-context in Expo). Project 3.3: Scrollable Bio Write several paragraphs and scroll them. Confirm nothing hides under the status bar. Screens & Layout 3.4 Images and icons Remote images need width/height. For icons, Expo projects often use @expo/vector-icons. Project 3.4: Photo Gallery row Horizontal ScrollView with several Image thumbnails. Screens & Layout 3.5 Platform differences (iOS / Android) Project 3.5: Platform Badge Show a badge that says iOS or Android (or web) based on Platform.OS. Prior Lesson Next Lesson