React Native (Mobile)

Expo 54 platform with file-based routing, ~35+ E11-themed components, biometric authentication, and OTA updates — sharing Foundation packages with the React web platform from the same monorepo.

What It Does

The React Native platform lives in sdks-react alongside React web. It provides:

Shared Foundation packages (~24) covering auth, data, theming, error handling, files, notifications, maps, multimedia, registration, and more
~35+ mobile UI components with E11 prefix, themed via useE11Theme() inline styles
A showcase mobile app (Expo 54) demonstrating Foundation SDKs with on-device Storybook
CI/CD pipelines via EAS Build with auto-submit to TestFlight and Google Play

The key differentiator is code sharing — Foundation packages split exports so pure TypeScript (models, services, repositories) is shared between web and mobile, while platform-specific hooks and components live in separate entry points.

Key Capabilities

Capability	Description
Expo 54 + Expo Router 6	Managed workflow with file-based routing and Stack/Tab navigators
Shared Foundation Layer	Same `sdks-react` packages as web — models, services, and repositories are shared
~35+ E11 Components	Theme-driven native components (buttons, forms, overlays, layout) with no NativeWind dependency
Biometric Auth	Face ID / Touch ID via `expo-local-authentication` with SecureStore credential storage
TanStack Query	Same declarative data fetching as web — queries, mutations, realtime, infinite scroll
Firebase Integration	`@react-native-firebase/*` for Auth, Firestore, Storage, Analytics, App Check
E11Theme System	Typed theme context with light/dark mode, brand sets, and runtime tenant switching
OTA Updates	Expo Updates with `appVersion` runtime versioning — ship fixes without app store review
EAS Build	Managed build profiles (dev, ci, qa, prod) with auto-submit to stores
On-Device Storybook	13 component stories viewable directly in the mobile app
Deep Link Handling	`@engineering11/deeplink-frontend-sdk` for native deep link routing

How It Fits Together


┌─────────────────────────────────────────────┐
│  Mobile App (apps/app — Expo 54)             │
│  Layouts → Screens → Feature Components      │
├─────────────────────────────────────────────┤
│  Feature SDKs (./rn exports)                 │
│  auth · user · files · notifications ·       │
│  multimedia · maps · registration ·          │
│  config · deeplink                           │
├─────────────────────────────────────────────┤
│  Foundation APIs                             │
│  platform · firebase · rest-client ·         │
│  di · error · theme · tenant-bootstrap       │
├─────────────────────────────────────────────┤
│  RN UI Components (@engineering11/rn-ui)     │
│  ~35+ E11-prefixed themed components         │
└─────────────────────────────────────────────┘

Architecture

Provider Composition

The mobile app uses the same nested provider pattern as web, with RN-specific providers:


<E11ToastProvider>
  <ErrorProviderWrapper>
    <PlatformProvider platformContainer={firebaseContainer}>
      <TanstackQueryRNFirebaseProvider>
        <InjectBootstrapRN>
          <RNFirebaseProvider>
            <RNFirebaseAuthProvider>
              <AuthSdkProviderWrapper>
                <E11ThemeProvider>
                  {children}
                </E11ThemeProvider>
              </AuthSdkProviderWrapper>
            </RNFirebaseAuthProvider>
          </RNFirebaseProvider>
        </InjectBootstrapRN>
      </TanstackQueryRNFirebaseProvider>
    </PlatformProvider>
  </ErrorProviderWrapper>
</E11ToastProvider>

Expo Router 6 provides file-based routing with auth protection:


<Stack.Protected guard={!isAuthenticated}>
  {/* Public screens: login, forgot-password, verify-email */}
</Stack.Protected>
 
<Stack.Protected guard={isAuthenticated}>
  {/* Protected screens: home, profile, settings */}
</Stack.Protected>

Shared Code with React Web

Layer	Shared?	Content
`lib/` (pure TS)	Web + Mobile	Models, services, repositories, utilities
`react/`	Web only	React hooks, providers, web components
`rn/`	Mobile only	RN hooks, providers, native components

Mobile-Specific Capabilities

Biometric auth — AuthBiometricService for Face ID / Touch ID with Expo SecureStore
Secure storage — AuthStorageService using Expo SecureStore for credentials
Deep links — @engineering11/deeplink-frontend-sdk for native routing
OTA updates — Expo Updates with runtime version policy
Native Firebase — @react-native-firebase/* packages for direct native integration

What You Don’t Have to Build

Shared Foundation packages (auth, data, error handling, theming, REST client, DI, and more)
Firebase integration (Auth, Firestore, Storage, Remote Config, Analytics, App Check)
TanStack Query hooks for Firestore with realtime subscriptions
Biometric authentication (Face ID / Touch ID) with secure credential storage
~35+ themed native components
E11Theme system with dark/light mode and tenant brand switching
Structured error handling with Rollbar native SDK integration
REST client with auth tokens, retry, and tenant headers
Deep link handling and routing
OTA update infrastructure
EAS Build CI/CD with auto-submit to both app stores
On-device Storybook for component exploration

What You Build

Product-specific screens and native user experiences
Product-specific data models (via the shared repository layer)
Screen hierarchy, tab structure, and navigation flow
Brand theming overrides per tenant
Product-specific notification handlers
Environment-specific configuration
Product-specific tests

Next Steps

React Web — The web counterpart sharing the same Foundation
Flutter Mobile — The other mobile platform
Platforms Overview — Compare all frontend platforms
Architecture — Cross-platform architecture patterns