Building a Scalable React Native App: The Expo + MVVM Hybrid Approach

In the ever-evolving world of mobile development, starting with a solid foundation is not just an advantage—it’s a necessity. The reactnative-expo-boilerplate-ts is designed to bridge the gap between rapid prototyping and long-term maintainability.
By combining the modern simplicity of Expo Router with the structural rigor of the MVVM (Model-View-ViewModel) pattern, we’ve created a foundation that’s built for scale, performance, and developer happiness.

The Core Philosophy: Why Hybrid?

Most boilerplates force a choice: ease of use (Expo) or architectural strictness (Native/Custom). The hybrid approach chooses both.

1. Navigation with Expo Router

We leaned into Expo Router for its file-based navigation. It mirrors the web (Next.js), making it intuitive for newcomers while providing a truly native feel on mobile. It handles deep linking out of the box and simplifies complex navigation nesting in src/app.
2. Architecture with MVVM

While Expo handles how we move, MVVM handles how we work. We’ve organized our logic into src/features, where each screen or feature follows a strict separation:

• View: Pure React components (UI only). They consume data from a ViewModel hook and have no knowledge of business logic.
• ViewModel: Custom React hooks (e.g., useHomeViewModel) that encapsulate state, side effects, and logic. This makes them highly testable and reusable.
• Model: Simple data structures, API services, and centralized stores (like our authStore).

High-Performance Features Built-In

A great boilerplate isn’t just about folder structure—it’s about the foundational tools within.

Storage: MMKV

Forget AsyncStorage. We use react-native-mmkv, the fastest key-value storage for React Native. Because it’s synchronous, we can read auth states or theme preferences during the initial render—eliminating that annoying “flash” of incorrect UI state.

Global Localization: i18next

Internationalization is a first-class citizen here. With i18next and react-i18next pre-configured, adding a new language is as simple as updating a JSON file in src/i18n. Our custom transition hooks make switching languages live in the app seamless.
Theming: Light & Dark Mode

Our custom useThemeColors hook provides a centralized design system. It automatically reacts to system settings while allowing for manual overrides, ensuring a premium “wow” factor for users.

How It Helps the Team

• Zero-Config Onboarding: New developers can clone, run npm install, and start coding in minutes.
• Consistency: Absolute path aliasing (@/) and pre-configured ESLint/Prettier/Husky hooks ensure every PR looks like it was written by the same person.
• Scalability: The feature-first folder structure means your src directory stays organized even as you grow to hundreds of screens.

Pro-Tips & Best Practices

1. Strict Type Safety: We’ve configured TypeScript to be as helpful as possible without getting in the way.
2. Native Power: Use Nitro Modules for high-performance native bridges where React Native’s bridge might fall short.
3. Component-Driven Development: Build small, reusable components in src/components to keep your feature views lean.