Dieser Artikel ist der Leitfaden, den ich mir hätte wünschen, als wir anfingen, Mobile-Kunden ernst zu nehmen. Er behandelt die Engineerings-Realität, die Geschäftsökonomie und die Deployment-Pipeline, die du brauchst. Keine hohlen Reden über "Synergien" — nur hart erkämpfte Erkenntnisse aus dem Shipping von Production-Apps.

Inhaltsverzeichnis

React Native für Web-Agenturen: Mobile zu deiner Next.js-Praxis in 2026 hinzufügen

Warum 2026 der richtige Zeitpunkt für Web-Agenturen ist, ins Mobile-Geschäft zu gehen

Das Timing-Argument geht nicht nur um die Marktgröße. Es geht um drei spezifische Verschiebungen, die zusammenkamen:

React Natives New Architecture ist stabil. Der Fabric-Renderer und TurboModules, die jahrelang "bald da" waren, sind jetzt der Standard. Die Performance-Lücken zwischen React Native und nativem Swift/Kotlin sind auf praktisch irrelevant für 90% der App-Kategorien geschrumpft. Die JSI (JavaScript Interface) bedeutet, dass du nicht mehr für jeden nativen Aufruf eine Brücke überquerst — es ist synchron und schnell.

Expo wurde eine vollständige Plattform. Expo SDK 53 (Anfang 2026 veröffentlicht) unterstützt praktisch jede native API, die du brauchst. Die Zeiten, in denen man Expo verlassen musste, um grundlegende Features wie Bluetooth oder Background Location zu bekommen, sind vorbei. EAS Build verwaltet die gesamte Kompilierungs-Pipeline. Du brauchst Xcode nie auf deiner Maschine für die meisten Projekte.

Die Client-Nachfrage verschob sich. Ich sehe ein Muster über Agenturen in unserem Netzwerk hinweg: Clients, die früher nach "einer Website" fragten, fragen jetzt nach "einem digitalen Produkt". Sie erwarten eine Web-Präsenz UND eine Mobile-App, und sie erwarten, dass diese ein Design-System teilen. Wenn du beides von einem Team liefern kannst, konkurrierst du nicht gegen separate Web- und Mobile-Shops — du ersetzt beide.

Die Markt-Zahlen

Laut Statistas Daten von 2025 wird der globale Mobile-App-Umsatz bis 2027 1,1 Billionen Dollar erreichen. Aber relevanter für Agenturen: Das durchschnittliche Mobile-App-Budget eines Enterprise-Clients in 2025-2026 liegt zwischen 150.000–500.000 Dollar für ein MVP. Das ist 2-3x das, was die meisten Web-Agentur-Projekte einbringen.

Das React-Ökosystem-Overlap: Was tatsächlich übertragbar ist

Lass uns den Mythos sofort aus der Welt schaffen: React Native ist nicht "einfach React für Handys". Deine Entwickler werden eine Lernkurve haben. Aber sie ist viel kürzer als Swift und Kotlin von vorne zu lernen.

Hier ist eine ehrliche Aufschlüsselung dessen, was übertragbar ist und was nicht:

Fähigkeit/Technologie Übertragbar auf React Native? Anmerkungen
React-Komponentenmuster ✅ Ja, direkt Hooks, Context, State-Management — alle identisch
TypeScript ✅ Ja, direkt Dieselbe Sprache, dieselben Tools
State Management (Zustand, Jotai, Redux) ✅ Ja, direkt Drop-in kompatibel
React Query / TanStack Query ✅ Ja, direkt Dieselbe API, dieselben Caching-Strategien
CSS / Tailwind ⚠️ Teilweise Keine CSS-Kaskade. NativeWind überbrückt diese Lücke
Next.js-Routing ⚠️ Teilweise Expo Router ist auch dateibasiert, aber Navigationsparadigmen unterscheiden sich
DOM-Manipulation ❌ Nein Es gibt kein DOM. Punkt.
HTML-Elemente ❌ Nein Stattdessen <View>, <Text>, <Pressable>
Browser-APIs ❌ Nein Benötigt Expo-Module oder native Module
CSS-Animationen ❌ Nein Nutze Reanimated 3 (was eigentlich besser ist)

Der Sweet Spot ist dieser: Deine React-Entwickler können sich in React Native in 2-3 Wochen produktiv zurechtfinden. Sie werden keine Experten, aber sie können Features shipfen. Das ist ein massiver Vorsprung im Vergleich zum Einstellen nativer Entwickler.

Was mich am meisten überraschte

Das, was sich besser übertrug als ich erwartet hatte, war das mentale Modell. Reacts Kompositions-Komposition, unidirektionaler Datenfluss und deklaratives UI-Paradigma — das sind die schwierigen Teile zum Lernen. Die API-Oberflächen-Unterschiede (<div> vs <View>) sind im Vergleich trivial.

Das, was sich schlechter übertrug als ich erwartet hatte, war das Layout. Ja, React Native nutzt Flexbox. Aber es ist Flexbox mit flexDirection: 'column' als Standard, kein display: grid, keine Media Queries (du verwendest useWindowDimensions), und keine kaskadierten Stile. Jeder Entwickler in unserem Team stolperte in der ersten Woche über das.

Expo in 2026: Die Plattform, die alles verändert hat

Wenn du React Native 2019-2020 probiert hast und es sein gelassen hast, verstehe ich das. Die Developer Experience war rau. Expo hat das grundlegend transformiert.

Hier ist das, was Expo dir in 2026 gibt:

  • Expo Router v4: Dateibasiertes Routing, das die Next.js-Konventionen spiegelt. Deine Entwickler werden sich sofort heimisch fühlen.
  • Expo Modules API: Schreibe native Module in Swift/Kotlin mit einem sauberen TypeScript-Interface. Kein hackiger Bridge-Code mehr.
  • EAS Build: Cloud-basierte Builds für iOS und Android. Kein Mac erforderlich für iOS-Builds.
  • EAS Submit: Automatisierte App Store- und Play Store-Submissions.
  • EAS Update: Over-the-air-Updates, die App Store Review für JS-only Änderungen umgehen.
  • Expo Dev Client: Benutzerdefinierte Development Builds, die deine nativen Module enthalten, aber das schnelle Refresh DX bewahren.
# Erstelle ein neues Expo-Projekt in 2026
npx create-expo-app@latest my-app --template tabs
cd my-app
npx expo start

Das war's. Du läufst in unter zwei Minuten im iOS Simulator und Android Emulator (oder physische Geräte über Expo Go).

Expo Router: Die Brücke von Next.js

Expo Router verdient spezielle Aufmerksamkeit, weil es der einzige größte Grund ist, warum Next.js-Entwickler schnell adaptieren. Schau dir die Struktur an:

app/
  (tabs)/
    index.tsx        # Home-Tab
    settings.tsx     # Settings-Tab
    _layout.tsx      # Tab-Layout
  profile/
    [id].tsx         # Dynamische Route
  _layout.tsx        # Root-Layout

Wenn du mit Next.js App Router baust, ist diese Struktur fast identisch. Dynamische Routen, Layouts, verschachtelte Navigation — die Konzepte mappen direkt. Der Hauptunterschied ist, dass mobile Navigation Stacks und Tabs statt Pages und URL-Pfade verwendet, aber Expo Router abstrahiert das wunderschön.

React Native für Web-Agenturen: Mobile zu deiner Next.js-Praxis in 2026 hinzufügen - Architektur

Code-Sharing zwischen Next.js und React Native

Hier bekommen Agenturen die echte ROI. Code zwischen Web und Mobile zu teilen ist nicht nur nett zu haben — es ist die ökonomische Rechtfertigung für das Angebot beider Services.

Was zu teilen ist

Teile aggressiv:

  • Geschäftslogik und Dienstprogramme
  • API-Clients und Daten-Fetching Hooks
  • State-Management Stores
  • Typ-Definitionen und Validierungs-Schemata (Zod funktioniert prima hier)
  • Authentifizierungs-Logik

Teile vorsichtig:

  • Design Tokens (Farben, Abstände, Typographie-Skalen)
  • Komponenten-Logik (aber nicht Komponenten-Rendering)

Teile nicht:

  • UI-Komponenten direkt (die Rendering-Primitives sind unterschiedlich)
  • Navigations-Logik
  • Plattformspezifische Animationen

Monorepo-Setup

Der Standard-Ansatz in 2026 ist ein Turborepo oder Nx Monorepo. Hier ist eine typische Struktur:

packages/
  shared/
    src/
      hooks/
        useAuth.ts
        useProducts.ts
      utils/
        formatCurrency.ts
        validateEmail.ts
      types/
        user.ts
        product.ts
      api/
        client.ts
apps/
  web/          # Next.js-App
  mobile/       # Expo-App

// packages/shared/src/hooks/useProducts.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { Product } from '../types/product';

export function useProducts(categoryId: string) {
  return useQuery<Product[]>({
    queryKey: ['products', categoryId],
    queryFn: () => apiClient.get(`/products?category=${categoryId}`),
    staleTime: 5 * 60 * 1000,
  });
}

Dieser Hook funktioniert identisch in deiner Next.js-App und deiner React Native-App. Das Daten-Fetching, Caching und State-Management sind komplett geteilt. Nur die UI-Schicht, die die Produkte rendert, unterscheidet sich.

Der Solito / Universal-Ansatz

Für Agenturen, die Code-Sharing noch weiter treiben wollen, ermöglicht Solito (von Fernando Rojo) universelle Navigation und einige geteilte Komponenten zwischen Next.js und Expo. In 2026 ist die React Native react-native-web Library auch reif genug für Design-System-Sharing, obwohl ich dies nur für Teams empfehlen würde, die mindestens ein React Native-Projekt shipped haben. Es fügt Komplexität hinzu.

Unser typisches Code-Sharing-Verhältnis: 40-60% der gesamten Codebasis wird zwischen Web und Mobile geteilt. Das ist nicht Marketing-Blabla — das ist gemessen über sechs Client-Projekte.

EAS Build und Deployment: Deine CI/CD-Pipeline

Deployment ist historisch, wo Mobile-Entwicklung schmerzhaft war. App-Signing, Provisioning Profiles, App Store-Compliance — es ist ein Labyrinth. EAS macht es machbar.

EAS Build Preise (2026)

Plan Preis Build-Credits/Monat Build-Geschwindigkeit
Kostenlos $0 30 iOS + 30 Android ~40 min pro Build
Production $99/Monat 200 gesamt ~15 min pro Build
Enterprise $999/Monat Unbegrenzt ~8 min pro Build (Priorität)

Für die meisten Agenturen ist der Production-Plan der Sweet Spot. Du wirst die kostenlosen Tier-Credits schnell aufbrauchen, sobald du mehr als ein aktives Projekt hast.

Eine echte CI/CD-Pipeline

Hier ist die Pipeline, die wir verwenden, und sie hat über mehrere Client-Projekte gut funktioniert:

# .github/workflows/mobile-deploy.yml
name: Mobile Deploy
on:
  push:
    branches: [main]
    paths:
      - 'apps/mobile/**'
      - 'packages/shared/**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx eas-cli build --platform all --non-interactive --profile production
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

  submit:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx eas-cli submit --platform all --non-interactive
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

Für JavaScript-only Updates, die keinen nativen Code berühren, nutze EAS Update statt einen vollen Build:

# Pushe ein OTA-Update — Nutzer bekommen es bei nächstem App-Start
eas update --branch production --message "Fix checkout button alignment"

Das ist riesig für Agenturen. Bug-Fixes, die 1-3 Tage dauern würden, um auf App Store Review zu warten, erreichen nun Nutzer in Minuten.

Agentur-Ökonomie: Preisgestaltung, Personalausstattung und Margen

Lass uns über Geld reden. Das ist, wo ich sehe, dass Agenturen die größten Fehler machen.

Mobile-Projekte preisen

Preise Mobile-Projekte nicht wie Web-Projekte. Sie sind teurer zum Bauen, teurer zum Pflegen, und kommen mit laufenden Plattform-Kosten. Hier ist das, was wir funktionieren sehen:

Projekttyp Typischer Agentur-Satz Zeitrahmen Gesamtbereich
Einfache App (Inhalt, Authentifizierung, einfache CRUD) $180-250/h 8-12 Wochen $90K-$180K
Mittlere App (Zahlungen, Echtzeit, Integrationen) $180-250/h 12-20 Wochen $180K-$400K
Komplexe App (Offline-first, schwere native Features) $200-300/h 20-32 Wochen $350K-$750K
Web + Mobile Bundle (geteilte Codebasis) $180-250/h 16-28 Wochen $250K-$550K

Das Web + Mobile Bundle ist deine Wettbewerbs-Waffe. Ein Client, der beide für $350K bekommt, erhält ein besseres Geschäft als $200K für Web und $300K für Mobile zu separaten Shops zu zahlen. Und deine Margen sind besser wegen Code-Sharing.

Personalausstattungs-Modell

Du musst nicht sofort dedizierte Mobile-Entwickler einstellen. Hier ist die Progression, die funktioniert:

  1. Phase 1 (erstes Mobile-Projekt): Dein Senior React Dev führt, mit einem Contractor mit React Native-Erfahrung als Guide. Budget $15-25K für den Contractor.
  2. Phase 2 (2-3 Projekte später): Dein Team hat genug Erfahrung. Stelle einen Entwickler mit starkem React Native-Background ein, um der Mobile-Lead zu sein.
  3. Phase 3 (Mobile ist 30%+ des Umsatzes): Baue einen dedizierten Mobile-Pod mit 2-3 Entwicklern.

Der Wartungs-Umsatzstrom

Hier ist das, was niemand dir über Mobile sagt: es benötigt laufende Wartung, auch wenn der Client keine Features hinzufügt. iOS und Android veröffentlichen jährlich große OS-Versionen. Dependencies müssen aktualisiert werden. App Store-Richtlinien ändern sich. Das ist wiederkehrende Einnahme.

Wir berechnen $3.000-$8.000/Monat für Mobile-App-Wartungs-Retainer je nach App-Komplexität. Über 8-10 Clients ist das bedeutungsvolle wiederkehrende Einnahme, die Projektbasierte Einnahme-Volatilität glättet.

Wann du ja sagen solltest (und nein) zu Mobile-Clients

Nicht jedes Mobile-Projekt ist richtig für deine Agentur. Das habe ich auf die harte Tour gelernt.

Sag ja, wenn:

  • Der Client bereits ein Web-Produkt hat, das du gebaut hast — du kennst die Domäne, die API, die Geschäftslogik. Du bist 40% fertig, bevor Tag eins beginnt.
  • Die App ist primär datengesteuert — CRUD-Apps, Dashboards, E-Commerce, Content-Lieferung. React Native glänzt hier.
  • Der Client realistische Zeitrahmen hat — 8 Wochen Minimum für irgendetwas Bedeutungsvolles.
  • Das Budget ist $80K+ — Darunter kannst du Qualität nicht liefern und Margen beibehalten.

Sag nein, wenn:

  • Die App benötigt schwere GPU/Graphics — Spiele, AR-Erfahrungen, komplexe 3D. Nutze Unity oder nativ.
  • Die App benötigt tiefe Hardware-Integration — Bluetooth LE Peripherals, benutzerdefinierte Kamera-Pipelines, NFC-Zahlungsverarbeitung. Möglich in React Native, aber die Native-Module-Entwicklung wird dein Budget sprengen.
  • Der Client will "pixel-perfect plattform-nativ" Design — Wenn sie möchten, dass ihre iOS-App sich exakt wie eine SwiftUI-App anfühlt und ihre Android-App sich exakt wie eine Jetpack Compose-App anfühlt, fügt React Native Overhead hinzu.
  • Budget ist unter $50K — Du wirst Geld verlieren. Verweise sie an einen Freelancer oder eine No-Code-Plattform.
  • Der Client hat keine API — Wenn du das Backend, die Mobile-App UND eine Web-App bauen musst, scope sorgfältig. Das sind drei Projekte, nicht eins.

Engineering-Kosten: Die Zahlen, über die niemand spricht

Über Entwickler-Gehälter hinaus fügt Mobile Kosten hinzu, die Web-Agenturen nicht berücksichtigen:

Kosten Jahresbetrag Anmerkungen
Apple Developer Account $99/Jahr pro Client Erforderlich für App Store
Google Play Developer Account $25 einmalig pro Client Erforderlich für Play Store
EAS Build (Production) $1.188/Jahr Über Projekte geteilt
App Store Screenshots & Assets $500-2.000 pro App Oft übersehen bei Scoping
Device Testing Lab $2.000-5.000/Jahr Physische Geräte oder BrowserStack
Push-Benachrichtigungs-Service $0-500/Monat Firebase ist kostenlos zum Starten, skaliert hoch
Code-Signing Zertifikate In Apple Dev Account enthalten Aber sie zu verwalten braucht Zeit
App Store Optimization $500-2.000/Launch Wenn du das für Clients machst

Die versteckte Kosten ist Testen auf echten Geräten. Simulatoren lügen. Wir betreiben ein Device Lab mit 6 iPhones (verschiedene Modelle) und 4 Android-Geräten (Samsung, Pixel, ein billiges Telefon für Performance-Tests). Budget dafür.

Zeitkosten

App Store Review dauert typischerweise 24-48 Stunden, kann aber eine Woche während Feiertagssaisons dauern. Play Store Review ist üblicherweise schneller (Stunden bis ein Tag). Rechne das in deine Projekt-Zeitrahmen ein — du kannst nicht einfach "am Freitag deployen" wie bei Web-Apps.

Erste App-Submissions dauern länger. Apple überprüft besonders neue Developer-Accounts gründlich. Wir haben erste Submissions gehabt, die 5-7 Tage mit Ablehnung-Neueinreichungs-Zyklen dauerten.

Ein praktischer Migrationspfad für Web-Agenturen

Wenn du davon überzeugt bist, dass du Mobile zu deiner Praxis hinzufügst, hier ist der Pfad, den ich empfehlen würde:

Monat 1-2: Internes Projekt Baue eine einfache interne App mit Expo. Ein Time Tracker, ein Projekt-Dashboard, was auch immer. Mache dein Team mit den Tools vertraut ohne Client-Druck. Nutze das, um deine Monorepo-Struktur, CI/CD-Pipeline und Device-Testing-Prozess aufzusetzen.

Monat 3-4: Bestehender Client Upsell Sprich mit deinem besten bestehenden Client über eine Mobile Begleit-App. Du kennst bereits ihre Domäne, ihre API, ihr Team. Biete sie mit einem leichten Rabatt an, um eine Referenzkasse zu sein.

Monat 5-8: Erstes externes Mobile-Projekt Nimm ein Mobile-Projekt mit realistischem Scope an. Halte es auf 12 Wochen Max. Nutze dein internes Projekt und erstes Client-Projekt als Capabilitiy-Beweis.

Monat 9+: Produktifiziere Erstelle ein Standard Mobile-Projekt-Template, Schätzungs-Spreadsheet und Onboarding-Prozess. Das ist, wenn Mobile eine echte Service Line wird, nicht ein Experiment.

Während des ganzen Prozesses investiere in deine Headless CMS Fähigkeiten — inhaltsgesteuerte Mobile-Apps, die von denselben CMS wie die Web ziehen, sind einer der höchsten Wert-Bundles, die du Clients anbieten kannst.

Tech Stack Empfehlung

Für Agenturen, die in 2026 starten, hier ist der Stack, auf den ich wetten würde:

  • Expo SDK 53+ mit Expo Router v4
  • NativeWind v4 zum Stylen (Tailwind CSS für React Native)
  • TanStack Query für Server State
  • Zustand für Client State
  • React Native Reanimated 3 für Animationen
  • Turborepo für Monorepo-Verwaltung
  • EAS Build + EAS Update für CI/CD

Wenn deine Web-Praxis stattdessen Astro nutzt, funktioniert die Shared-Code-Strategie immer noch — du teilst einfach die Datenschicht und Business-Logic-Packages statt React-Komponenten.

FAQ

Wie lange dauert es für einen React/Next.js-Entwickler, produktiv in React Native zu werden?

Basierend auf unserer Erfahrung beim Onboarding von fünf Web-Entwicklern, erwarte 2-3 Wochen bis zur Basis-Produktivität (kann Screens bauen und Features implementieren) und 2-3 Monate bis zu dem, was ich sichere Unabhängigkeit nennen würde (kann Features architektieren, native Issues debuggen, Plattformspezifische Edge Cases verarbeiten). Die initiale Lernkurve ist hauptsächlich über Navigationsparadigmen, Mobile-spezifische UX-Konventionen und Styling-Unterschiede.

Kann ich dieselben Komponenten in Next.js und React Native verwenden?

Nicht direkt — die Rendering-Primitives sind unterschiedlich (<div> vs <View>, <span> vs <Text>). Jedoch, du kannst Komponenten-Logik durch Custom Hooks teilen, Design Tokens teilen, und Libraries wie Solito oder react-native-web nutzen, um die Lücke zu überbrücken. In der Praxis teilen wir 40-60% des gesamten Codes zwischen Plattformen, primär Geschäftslogik und Datenschicht Code.

Wie viel kostet es, eine React Native-App jährlich zu pflegen?

Für eine typische mittlere Komplexität App, erwarte $36K-$96K/Jahr in Wartungskosten. Das deckt OS-Kompatibilität Updates (iOS und Android veröffentlichen jährlich große Versionen), Dependency Updates, Bug Fixes, kleine Feature Addizionen, und App Store Richtlinien-Compliance. Das ist eine echte Kosten, die Clients budgetieren müssen.

Ist React Native schnell genug für Production-Apps in 2026?

Ja, definitiv. Mit der New Architecture (Fabric + TurboModules + JSI) jetzt der Standard, erreichen React Native-Apps konsistent 60fps für Standard UI. Apps wie Discord, Shopify Shop und Coinbase nutzen React Native im großen Maßstab. Der Performance-Gap mit nativ ist vernachlässigbar für 90%+ App-Kategorien. Wo es immer noch hinterherhinkt, ist schwere Animation oder GPU-intensive Workloads.

Sollte ich Expo oder bare React Native verwenden?

Expo. Das ist nicht mal eng in 2026. Expo unterstützt praktisch jede native API, die Expo Modules API lässt dich benutzerdefinierten nativen Code schreiben wenn nötig, und EAS Build eliminiert Headaches des nativen Toolchains. Der alte Rat zu "von Expo ejekten wenn du X brauchst" ist veraltet. Ungefähr 85-90% von Production React Native-Apps nutzen jetzt Expo, einschließlich großer Apps.

Was ist das minimale Team für ein Mobile-Projekt?

Zwei Entwickler und ein Designer, der Mobile-Konventionen versteht. Ein Entwickler sollte React Native-Erfahrung haben (auch wenn über dein internes Training-Projekt). Du kannst von da aus skalieren, aber ein Solo Mobile-Projekt zu machen ist riskant — es gibt zu viel Plattformspezifisches Wissen nötig. Für dein erstes Projekt, überdenke einen Part-Time React Native Contractor als Safety Net.

Wie handhabe ich App Store Submissions und Reviews?

EAS Submit automatisiert den Binary-Upload-Prozess. Aber du wirst immer noch App Store Connect und Google Play Console manuell für Metadaten, Screenshots, Datenschutzerklärungen und Review-Antworten verwalten müssen. Apples Review-Prozess dauert typischerweise 24-48 Stunden. Budget 1-2 Wochen für First-Time Submissions aufgrund potenzieller Ablehungen. Häufige Ablehnung-Gründe: fehlende Datenschutzrichtlinie, unzureichende Loginmöglichkeiten und unvollständige Metadaten.

Ist es lohnend, Mobile-Entwicklung anzubieten, wenn wir nur 5-10 Entwickler haben?

Absolut — das ist eigentlich die ideale Größe zum Starten. Du brauchst keinen dedizierten Mobile-Team von Anfang an. Starte damit, 2-3 deiner stärksten React-Entwickler zu trainieren, nimm ein Mobile-Projekt auf einmal an, und wachse von da aus. Das Code-Sharing zwischen Web und Mobile bedeutet, dass dein Team nicht aufgeteilt wird — sie arbeiten über Plattformen mit gemeinsamen Grundlagen. Schau dir unsere Pricing-Seite an oder kontaktiere uns direkt, wenn du diskutieren möchtest, wie andere Agenturen ähnlicher Größe diesen Übergang gemacht haben.