React Native Course

Lesson 1 • Developer Tools and Debugging Basics

Introduces the React Native debugger, Flipper, and in-app developer menu. Gives students immediate feedback tools they will rely on throughout the course.

Lesson 2 • What Is React Native

Covers React Native's role in cross-platform mobile development and how it differs from React for the web. Sets the conceptual baseline for all subsequent chapters.

Lesson 3 • Creating Your First Project

Uses the React Native CLI and Expo to scaffold a new app and explore the generated file structure. Connects tooling knowledge to hands-on project creation.

Lesson 4 • Development Environment Setup

Installs and configures all required tools for iOS and Android development. Ensures every student has a reproducible, working local environment.

Lesson 1 • Text, View, and Image Components

Covers the three most fundamental React Native components and their essential props. Students build static layouts combining text, containers, and images.

Lesson 2 • Input and Form Components

Covers TextInput, Switch, and Picker for capturing user input. Establishes the component knowledge needed before introducing state management.

Lesson 3 • JSX Fundamentals in React Native

Explains JSX syntax, expression embedding, and how JSX compiles to native UI calls. Provides the syntactic foundation for all component work ahead.

Lesson 4 • Touchable and Pressable Components

Introduces touch-handling components and their feedback behaviours. Connects static layouts to interactive elements students will use in every app.

Lesson 1 • StyleSheet API and Inline Styles

Compares StyleSheet.create with inline style objects and explains performance implications. Establishes consistent styling patterns used throughout the course.

Lesson 2 • Flexbox Layout Model

Explains how React Native's Flexbox model differs from CSS and how to control axis alignment. Students gain the core layout skill used in every screen.

Lesson 3 • Theming and Reusable Style Patterns

Introduces theme objects, style constants, and component-level style encapsulation. Prepares students to maintain consistent design systems across large apps.

Lesson 4 • Spacing, Borders, and Shadows

Applies margin, padding, border, and shadow properties to refine visual hierarchy. Connects layout knowledge to polished, production-quality component appearance.

Lesson 1 • useState for Local State

Introduces the useState hook for managing component-level state and triggering re-renders. Enables students to build interactive, stateful UI elements.

Lesson 2 • useEffect and Side Effects

Covers useEffect for data fetching, subscriptions, and cleanup on unmount. Connects component lifecycle concepts to practical async operations.

Lesson 3 • Component Patterns and Best Practices

Covers container vs. presentational components, memoisation, and avoiding unnecessary renders. Prepares students to write performant, maintainable component trees.

Lesson 4 • Props and Component Communication

Explains how props pass data and callbacks between parent and child components. Establishes the unidirectional data flow pattern central to React Native apps.

Lesson 1 • Stack Navigator for Screen Flows

Builds push-and-pop screen flows using the native stack navigator. Covers the most common navigation pattern in mobile apps.

Lesson 2 • Tab and Drawer Navigators

Adds bottom tab and side drawer navigators for top-level app sections. Enables students to build the primary navigation shells used in most apps.

Lesson 3 • Authentication Flows and Protected Routes

Implements conditional navigation based on authentication state using navigator switching. Prepares students to build secure, role-aware app navigation.

Lesson 4 • React Navigation Setup and Concepts

Installs React Navigation and explains the navigator, screen, and route model. Provides the conceptual map students need before building any navigation flow.

Lesson 1 • Fetch API and Async Patterns

Uses the built-in Fetch API with async/await to make HTTP requests from React Native. Establishes the async data-fetching pattern used in all subsequent sections.

Lesson 2 • React Query for Server State

Uses React Query to cache, refetch, and synchronise server data automatically. Reduces boilerplate and improves data freshness across the app.

Lesson 3 • Axios for HTTP Requests

Introduces Axios for cleaner request syntax, interceptors, and base URL configuration. Advances students to the HTTP client most used in production React Native apps.

Lesson 4 • Local Storage with AsyncStorage

Persists key-value data locally using AsyncStorage for offline-first features. Prepares students to store tokens, preferences, and cached responses on device.

Lesson 1 • Camera and Image Picker

Captures photos and selects images from the gallery using react-native-image-picker. Enables students to build media-rich features common in social and utility apps.

Lesson 2 • Permissions Management

Requests and checks runtime permissions for sensitive device features on iOS and Android. Establishes the permission pattern required before accessing any native API.

Lesson 3 • Geolocation and Maps

Retrieves device location and renders interactive maps using react-native-maps. Connects location data to visual map experiences students can ship in real apps.

Lesson 4 • Push Notifications

Configures local and remote push notifications using Expo Notifications or Firebase. Teaches the full notification lifecycle from scheduling to user interaction.

Lesson 1 • Unit and Integration Testing

Writes component and hook tests using Jest and React Native Testing Library. Establishes a testing baseline that catches regressions before deployment.

Lesson 2 • Building and Releasing to App Stores

Generates signed release builds for Android and iOS and submits them to their respective stores. Completes the full development-to-production lifecycle for students.

Lesson 3 • Performance Profiling and Optimisation

Uses Flipper and the Performance Monitor to identify JS thread and render bottlenecks. Equips students to diagnose and fix the most common React Native performance issues.

Lesson 4 • End-to-End Testing with Detox

Automates full user flows on simulators and devices using Detox. Validates critical paths such as login and checkout before every release.