React Native Fundamentals: A Comprehensive Guide

Lesson 1 • What Is React Native

Defines React Native, its relationship to React, and its cross-platform model. Sets context for why it is used over native-only or web-only approaches.

Lesson 2 • Setting Up the Development Environment

Guides installation of all required tools for iOS and Android development. Ensures every student has a verified, runnable environment before writing code.

Lesson 3 • Core JavaScript and ES6 Prerequisites

Reviews JavaScript syntax and ES6 features essential for React Native. Bridges any knowledge gaps before students encounter component-based patterns.

Lesson 1 • State Management with useState

Covers the useState hook for managing local component state. Students build interactive UI elements that respond to user input and re-render correctly.

Lesson 2 • Lists and Conditional Rendering

Teaches rendering dynamic lists and conditionally displaying UI elements. These patterns appear in nearly every real-world React Native screen.

Lesson 3 • Understanding JSX Syntax

Explains how JSX compiles to JavaScript and how it differs from HTML. Connects JSX rules directly to the components students will build in React Native.

Lesson 4 • Functional Components and Props

Introduces functional components as the primary building block of React Native UIs. Teaches prop passing, typing, and default values for reusable design.

Lesson 1 • TextInput and Form Components

Teaches capturing user input through TextInput and related form patterns. Students build controlled forms with validation feedback before submission.

Lesson 2 • Platform-Specific APIs and Components

Introduces Platform module and platform-specific file extensions for divergent behavior. Students write code that adapts gracefully to iOS and Android differences.

Lesson 3 • Touchable and Pressable Interactions

Covers all touch-handling components and their behavioral differences. Students choose the right component for each interaction pattern in their apps.

Lesson 4 • View, Text, and Image Components

Introduces the three most fundamental React Native components and their props. Students understand why these replace div, p, and img from web development.

Lesson 1 • Dimensions and Responsive Design

Teaches using Dimensions API and percentage-based sizing for responsive layouts. Students build UIs that adapt to phones, tablets, and orientation changes.

Lesson 2 • Flexbox Layout Fundamentals

Covers Flexbox as the primary layout engine in React Native, noting its differences from web Flexbox. Students arrange components using direction, alignment, and wrapping.

Lesson 3 • StyleSheet API and Inline Styles

Explains how React Native styles differ from CSS and how StyleSheet.create works. Students adopt best practices for style organization and performance.

Lesson 4 • Typography and Color Systems

Covers font styling, custom fonts, and building a consistent color palette. Students establish a design token pattern reusable across the entire app.

Lesson 1 • Navigation Hooks and Programmatic Control

Covers useNavigation, useFocusEffect, and useRoute hooks for flexible navigation logic. Students trigger navigation from outside screen components and respond to focus events.

Lesson 2 • Stack Navigator for Screen Flows

Builds linear screen flows with the native stack navigator and transition animations. Students pass parameters between screens and manage the back stack.

Lesson 3 • Tab and Drawer Navigators

Adds bottom tab and side drawer navigators for top-level app sections. Students nest navigators to create complex, real-world navigation structures.

Lesson 4 • Deep Linking and Authentication Flows

Configures URL-based deep linking and builds protected route patterns for auth. Students implement login-gated navigation that persists across app restarts.

Lesson 1 • Context API for Global State

Builds a Context provider and consumer pattern for app-wide state without third-party libraries. Students implement theme and auth context as practical examples.

Lesson 2 • Persisting State with AsyncStorage

Integrates AsyncStorage to persist user data across app sessions. Students combine persistence with Redux or Context to restore state on app launch.

Lesson 3 • Redux Toolkit Fundamentals

Introduces Redux Toolkit's slice, store, and dispatch model for predictable state. Students migrate a Context-based feature to Redux to compare the two approaches.

Lesson 4 • Lifting State and Prop Drilling

Explains when local state must be lifted and the problems prop drilling creates. Students recognize the threshold at which a global state solution becomes necessary.

Lesson 1 • Pagination and Infinite Scrolling

Implements cursor-based and page-based pagination with FlatList's onEndReached. Students load additional data seamlessly without disrupting the user's scroll position.

Lesson 2 • Loading, Error, and Empty States

Designs UI states for loading spinners, error messages, and empty data scenarios. Students build a reusable data-fetching wrapper component used across screens.

Lesson 3 • Fetch API and HTTP Fundamentals

Uses the built-in Fetch API to make GET and POST requests and parse JSON responses. Students handle status codes and network errors in a consistent pattern.

Lesson 4 • Offline Support and Network Detection

Detects network connectivity changes and serves cached data when offline. Students implement a queue for failed requests that retries when connectivity is restored.

Lesson 1 • End-to-End Testing with Detox

Automates full user flows on real simulators using Detox. Students write E2E tests that validate critical paths before every release build.

Lesson 2 • Unit and Integration Testing

Writes unit tests with Jest and component tests with React Native Testing Library. Students test user interactions, async state changes, and navigation flows.

Lesson 3 • Building and Submitting to App Stores

Configures release builds, signing certificates, and app store metadata for both platforms. Students produce signed APK/AAB and IPA files ready for store review.

Lesson 4 • Animations with Animated API and Reanimated

Builds smooth animations using the Animated API and introduces React Native Reanimated for complex gestures. Students animate opacity, position, and scale on the UI thread.