Overview

Want to learn React Native through code? This by-example tutorial provides 85 heavily annotated examples covering 95% of React Native + Expo. Master mobile development idioms, New Architecture patterns, and production deployment through working code rather than lengthy explanations.

What Is By-Example Learning?

By-example learning is a code-first approach where you learn concepts through annotated, working examples rather than narrative explanations. Each example shows:

1. What the code does - Brief explanation of the React Native concept
2. How it works - A focused, heavily commented code example
3. Key Takeaway - A pattern summary highlighting the key takeaway
4. Why It Matters - Production context, when to use, deeper significance

This approach works best when you already understand programming fundamentals and have some JavaScript or TypeScript experience. You learn React Native's component model, New Architecture, Expo Router, and native module system by studying real code rather than theoretical descriptions.

What Is React Native?

React Native is a framework for building native mobile applications using React and TypeScript. Unlike web-targeted React, React Native compiles to native UI components on iOS and Android. Key distinctions:

• Truly native: UI components map to platform-native controls (UIView on iOS, View on Android), not web views
• New Architecture (mandatory since 0.82): Fabric renderer, JSI, TurboModules, and Codegen provide high-performance native interop without the legacy bridge
• Expo SDK: Managed workflow providing pre-built native modules, EAS Build/Update/Submit, and a curated SDK for common device APIs
• Cross-platform: One TypeScript codebase targeting iOS, Android, and web (via Expo)
• Flexbox by default: Layout uses CSS Flexbox but with flexDirection: 'column' as default (opposite of web's 'row')

Version Baseline

This tutorial targets:

• React Native 0.85.x (stable, April 2026) — New Architecture mandatory, legacy bridge permanently removed
• Expo SDK 55 (February 2026) — New Architecture mandatory, React 19.2, Expo Router 55
• React Navigation 7.2.2 — Static API, Screen Preloading
• TypeScript 5.x — strict mode throughout
• Node.js 20.19.4+ / 22 / 24+

Learning Path

%% Color Palette: Blue #0173B2, Orange #DE8F05, Teal #029E73, Purple #CC78BC, Brown #CA9161
graph TD
  A["Beginner<br/>Core RN Concepts<br/>Examples 1-28"] --> B["Intermediate<br/>State, Animations, Navigation<br/>Examples 29-56"]
  B --> C["Advanced<br/>Native Modules, Performance, CI<br/>Examples 57-85"]
  D["0%<br/>No RN Knowledge"] -.-> A
  C -.-> E["95%<br/>Production Mastery"]
 
  style A fill:#0173B2,stroke:#000000,stroke-width:2px,color:#fff
  style B fill:#DE8F05,stroke:#000000,stroke-width:2px,color:#fff
  style C fill:#029E73,stroke:#000000,stroke-width:2px,color:#fff
  style D fill:#CC78BC,stroke:#000000,stroke-width:2px,color:#fff
  style E fill:#029E73,stroke:#000000,stroke-width:2px,color:#fff

Coverage Philosophy: 95% Through 85 Examples

The 95% coverage means you understand React Native deeply enough to build and ship production applications. The 85 examples are organized progressively:

• Beginner (Examples 1-28): Foundation — project setup, core components, layout, navigation basics, local persistence
• Intermediate (Examples 29-56): Production patterns — animations, gestures, state management, camera, sensors, forms
• Advanced (Examples 57-85): Mastery — native modules, performance profiling, testing, EAS, CI/CD, production checklist

Together, these examples cover 95% of what you will use in production React Native applications.

Annotation Density: 1-2.25 Comments Per Code Line

All examples maintain 1-2.25 comment lines per code line PER EXAMPLE to ensure deep understanding.

What this means:

• Simple lines get 1 annotation explaining purpose or result
• Complex lines get 2+ annotations explaining behavior, state changes, and side effects
• Use // => notation to show expected values, outputs, or state changes

Example:

import { View, Text, StyleSheet } from "react-native"; // => core RN components
// => no DOM, maps to native widgets
 
const styles = StyleSheet.create({
  // => creates optimized StyleSheet
  container: {
    // => named style object
    flex: 1, // => fills all available space
    flexDirection: "column", // => COLUMN is the RN default (NOT 'row')
    justifyContent: "center", // => centers children vertically
    alignItems: "center", // => centers children horizontally
  },
});

This density ensures each example is self-contained and fully comprehensible without external documentation.

New Architecture: Why It Matters

Since React Native 0.82, the legacy bridge is permanently removed. Every example in this tutorial assumes the New Architecture:

%% Color Palette: Blue #0173B2, Orange #DE8F05, Teal #029E73, Purple #CC78BC, Brown #CA9161
graph LR
  JS["JavaScript Thread<br/>React / Business Logic"] -->|JSI - direct C++ refs| Native["Native Thread<br/>iOS / Android"]
  Native -->|Fabric - sync layout| Render["Renderer<br/>Yoga / CSS Flexbox"]
  JS -->|TurboModules - lazy load| Mods["Native Modules<br/>Camera, Storage, GPS"]
  Mods -->|Codegen - type-safe glue| Spec["TypeScript Spec<br/>Build-time generation"]
 
  style JS fill:#0173B2,stroke:#000,color:#fff
  style Native fill:#DE8F05,stroke:#000,color:#fff
  style Render fill:#029E73,stroke:#000,color:#fff
  style Mods fill:#CC78BC,stroke:#000,color:#fff
  style Spec fill:#CA9161,stroke:#000,color:#fff

• JSI (JavaScript Interface): Direct C++ references from JS — no JSON serialization, sub-millisecond interop
• Fabric: C++ shared rendering core enabling synchronous layout and React 18 concurrent features
• TurboModules: Lazy-loading native modules (load only when first accessed)
• Codegen: Build-time TypeScript spec → type-safe native glue, caught at compile time not runtime

What Is Covered

Foundation (Beginner)

• Project setup: Expo CLI, project structure, TypeScript config, path aliases
• Core components: View, Text, Image, TextInput, ScrollView, FlatList, SectionList
• Layout: Flexbox (column-default), gap/rowGap/columnGap, StyleSheet.create()
• Navigation: Expo Router file-based routing, Stack, Tabs, dynamic routes
• Local data: AsyncStorage, expo-font, expo-image, push notification setup

Production Patterns (Intermediate)

• Animations: useAnimatedValue (RN 0.85), Reanimated 4, layout prop animation
• Gestures: react-native-gesture-handler 2.31.1, Pan, Tap, combined gestures
• State management: TanStack Query 5, Zustand 5, MMKV 4 synchronous storage
• Device APIs: Camera, location, sensors, haptics, image picker
• Forms and navigation: react-hook-form + zod, Drawer, auth guard, i18n

Mastery (Advanced)

• Native modules: Nitro Modules, TurboModules + Codegen, Fabric custom views
• VisionCamera V5: Constraints API, frame processors (V5 breaks V4 Formats API)
• Graphics: React Native Skia, Reanimated shared element transitions
• Performance: Hermes profiler, Metro tree shaking, FlatList/FlashList tuning
• Testing: @react-native/jest-preset (extracted in RN 0.85), Detox E2E
• Deployment: EAS Build/Update/Submit, Fastlane, GitHub Actions CI, production checklist

What Is NOT Covered

• Advanced TypeScript internals: Deep type system unrelated to React Native
• Web-specific React: DOM patterns, browser APIs, CSS-in-JS for web
• Game development: Unity, Unreal, game loop patterns
• Machine learning inference: On-device ML (separate tutorial)
• Platform-specific Swift/Kotlin in depth: Covered only as context for native module examples

For these topics, see dedicated tutorials and platform documentation.

Prerequisites

Required

• JavaScript ES6+: Arrow functions, destructuring, spread/rest, async/await
• TypeScript basics: Types, interfaces, generics, type inference
• React fundamentals: Components, props, state, hooks (useState, useEffect)
• Programming experience: You have built applications before

Recommended

• npm/npx basics: Package installation, running scripts
• Terminal familiarity: Navigation, running commands
• Mobile concepts: iOS/Android development model awareness (helpful but not required)

Not Required

• React Native experience: This guide assumes you are new to RN
• Native development (Swift/Kotlin): Not needed for Expo managed workflow
• Xcode/Android Studio: Not required for Expo Go development

Key Differences from Web React

Understanding these differences prevents the most common mistakes:

How to Use This Guide

1. Choose Your Starting Point

• New to React Native? Start with Beginner (Example 1)
• React/web developer? Skim Beginner, start Intermediate (Example 29)
• Building a specific feature? Jump to the relevant example group

2. Read the Example

Each example has five parts:

• Explanation (1-3 sentences): What React Native concept, why it exists, when to use it
• Code (heavily commented): Working TypeScript code showing the pattern
• Key Takeaway (1-2 sentences): Distilled essence of the pattern
• Why It Matters (50-100 words): Production context and deeper significance

3. Run the Code

Create a test Expo project and run each example:

npx create-expo-app MyApp --template blank-typescript  # => creates managed Expo project
cd MyApp                                                # => enter project directory
npx expo start                                          # => start Metro bundler
# Scan QR code with Expo Go app on your phone
# Or press 'i' for iOS Simulator / 'a' for Android Emulator

4. Modify and Experiment

Change props, break animations, swap gesture handlers. Experimentation builds intuition faster than reading.

Ready to Start?

Choose your learning path:

• Beginner - Start here if new to React Native. Build foundation understanding through 28 core examples covering project setup through push notifications.
• Intermediate - Jump here if you know RN basics. Master production patterns through 28 examples covering animations, state management, and device APIs.
• Advanced - Expert mastery through 29 examples covering native modules, VisionCamera, performance profiling, testing, and production deployment.

Examples by Level

Beginner (Examples 1–28)

• Example 1: New Expo Project Structure
• Example 2: TypeScript Configuration for React Native
• Example 3: View and Text — Base Building Blocks
• Example 4: StyleSheet.create() — Typed Styles and CSS Differences
• Example 5: Flexbox Layout — Column-Default and Axis Controls
• Example 6: gap, rowGap, columnGap in Flexbox
• Example 7: Image and ImageBackground
• Example 8: TextInput — Controlled Inputs
• Example 9: TouchableOpacity vs Pressable
• Example 10: ScrollView — Simple Scrollable Content
• Example 11: FlatList — Virtualized Lists
• Example 12: SectionList — Grouped Data with Headers
• Example 13: Modal — Overlay Dialogs
• Example 14: ActivityIndicator and Loading States
• Example 15: Alert and Platform Dialogs
• Example 16: Platform-Specific Code
• Example 17: Safe Area — Handling Notches and Home Bars
• Example 18: File-Based Routing with Expo Router
• Example 19: Stack Navigation — Headers and Navigation Options
• Example 20: Tab Navigation with Expo Router
• Example 21: Dynamic Routes — Parameterized URLs
• Example 22: Passing Data Between Screens
• Example 23: useState and useEffect — Mobile Lifecycle
• Example 24: AsyncStorage — Simple Key-Value Persistence
• Example 25: expo-font — Loading Custom Fonts
• Example 26: expo-image — Optimized Image with Caching
• Example 27: Icons with @expo/vector-icons
• Example 28: Push Notifications Setup with expo-notifications

Intermediate (Examples 29–56)

• Example 29: useAnimatedValue — The New RN 0.85 Hook
• Example 30: Animating Layout Props Natively — RN 0.85 Shared Animation Backend
• Example 31: Reanimated 4 — useSharedValue, useAnimatedStyle, withTiming, withSpring
• Example 32: Reanimated 4 Worklets — UI Thread Logic
• Example 33: Gesture Handling — Pan, Tap, GestureDetector
• Example 34: Combined Gestures — Simultaneous, Exclusive, Race
• Example 35: FlashList — Drop-in FlatList Replacement
• Example 36: Infinite Scroll — FlashList + TanStack Query
• Example 37: TanStack Query — useQuery, useMutation
• Example 38: TanStack Query — Focus and Window Management
• Example 39: Zustand — Global Store with TypeScript
• Example 40: Zustand with Persistence — MMKV Storage Adapter
• Example 41: MMKV — Synchronous Key-Value Storage
• Example 42: Camera with expo-camera
• Example 43: Push Notifications — Handling Delivery
• Example 44: Deep Linking — URL Schemes and Universal Links
• Example 45: Device Sensors — Accelerometer, Gyroscope
• Example 46: Location Services
• Example 47: Haptics — Tactile Feedback
• Example 48: Keyboard Avoidance
• Example 49: Custom Hooks — useFetch, useDebounce, usePrevious
• Example 50: Form Handling — react-hook-form with zod Validation
• Example 51: Drawer Navigation in Expo Router
• Example 52: Auth Flow — Protected Routes with Expo Router
• Example 53: expo-sqlite — Local SQLite Database
• Example 54: i18n — Internationalization with i18next
• Example 55: Image Picking — expo-image-picker and expo-media-library
• Example 56: Background Tasks — expo-background-fetch

Advanced (Examples 57–85)

• Example 57: Nitro Modules — Custom Native Module
• Example 58: TurboModules + Codegen — The Standard Native Module Path
• Example 59: Fabric Custom Native View — Nitro View Spec
• Example 60: VisionCamera V5 — Constraints API
• Example 61: VisionCamera Frame Processors
• Example 62: React Native Skia — Canvas, Path, Paint
• Example 63: Skia + Reanimated — Animating Canvas Values
• Example 64: Shared Element Transitions — Hero Animations
• Example 65: Layout Animations — Entering, Exiting, Layout
• Example 66: WatermelonDB — Reactive SQLite ORM
• Example 67: Offline-First Architecture
• Example 68: Performance Profiling with Hermes and React DevTools
• Example 69: Metro Bundle Optimization
• Example 70: FlatList/FlashList Performance Tuning
• Example 71: Memoization — When and When Not to Use
• Example 72: Hermes Bytecode and Startup Optimization
• Example 73: Unit Testing — @react-native/jest-preset
• Example 74: Mocking Native Modules in Jest
• Example 75: E2E Testing with Detox
• Example 76: EAS Build — Build Configuration
• Example 77: EAS Update — Over-the-Air Updates
• Example 78: EAS Submit — Automated App Store Submission
• Example 79: Fastlane for Bare React Native
• Example 80: GitHub Actions CI Pipeline
• Example 81: App Store and Play Store Release
• Example 82: Sentry — Crash Reporting and Performance Monitoring
• Example 83: Expo Modules API — Swift/Kotlin Native Module
• Example 84: useReducer + useContext — Complex Local State
• Example 85: Production Checklist