React Native: Developing Android and iOS Apps Course

Lesson 1 • Scaffolding Your First Project

Uses the React Native CLI and Expo CLI to generate project templates and compares their trade-offs. Students run a Hello World app on both Android and iOS simulators.

Lesson 2 • Understanding React Native Architecture

Covers the JavaScript bridge, native modules, and the new Fabric renderer. Provides the mental model needed to debug and optimize throughout the course.

Lesson 3 • Debugging and Developer Tools

Introduces Flipper, React DevTools, and the in-app developer menu for inspecting state and network calls. Debugging skills established here apply to every subsequent chapter.

Lesson 1 • Functional Components and JSX

Reviews JSX syntax, component composition, and prop passing in a React Native context. Establishes the component-driven mindset required for all UI work ahead.

Lesson 2 • State Management with Hooks

Covers useState, useReducer, and useRef for managing local component state and side effects. These hooks power the interactive features built throughout the course.

Lesson 3 • Context API for Shared State

Implements React Context with useContext to share theme and auth state across components. Provides a lightweight global state solution before Redux is introduced.

Lesson 4 • Side Effects and Lifecycle with useEffect

Explains the useEffect dependency array, cleanup functions, and common pitfalls like stale closures. Correct effect usage is critical for data fetching covered in later chapters.

Lesson 1 • Flexbox Layout System

Explains flexDirection, justifyContent, alignItems, and flex sizing as applied in React Native. Mastery here enables consistent cross-platform layouts in all project work.

Lesson 2 • Responsive Design Techniques

Uses Dimensions API, useWindowDimensions hook, and percentage-based sizing for adaptive layouts. Ensures UIs look correct on phones and tablets of varying screen sizes.

Lesson 3 • StyleSheet API and Theming

Teaches StyleSheet.create, inline styles, and dynamic style composition. Students build a reusable theme object used across the course project.

Lesson 1 • Tab and Drawer Navigation

Implements bottom tab and side drawer navigators with icons and badge support. These patterns provide the top-level app structure used in the course project.

Lesson 2 • Deep Linking and URL Handling

Configures URL schemes and universal links to open specific screens from external sources. Deep linking is required for push notification navigation covered later.

Lesson 3 • React Navigation Setup and Concepts

Installs React Navigation dependencies and explains the navigator, screen, and route hierarchy. This foundation is required before any navigation pattern can be implemented.

Lesson 4 • Authentication Flow Patterns

Implements conditional navigation stacks that switch between auth and main app screens based on token state. This pattern is reused in the course's full project.

Lesson 1 • Fetching Data with the Fetch API

Uses the Fetch API and Axios to make GET, POST, PUT, and DELETE requests with proper error handling. Network calls power the dynamic content in the course project.

Lesson 2 • SQLite and Structured Local Data

Integrates a SQLite library to create tables, run queries, and manage relational data on-device. Structured storage is needed for the offline-first feature in the project.

Lesson 3 • Caching and Offline Strategies

Implements stale-while-revalidate caching and network-status detection for offline UX. These strategies ensure the app remains usable without a network connection.

Lesson 4 • Async/Await and Promise Patterns

Applies async/await syntax, Promise.all, and cancellation patterns to manage concurrent requests. Clean async code prevents race conditions in data-heavy screens.

Lesson 1 • Geolocation and Maps Integration

Retrieves device location with Geolocation API and renders maps using react-native-maps. Location features power the map screen in the course project.

Lesson 2 • Camera and Media Library Access

Integrates react-native-vision-camera and the media library API for photo capture and selection. Camera features are used in the profile and content upload screens of the project.

Lesson 3 • Push Notifications Setup

Configures Firebase Cloud Messaging for Android and APNs for iOS to deliver push notifications. Notification handling connects to the deep linking patterns from Chapter 4.

Lesson 4 • Sensors, Biometrics, and Haptics

Accesses accelerometer, biometric authentication, and haptic feedback APIs for enhanced UX. These features differentiate native mobile apps from web-based alternatives.

Lesson 1 • React Query for Server State

Uses React Query's useQuery and useMutation hooks to separate server state from UI state. This approach simplifies data synchronization compared to manual Redux thunks.

Lesson 2 • Async Thunks and RTK Query

Handles async data fetching with createAsyncThunk and the RTK Query data-fetching layer. RTK Query replaces manual fetch logic and caching from Chapter 5.

Lesson 3 • Zustand for Lightweight Global State

Implements Zustand stores for UI state that does not belong in server-state libraries. Zustand's minimal API complements React Query in a modern state architecture.

Lesson 4 • Redux Toolkit Fundamentals

Creates slices, reducers, and actions with Redux Toolkit's createSlice and configureStore APIs. RTK eliminates boilerplate and is the industry-standard Redux approach.

Lesson 1 • Performance Profiling and Optimization

Uses the Hermes engine, Flipper performance panel, and re-render tracing to identify bottlenecks. Optimization techniques here apply to all screens built in the course project.

Lesson 2 • Unit and Integration Testing

Writes component tests with Jest and React Native Testing Library and integration tests for navigation flows. A tested codebase reduces regression risk during the deployment phase.

Lesson 3 • End-to-End Testing with Detox

Automates full user flows on real simulators using Detox for reliable E2E coverage. E2E tests catch integration issues that unit tests cannot detect.

Lesson 4 • Animations with Animated API and Reanimated

Builds smooth UI animations using the Animated API and React Native Reanimated 3 on the UI thread. Fluid animations are a key differentiator of high-quality mobile apps.