🗺️ The React Native Ecosystem

The Ecosystem Layers

The React Native ecosystem can feel overwhelming at first — there are so many packages, tools, and options. Let's break it down into layers so you can understand where everything fits.

Think of it like a city. At the foundation, you have the infrastructure (roads, utilities). Then you have different neighborhoods (frameworks), each with their own shops and services (libraries). Understanding the layout helps you navigate efficiently.

The React Native ecosystem as a layered stack

Layer by Layer

Expo: Your Development Superpower

If React Native is the engine, Expo is the fully-loaded vehicle that comes with GPS, air conditioning, and roadside assistance included. You could drive with just the engine, but why would you?

What Expo Gives You

mindmap
  root((Expo Platform))
    Development
      Expo Go App
      Hot Reloading
      Dev Client
      Error Overlay
    SDK Modules
      Camera
      Location
      Notifications
      File System
      Sensors
      Auth
    Build Services
      EAS Build
      iOS without Mac
      Cloud Builds
      App Signing
    Updates
      OTA Updates
      Update Channels
      Rollbacks
    Routing
      Expo Router
      File-based
      Deep Linking
                

The Expo platform provides tools across the entire development lifecycle

Expo Go vs Development Builds

Expo offers two ways to run your app during development:

EAS: Expo Application Services

EAS is Expo's cloud service suite. The three main services are:

The "Ejecting" Question

You might have heard old advice about "ejecting" from Expo. This is outdated. The modern Expo workflow rarely requires ejecting. Here's why:

Essential Libraries by Category

The React Native ecosystem has a library for almost everything. Here's your curated guide to the most important ones, organized by what you're trying to accomplish.

🧭 Navigation

How users move between screens. This is fundamental to any app.

🗃️ State Management

Managing data across your application.

🎨 UI Components & Styling

Building your interface.

✨ Animations

Making things move smoothly.

👆 Gestures

Handling touch interactions.

📋 Forms

Handling user input.

📜 Lists

Rendering large amounts of data efficiently.

The Library Landscape

flowchart TB
    subgraph Core["What You Get Built-in"]
        A[View, Text, Image]
        B[FlatList, ScrollView]
        C[StyleSheet]
        D[Animated API]
    end
    
    subgraph Essential["Almost Always Need"]
        E[Navigation
Expo Router]
        F[Gestures
Gesture Handler]
    end
    
    subgraph Common["Very Common Additions"]
        G[Server State
TanStack Query]
        H[Client State
Zustand]
        I[Animations
Reanimated]
        J[Forms
React Hook Form]
    end
    
    subgraph Optional["Nice to Have"]
        K[UI Kit
Paper/Elements]
        L[Styling
NativeWind]
        M[Icons
expo/vector-icons]
    end
    
    Core --> Essential
    Essential --> Common
    Common --> Optional
    
    style Core fill:#e8f5e9,stroke:#4caf50
    style Essential fill:#fff3e0,stroke:#ff9800
    style Common fill:#e3f2fd,stroke:#1976d2
    style Optional fill:#f5f5f5,stroke:#9e9e9e
                

Library adoption typically follows this pattern from core to optional

Documentation and Community Resources

Knowing where to find help is half the battle. Here's your resource guide:

📚 Official Documentation

💬 Community & Help

🎓 Learning Resources

Choosing the Right Tools

With so many options, how do you decide what to use? Here's a decision framework:

The Decision Framework

flowchart TD
    A[Need to solve a problem] --> B{Is it built into
React Native or Expo?}
    B -->|Yes| C[Use the built-in solution]
    B -->|No| D{Is there an
Expo SDK module?}
    D -->|Yes| E[Use the Expo module]
    D -->|No| F{Is it a common need?}
    F -->|Yes| G[Use a popular
community library]
    F -->|No| H[Build custom or
find niche solution]
    
    style C fill:#e8f5e9,stroke:#4caf50
    style E fill:#fff3e0,stroke:#ff9800
    style G fill:#e3f2fd,stroke:#1976d2
    style H fill:#f5f5f5,stroke:#9e9e9e
                

When choosing tools, prefer built-in solutions, then Expo SDK, then community packages

Library Evaluation Checklist

When evaluating a third-party library, ask:

The "Minimal Dependencies" Philosophy

Our Recommended Stack for This Course

Here's what we'll use throughout this course:

Summary

🚀 What's Next?

You've completed Module 1! You now understand why React Native exists, how it differs from web development, what knowledge transfers from React, and the ecosystem landscape.

In Module 2, we'll get hands-on: setting up your development environment, creating your first project, and running an app on your device. The theory is done — it's time to build!