React Native

What React Native is and isn't, Expo vs. bare workflow, project structure and the entry point, and components and hooks — the same model as React.

1. 1What React Native Actually Is8 minHow React Native renders real native UI from one JavaScript codebase, how that differs from a WebView-based hybrid app, and why this track has no live preview.
2. 2Expo vs. Bare React Native8 minThe two on-ramps into React Native development — Expo's managed toolchain versus the bare React Native CLI — and when each one actually earns its trade-offs.
3. 3Project Structure and the Entry Point7 minHow a typical React Native project is laid out, what actually happens at app launch, and where "the app starts here" lives in both Expo and bare projects.
4. 4Components and Hooks, the Same as React8 minReact Native components are plain React function components using the exact hooks you already know — this lesson shows what's actually different and what genuinely isn't.

View, Text and Image, Flexbox layout the React Native way, StyleSheet, ScrollView vs. FlatList, and safe areas.

1. 5The Core Components: View, Text, and Image9 minHow View, Text, and Image work in React Native — the classic gotcha that all text must live inside Text, and how Image sizing differs from the web's img tag.
2. 6Flexbox Layout in React Native9 minReact Native lays out every screen with Flexbox and nothing else, with one classic gotcha — its default flexDirection is column, the opposite of the web's default.
3. 7StyleSheet and Styling Patterns8 minWhy React Native uses StyleSheet.create instead of CSS, how unitless numbers work as density-independent pixels, and how to combine and conditionally apply styles.
4. 8ScrollView vs. FlatList8 minWhen to reach for ScrollView versus FlatList in React Native — the difference between rendering everything up front and virtualizing a long or unbounded list.
5. 9Safe Areas and Responsive Layout8 minWhy phone notches and status bars can overlap your UI, what a safe area is, and how to size layout responsively across different phones and tablets.

Pressable and touch handling, TextInput and forms, FlatList virtualization, and SectionList with pull-to-refresh.

1. 10Pressable and Touch Handling8 minThe modern touch-response primitive in React Native: onPress and onLongPress, style-as-a-function press feedback, and hitSlop for bigger touch targets.
2. 11TextInput and Forms9 minTextInput's controlled pattern, keyboard-related props, and multi-field form state -- then the plain TypeScript validation logic that behaves the same on any platform.
3. 12FlatList and Virtualization9 minWhat virtualization actually means for FlatList, why keyExtractor matters, and the performance props -- initialNumToRender, windowSize, getItemLayout, onEndReached.
4. 13SectionList and Pull-to-Refresh9 minSectionList's grouped-data shape and header rendering, RefreshControl for pull-to-refresh, and the plain function that shapes flat data into sections.

Stack, tab and drawer navigators, passing params, conditional navigation, and deep linking, taught as concepts rather than one library's exact API.

1. 14Navigation Concepts: Stack, Tab, and Drawer9 minReact Navigation's three fundamental patterns as durable concepts -- stack push/pop, persistent tabs, and the slide-out drawer, plus how real apps nest them.
2. 15Passing Params and Conditional Navigation8 minPassing params to a screen instead of prop-drilling through the navigator, and the root-level auth-stack-vs-app-stack pattern for conditional navigation.
3. 16Deep Linking, Conceptually8 minWhat a deep link is, why apps want them, and the pieces involved conceptually -- a URL scheme or universal-link domain, and a path-to-screen linking config.

Platform.OS and Platform.select, permissions and native modules, the bridge and JSI, and push notifications at a conceptual level.

1. 17Platform Differences: Platform.OS and Platform.select9 minHow to branch behavior and styling by platform with Platform.OS and Platform.select, and how platform-specific file extensions let Metro pick the right file automatically.
2. 18Permissions and Native Modules9 minWhy requesting camera, location or notification access is async and runtime-only on both platforms, and what a native module actually is under the hood.
3. 19The Bridge, JSI, and the Three Threads10 minThe three RN threads (JS, native UI, and native modules), plus the historical bridge and the newer JSI mechanism that connects them.
4. 20Push Notifications, Conceptually9 minThe real pipeline behind a push notification: device tokens, APNs/FCM delivery, notification vs. data payloads, and where Expo simplifies it.

Avoiding unnecessary re-renders, animations and the native driver, the New Architecture, debugging, testing, and shipping to the app stores.

1. 21Avoiding Unnecessary Re-Renders9 minThe re-render model is identical to React's, but a dropped frame is more visible on a phone, and an unmemoized FlatList renderItem is a common culprit.
2. 22Animations and the Native Driver9 minAnimated.timing and useNativeDriver: true, why moving frame updates onto the native thread keeps them smooth even when JS is busy, and its real limits.
3. 23The New Architecture: Fabric, TurboModules, and JSI9 minFabric, TurboModules and JSI as React Native's current direction: what changes under the hood, and what mostly doesn't change in your own component code.
4. 24Debugging Tools for React Native8 minThe dev menu, React DevTools, Flipper's evolving role, and the performance overlay: the real tools for finding what's actually slow or broken.
5. 25Testing React Native Apps9 minJest for pure logic, React Native Testing Library for component behavior, and Detox for real end-to-end flows: three layers, three different costs.
6. 26Shipping to the App Stores9 minDebug vs. release builds, code signing, app store review, and Expo's EAS Build/Submit and OTA updates: what happens before users ever see your app.