Skip to main content

Command Palette

Search for a command to run...

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

Updated
9 min read

Modern mobile applications are no longer simple CRUD apps with a few screens and APIs. Apps like Instagram, WhatsApp, Uber, and Netflix operate at enormous scale with millions of users, realtime systems, offline support, complex navigation, and highly optimized performance pipelines.

If these apps were built today using React Native and Expo Router, their architecture would look very different from beginner-level project structures.

This article explores how large-scale mobile apps would be structured using Expo Router, feature-based architecture, scalable state management, realtime systems, and production engineering practices.


Why Simple Folder Structures Fail at Scale

Most beginners start React Native apps like this:

src/
 ├── screens/
 ├── components/
 ├── utils/
 ├── api/

This works for small projects.

But once an app grows to hundreds of screens and multiple teams, problems appear:

  • Components become tightly coupled

  • Navigation becomes impossible to manage

  • State management becomes messy

  • Features depend on unrelated modules

  • Reusability decreases

  • Developer onboarding becomes difficult

Large companies avoid this by organizing applications around features, not around technical file types.


Why Architecture Matters in React Native Applications

Architecture is not just folder organization.

Good architecture improves:

  • Scalability

  • Team collaboration

  • Maintainability

  • Performance

  • Code ownership

  • Testing

  • Developer experience

When millions of users depend on your application, bad architecture becomes expensive.

Production engineering is mostly about:

  • Reducing complexity

  • Isolating features

  • Improving reliability

  • Optimizing rendering

  • Managing data flow efficiently


Why Expo Router Changes Modern React Native Development

Expo Router introduces filesystem-based routing similar to Next.js.

Instead of manually defining navigation trees everywhere, routes become predictable and scalable.

Example:

app/
 ├── (auth)/
 ├── (tabs)/
 ├── profile/
 ├── reels/
 ├── messages/

Benefits:

  • Easier navigation management

  • Nested layouts

  • Shared route groups

  • Protected routes

  • Better scalability

  • Cleaner developer experience

Expo Router works extremely well for large applications because navigation becomes modular.


Production-Grade Expo Router Folder Structure

A scalable architecture could look like this:

src/
 ├── app/
 │    ├── (auth)/
 │    ├── (tabs)/
 │    ├── messages/
 │    ├── reels/
 │    ├── ride/
 │    ├── movie/
 │    └── _layout.tsx
 │
 ├── features/
 │    ├── auth/
 │    ├── feed/
 │    ├── messaging/
 │    ├── maps/
 │    ├── streaming/
 │    └── payments/
 │
 ├── components/
 │    ├── ui/
 │    ├── shared/
 │    └── animations/
 │
 ├── services/
 │    ├── api/
 │    ├── websocket/
 │    ├── storage/
 │    └── analytics/
 │
 ├── store/
 │
 ├── hooks/
 │
 ├── constants/
 │
 └── utils/

Notice something important:

The app is divided by business features, not by screen types.

This is how large companies structure applications.


Feature-Based Architecture in Large Applications

Feature-based architecture isolates domains.

For example:

features/
 ├── messaging/
 │    ├── components/
 │    ├── hooks/
 │    ├── services/
 │    ├── store/
 │    └── screens/

Benefits:

  • Easier scaling

  • Better ownership

  • Independent development

  • Easier testing

  • Faster onboarding

Instagram, Uber, and Netflix all use domain-driven feature separation internally.


Navigation Architecture for Scalable Apps

Navigation becomes complicated in large apps.

A production app may contain:

  • Authentication stacks

  • Tab navigators

  • Nested stacks

  • Modal systems

  • Deep linking

  • Dynamic routes

  • Protected routes

Expo Router simplifies this.

Example:

app/
 ├── (auth)/
 │    ├── login.tsx
 │    └── register.tsx
 │
 ├── (tabs)/
 │    ├── home.tsx
 │    ├── search.tsx
 │    ├── reels.tsx
 │    └── profile.tsx

The route groups automatically create scalable navigation structures.


Authentication Flow Architecture

Authentication is not just login screens.

Production apps need:

  • Token management

  • Session persistence

  • Protected routes

  • Refresh tokens

  • Secure storage

  • Multi-device support

Typical architecture:

features/auth/
 ├── api/
 ├── hooks/
 ├── store/
 ├── screens/
 └── utils/

With Expo Router:

(auth)/
(tabs)/

Authenticated users enter (tabs) while guests stay inside (auth).

This creates clean route isolation.


State Management Strategies for Large Apps

Small apps often misuse global state.

At scale, teams separate:

  • Server state

  • UI state

  • Session state

  • Realtime state

  • Cached state

Modern React Native apps typically use:

Zustand

For lightweight client state.

React Query / TanStack Query

For server-state management.

Recoil or Jotai

For complex reactive flows.

Redux Toolkit

Still used in enterprise systems.

Production apps avoid storing API data directly in Redux unless necessary.


API Handling and Networking Layers

Large apps never call APIs directly from screens.

Instead:

services/
 ├── api/
 │    ├── client.ts
 │    ├── auth.api.ts
 │    ├── feed.api.ts
 │    └── user.api.ts

Benefits:

  • Reusable networking logic

  • Easier retries

  • Better caching

  • Centralized interceptors

  • Cleaner testing

Common production practices:

  • Request retry policies

  • Rate limiting

  • Pagination handling

  • Background synchronization

  • Error normalization


How Instagram Would Be Built Today

Instagram is heavily media-driven.

Its architecture focuses on:

  • Infinite scrolling feeds

  • Media caching

  • Video optimization

  • Story systems

  • Recommendation engines

  • Optimistic updates

Feature modules:

features/
 ├── feed/
 ├── stories/
 ├── reels/
 ├── notifications/
 └── profile/

Key challenges:

Feed Performance

Rendering thousands of posts efficiently.

Solutions:

  • FlashList

  • Memoization

  • Virtualized rendering

  • Image CDN optimization

Media Upload Pipeline

Instagram requires:

  • Background uploads

  • Compression

  • Retry handling

  • Chunk uploads

Realtime Notifications

Handled using:

  • WebSockets

  • Push notifications

  • Event queues


How WhatsApp Would Be Built Today

WhatsApp is primarily a realtime messaging platform.

Core architectural priorities:

  • Reliability

  • Low latency

  • Offline-first messaging

  • Message synchronization

  • End-to-end encryption

Feature structure:

features/
 ├── chats/
 ├── calls/
 ├── status/
 ├── contacts/
 └── media/

Realtime Chat System Architecture

A scalable messaging system requires:

  • WebSocket connections

  • Local database caching

  • Delivery acknowledgements

  • Retry queues

  • Message synchronization

Flow:

User Sends Message
       ↓
Optimistic UI Update
       ↓
Local Database Save
       ↓
WebSocket Delivery
       ↓
Server Acknowledgement
       ↓
Message Status Update

Offline-first design is critical.

Messages must survive:

  • Network loss

  • App restarts

  • Background states


Offline-First Support and Caching

Large apps cannot depend entirely on internet connectivity.

Modern apps cache aggressively.

Typical layers:

UI
 ↓
Local Cache
 ↓
Server Sync

Common technologies:

  • SQLite

  • MMKV

  • AsyncStorage

  • React Query persistence

Uber and WhatsApp heavily depend on local caching.


How Uber Would Be Built Today

Uber is one of the most complex realtime mobile systems.

Core systems include:

  • Maps

  • Realtime location tracking

  • Driver-passenger matching

  • Route optimization

  • Payment systems

Feature structure:

features/
 ├── maps/
 ├── rides/
 ├── tracking/
 ├── payments/
 └── drivers/

Live Ride Tracking Architecture

Realtime ride tracking requires continuous updates.

Architecture:

Driver GPS
    ↓
Realtime Location Service
    ↓
WebSocket Stream
    ↓
Passenger App Map Updates

Key challenges:

  • Battery optimization

  • Background location services

  • GPS drift correction

  • Network interruptions

Expo Router helps by isolating ride flows into dedicated route groups.


How Netflix Would Be Built Today

Netflix focuses heavily on:

  • Streaming optimization

  • Content discovery

  • Recommendation systems

  • Performance

  • Offline downloads

Feature structure:

features/
 ├── home/
 ├── streaming/
 ├── downloads/
 ├── search/
 └── recommendations/

Heavy Content Delivery Challenges

Netflix-style apps require:

  • Smart caching

  • Adaptive streaming

  • Lazy loading

  • CDN optimization

Performance matters more than almost anything else.

Key production optimizations:

  • Skeleton loaders

  • Predictive prefetching

  • Background downloads

  • Video chunk buffering


Shared Layouts and Nested Routing in Expo Router

One major advantage of Expo Router is layouts.

Example:

app/
 ├── (tabs)/
 │    ├── _layout.tsx
 │    ├── home.tsx
 │    └── profile.tsx

The layout can define:

  • Shared headers

  • Tab bars

  • Authentication guards

  • Theme providers

This reduces duplication dramatically.


App Startup Optimization Techniques

Large apps optimize startup aggressively.

Key strategies:

Lazy Loading

Only load screens when needed.

Code Splitting

Reduce initial bundle size.

Asset Prefetching

Preload images and fonts.

Background Initialization

Delay non-essential services.

Splash Screen Optimization

Prevent blank startup states.

Apps like Instagram and Netflix invest heavily in startup performance.


Performance Considerations in Production Apps

Production apps optimize:

  • Rendering

  • Memory usage

  • Network calls

  • Animations

  • Navigation transitions

Common practices:

Memoization

Prevent unnecessary re-renders.

FlashList Instead of FlatList

Better performance for huge feeds.

Native Modules

Used for performance-critical tasks.

Batched Updates

Reduce rendering overhead.


Scalability Challenges at Massive Scale

Each app has unique architectural pressures.

Instagram

  • Feed ranking

  • Media optimization

  • Creator tools

WhatsApp

  • Message reliability

  • Encryption

  • Multi-device sync

Uber

  • Realtime coordination

  • Geolocation accuracy

  • Dynamic pricing

Netflix

  • Massive content delivery

  • Recommendation systems

  • Offline downloads

The architecture evolves around business problems.


Tradeoffs Teams Make at Scale

There is no perfect architecture.

Every decision has tradeoffs.

Examples:

Decision Benefit Cost
More abstraction Scalability Complexity
Heavy caching Faster UX Cache invalidation
Realtime systems Better UX Infrastructure cost
Offline-first Reliability Sync complexity
Modular architecture Team scalability Initial setup overhead

Engineering is mostly about managing tradeoffs effectively.


Small-App Thinking vs Production Engineering

Small apps optimize for speed of development.

Large apps optimize for:

  • Reliability

  • Scalability

  • Maintainability

  • Team productivity

  • Long-term evolution

That is the biggest mindset shift.


Final Thoughts

Expo Router is more than a navigation library.

It encourages scalable architecture patterns that fit modern production applications.

If Instagram, WhatsApp, Uber, and Netflix were built today using React Native, their success would depend less on UI design and more on:

  • Feature isolation

  • Realtime infrastructure

  • Scalable navigation

  • Offline-first systems

  • Performance engineering

  • Developer experience

Modern mobile engineering is fundamentally an architecture problem.

And Expo Router provides a strong foundation for building apps that scale beyond simple tutorials into production-grade systems.