Ik zal eerlijk met je zijn: drie jaar geleden zou ik elk webbureaudat naar mobiel informeerde hebben gezegd om gewoon een PWA te bouwen en het voor gezien te houden. Die raad is slecht gealtereerd. De mobiele app-markt bereikte in 2025 een omzet van $935 miljard, de verwachtingen van cliënten verschoven dramatisch, en React Native groeide uit tot iets dat ik echt graag met werk. Als uw agentschap al bouwt met Next.js en React, zit u op een goudmijn van overdraagbare vaardigheden. Maar er zijn echte valkuilen, en ik ben er in de meeste gelopen, zodat u dat niet hoeft te doen.

Dit artikel is de gids die ik had willen hebben toen we mobiele cliënten serieus gingen nemen. Het dekt de technische realiteit, de bedrijfseconomie, en de implementatiepijplijn die u nodig hebt. Geen luchtige opmerkingen over "synergieën" — slechts hard-won lessen van het opleveren van productie-apps.

Inhoudsopgave

React Native voor webagentschappen: Mobiel toevoegen aan uw Next.js-praktijk in 2026

Waarom 2026 het juiste moment is voor webagentschappen om mobiel in te gaan

Het timing-argument gaat niet alleen om marktomvang. Het gaat om drie specifieke verschuivingen die samenkwamen:

React Native's New Architecture is stabiel. De Fabric-renderer en TurboModules die jaren "eraan komen" waren, zijn nu de standaard. Prestatiekloven tussen React Native en native Swift/Kotlin krompen tot bijna irrelevantie voor 90% van app-categorieën. De JSI (JavaScript Interface) betekent dat u niet langer voor elke native oproep een brug oversteekt — het is synchroon en snel.

Expo werd een volledig platform. Expo SDK 53 (uitgebracht begin 2026) ondersteunt vrijwel elke native API die u nodig zou hebben. De dagen van afscheiden van Expo voor basisfuncties zoals Bluetooth of achtergrondlocatie zijn voorbij. EAS Build handelt de gehele compilatiepijplijn af. U hebt voor de meeste projecten nooit Xcode op uw machine nodig.

De vraag van de cliënt verschoof. Ik zie een patroon in agentschappen in ons netwerk: cliënten die vroeger om "een website" vroegen, vragen nu om "een digitaal product." Ze verwachten een webpresentie EN een mobiele app, en ze verwachten dat ze een designsysteem delen. Als u beiden van één team kunt leveren, concurreert u niet tegen aparte web- en mobiele winkels — u vervangt beide.

De marktcijfers

Volgens Statista's gegevens uit 2025, wordt de wereldwijde mobiele app-omzet geprojecteerd om $1,1 miljard te bereiken tegen 2027. Maar relevanter voor agentschappen: het gemiddelde mobiele app-budget van een zakelijke cliënt in 2025-2026 ligt tussen $150K-$500K voor een MVP. Dat is 2-3x wat de meeste agentschaps-webprojecten vereisen.

De React-ecosysteem-overlap: wat draagt werkelijk over

Laten we eerst de mythe doden: React Native is niet "gewoon React voor telefoons." Uw ontwikkelaars zullen een leercurve hebben. Maar het is een veel kortere curve dan het helemaal van nul af leren van Swift en Kotlin.

Hier is een eerlijke uitsplitsing van wat overdraagt en wat niet:

Vaardigheid/Technologie Draagt over naar React Native? Opmerkingen
React-componentenpatronen ✅ Ja, direct Hooks, context, state management — allemaal identiek
TypeScript ✅ Ja, direct Dezelfde taal, dezelfde tooling
State management (Zustand, Jotai, Redux) ✅ Ja, direct Drop-in compatibel
React Query / TanStack Query ✅ Ja, direct Dezelfde API, dezelfde cachingstrategieën
CSS / Tailwind ⚠️ Gedeeltelijk Geen CSS-cascade. NativeWind overbrugt deze kloof
Next.js-routing ⚠️ Gedeeltelijk Expo Router is ook op bestanden gebaseerd, maar navigatiepadigma's verschillen
DOM-manipulatie ❌ Nee Er is geen DOM. Punt.
HTML-elementen ❌ Nee <View>, <Text>, <Pressable> in plaats daarvan
Browser-API's ❌ Nee Hebben Expo-modules of native modules nodig
CSS-animaties ❌ Nee Gebruik Reanimated 3 (wat eigenlijk beter is)

Het zoete plekje is dit: uw React-ontwikkelaars kunnen productief zijn in React Native binnen 2-3 weken. Ze zullen geen experts zijn, maar ze kunnen functies leveren. Dat is een enorme voorsprong vergeleken met het aannemen van native-ontwikkelaars.

Wat me het meest verraste

Het ding dat beter overdroeg dan ik verwachtte was het mentale model. React's componentsamenstelling, unidirectionele gegevensstroom, en declaratieve UI-paradigma — dat zijn de moeilijke onderdelen om te leren. De verschillen in API-oppervlak (<div> vs <View>) zijn triviaal in vergelijking.

Wat slechter overdroeg dan ik verwachtte was lay-out. Ja, React Native gebruikt Flexbox. Maar het is Flexbox met flexDirection: 'column' als standaard, geen display: grid, geen media-queries (u gebruikt useWindowDimensions), en geen cascade-stijlen. Ieder lid van ons team struikelde hierover voor de eerste week.

Expo in 2026: het platform dat alles veranderde

Als u React Native tussen 2019-2020 hebt geprobeerd en af bent gebotst, begrijp ik het. De developer experience was ruw. Expo heeft dit fundamenteel veranderd.

Dit is wat Expo u in 2026 geeft:

  • Expo Router v4: File-based routing dat Next.js-conventies weerspiegelt. Uw devs voelen zich meteen thuis.
  • Expo Modules API: Schrijf native modules in Swift/Kotlin met een schone TypeScript-interface. Geen meer janky bridge-code.
  • EAS Build: Cloud-gebaseerde builds voor iOS en Android. Geen Mac vereist voor iOS-builds.
  • EAS Submit: Geautomatiseerde App Store- en Play Store-indieningen.
  • EAS Update: Over-the-air-updates die App Store-review omzeilen voor alleen-JavaScript-wijzigingen.
  • Expo Dev Client: Aangepaste development-builds die uw native modules bevatten maar het snelle refresh-DX behouden.
# Een nieuw Expo-project maken in 2026
npx create-expo-app@latest my-app --template tabs
cd my-app
npx expo start

Dat is alles. U draait op iOS Simulator en Android Emulator (of fysieke apparaten via Expo Go) in minder dan twee minuten.

Expo Router: de brug van Next.js

Expo Router verdient speciale aandacht omdat het de enige grootste reden is waarom Next.js-ontwikkelaars zich snel aanpassen. Kijk naar de structuur:

app/
  (tabs)/
    index.tsx        # Home-tabblad
    settings.tsx     # Instellingentabblad
    _layout.tsx      # Tabblad-lay-out
  profile/
    [id].tsx         # Dynamische route
  _layout.tsx        # Root-lay-out

Als u bouwt met Next.js App Router, is deze structuur bijna identiek. Dynamische routes, lay-outs, geneste navigatie — de concepten toewijzen direct. Het belangrijkste verschil is dat mobiele navigatie stacks en tabbladen gebruikt in plaats van pagina's en URL-paden, maar Expo Router abstraheert dit prachtig.

React Native voor webagentschappen: Mobiel toevoegen aan uw Next.js-praktijk in 2026 - architectuur

Code delen tussen Next.js en React Native

Dit is waar agentschappen de echte ROI krijgen. Code delen tussen web en mobiel is niet alleen leuk om te hebben — het is de economische rechtvaardiging voor het aanbieden van beide services.

Wat delen

Deel agressief:

  • Bedrijfslogica en utilities
  • API-cliënten en data-fetching hooks
  • State management-winkels
  • Type-definities en validatieschema's (Zod werkt hier goed)
  • Authenticatielogica

Deel voorzichtig:

  • Design tokens (kleuren, spacing, typografieschalen)
  • Componentlogica (maar niet componentrendering)

Niet delen:

  • UI-componenten rechtstreeks (de rendering-primitieven zijn anders)
  • Navigatielogica
  • Platformspecifieke animaties

Monorepo-setup

De standaardbenadering in 2026 is een Turborepo- of Nx-monorepo. Hier is een typische structuur:

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,
  });
}

Deze hook werkt identiek in zowel uw Next.js-app als uw React Native-app. De data-fetching, caching, en state management zijn volledig gedeeld. Alleen de UI-laag die de producten rendert verschilt.

De Solito / Universal-benadering

Voor agentschappen die code-sharing nog verder willen pushen, maakt Solito (van Fernando Rojo) universele navigatie en enkele gedeelde componenten tussen Next.js en Expo mogelijk. In 2026 is de React Native react-native-web-bibliotheek ook volwassen genoeg voor designsysteem-deling, hoewel ik dit alleen aanraad voor teams die minstens één React Native-project hebben opgeleverd. Het voegt complexiteit toe.

Onze typische code-deelratio: 40-60% van het totale codebase wordt gedeeld tussen web en mobiel. Dat is niet marketingkletspraat — dat is gemeten in zes cliëntprojecten.

EAS Build en implementatie: uw CI/CD-pijplijn

Implementatie is waar mobiele ontwikkeling historisch gezien pijnlijk is geweest. App-ondertekening, inrichtingsprofielen, App Store-compliance — het is een labyrint. EAS maakt het beheersbaar.

EAS Build-prijsstelling (2026)

Plan Prijs Buildtegoedbiljetten/maand Buildsnelheid
Gratis $0 30 iOS + 30 Android ~40 min per build
Productie $99/mnd 200 totaal ~15 min per build
Enterprise $999/mnd Onbeperkt ~8 min per build (prioriteit)

Voor de meeste agentschappen is het Production-plan het zoete plekje. U zult snel door gratis tegoedtegoeden heen gaan zodra u meer dan één actief project hebt.

Een echte CI/CD-pijplijn

Hier is de pijplijn die we gebruiken, en het heeft goed gewerkt in meerdere cliëntprojecten:

# .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 }}

Voor JavaScript-only updates die geen native code raken, gebruikt u EAS Update in plaats van een volledige build:

# Push een OTA-update — gebruikers krijgen het bij volgende app-lancering
eas update --branch production --message "Fix checkout button alignment"

Dit is enorm voor agentschappen. Bugfixes die 1-3 dagen zouden duren op App Store-review wachten bereiken nu gebruikers in minuten.

Agentschapseconomie: prijsstelling, personeelsbestand, en marges

Laten we het over geld hebben. Dit is waar ik zie dat agentschappen de grootste fouten maken.

Mobiele projecten prijzen

Prijsmobiele projecten niet als webprojecten. Ze zijn duurder om te bouwen, duurder om te onderhouden, en komen met doorlopende platformkosten. Hier is wat we hebben zien werken:

Projecttype Typische agentschapstarief Tijdlijn Totaalbereik
Eenvoudige app (inhoud, auth, basis CRUD) $180-250/hr 8-12 weken $90K-$180K
Medium app (betalingen, real-time, integraties) $180-250/hr 12-20 weken $180K-$400K
Complexe app (offline-first, zware native features) $200-300/hr 20-32 weken $350K-$750K
Web + Mobile bundel (gedeeld codebase) $180-250/hr 16-28 weken $250K-$550K

De web + mobile bundel is uw competitief wapen. Een cliënt die beide voor $350K krijgt, krijgt een betere deal dan het betalen van $200K voor web en $300K voor mobiel aan aparte winkels. En uw marges zijn beter vanwege code-sharing.

Personeelsmodel

U hoeft niet meteen dedicated mobiele ontwikkelaars aan te nemen. Hier is de progressie die werkt:

  1. Fase 1 (eerste mobiel project): Uw senior React-dev leidt, met een aannemer die React Native-ervaring heeft als gids. Budget $15-25K voor de aannemer.
  2. Fase 2 (2-3 projecten in): Uw team heeft genoeg ervaring. Neem één ontwikkelaar met sterke React Native-achtergrond aan als mobiele lead.
  3. Fase 3 (mobiel is 30%+ van omzet): Bouw een dedicated mobiele pod van 2-3 ontwikkelaars.

De onderhouds-inkomstenstream

Hier is wat niemand u vertelt over mobiel: het vereist doorlopend onderhoud, zelfs als de cliënt geen functies toevoegt. iOS en Android brengen jaarlijks grote OS-versies uit. Afhankelijkheden moeten worden bijgewerkt. App Store-beleid verandert. Dit is terugkerende opbrengsten.

We berekenen $3,000-$8,000/maand voor mobiele app-onderhoudsreserveringen, afhankelijk van app-complexiteit. Over 8-10 cliënten heen, dat is significante terugkerende opbrengsten die projectgebaseerde inkomensvolatiliteit egaliseert.

Wanneer ja zeggen (en nee) tegen mobiele cliënten

Niet elk mobiel project is geschikt voor uw agentschap. Ik heb dit op de moeilijke manier geleerd.

Zeg ja wanneer:

  • De cliënt heeft al een webproduct dat u hebt gebouwd — u kent het domein, de API, de bedrijfslogica. U bent 40% klaar voor dag één.
  • De app is voornamelijk data-driven — CRUD-apps, dashboards, e-commerce, content delivery. React Native blinkt hier uit.
  • De cliënt heeft realistische tijdlijnen — minimaal 8 weken voor alles wat zinvol is.
  • Budget is $80K+ — Hieronder kunt u geen kwaliteit leveren en marges behouden.

Zeg nee wanneer:

  • De app vereist zware GPU/graphics — Games, AR-ervaringen, complexe 3D. Gebruik Unity of native.
  • De app heeft diepte hardware-integratie nodig — Bluetooth LE-randapparatuur, aangepaste camerapijplijnen, NFC-betalingsverwerking. Mogelijk in React Native, maar de native module-ontwikkeling zal uw budget opgeblazen doen.
  • De cliënt wil "pixel-perfect platform native" design — Als ze willen dat hun iOS-app zich voelt als een SwiftUI-app en hun Android-app voelt als een Jetpack Compose-app, voegt React Native overhead toe.
  • Budget is onder $50K — U zult geld verliezen. Verwijs ze naar een freelancer of een no-code platform.
  • De cliënt heeft geen API — Als u de backend, de mobiele app, EN een web-app moet bouwen, bereik voorzichtig. Dit zijn drie projecten, niet één.

Engineeringkosten: de cijfers waar niemand over spreekt

Buiten ontwikkelaarssalarissen voegt mobiel kosten toe die webagentschappen niet bedenken:

Kosten Jaarlijks bedrag Opmerkingen
Apple Developer-account $99/jaar per cliënt Vereist voor App Store
Google Play Developer-account $25 eenmalig per cliënt Vereist voor Play Store
EAS Build (Productie) $1,188/jaar Gedeeld over projecten
App Store-screenshots & assets $500-2,000 per app Vaak vergeten in omvang
Device testing lab $2,000-5,000/jaar Fysieke apparaten of BrowserStack
Push notification-service $0-500/maand Firebase is gratis om mee te beginnen, schalen
Code signing-certificaten Opgenomen in Apple Dev-account Maar het beheren ervan is tijd
App Store Optimization $500-2,000/lancering Als u dit voor cliënten doet

De heimelijke kosten zijn testen op echte apparaten. Simulators liegen. We onderhouden een device lab met 6 iPhones (verschillende modellen) en 4 Android-apparaten (Samsung, Pixel, één goedkoop telefoon voor performantstesten). Budget hiervoor.

Tijdkosten

App Store-review duurt meestal 24-48 uur, maar kan een week duren tijdens vakantieperiodes. Play Store-review is meestal sneller (uren tot één dag). Rekening hiermee in uw projecttijdlijnen — u kunt niet gewoon "vrijdag implementeren" zoals u doet met web-apps.

Eerste app-indieningen duren langer. Apple controleert vooral nieuwe ontwikkelaaraccounts nauwkeurig. We hebben gehad dat eerste indieningen 5-7 dagen met afwijzings-herindiening-cycli duurden.

Een praktisch migratiepad voor webagentschappen

Als u verkocht bent op het toevoegen van mobiel aan uw praktijk, hier is het pad dat ik zou aanbevelen:

Maand 1-2: Intern project Bouw een eenvoudige interne app met Expo. Een tijdtracker, een projectdashboard, wat dan ook. Zorg ervoor dat uw team vertrouwd is met de tooling zonder cliëntdruk. Gebruik dit om uw monorepo-structuur, CI/CD-pijplijn, en device testing-proces in te stellen.

Maand 3-4: Upsell bestaande cliënt Benader uw beste bestaande cliënt over een mobiele metgezel-app. U kent al hun domein, hun API, hun team. Bied het tegen een licht kortingsvoorstel aan in ruil voor een referentiegeval.

Maand 5-8: Eerste externe mobiele cliënt Neem een mobiel project op met realistische bereik. Houd het tot maximaal 12 weken. Gebruik uw interne project en eerste cliëntproject als bewijsstuk van vermogen.

Maand 9+: Productiseer Maak een standaard mobiel projectsjabloon, estimatiespreadsheet, en onboardingproces. Dit is wanneer mobiel een echte servicelijn wordt, geen experiment.

Investeer gedurende dit proces in uw headless CMS-mogelijkheden — content-gestuurde mobiele apps die uit dezelfde CMS als het web putten, zijn een van de hoogste-waarde bundels die u cliënten kunt aanbieden.

Techstack-aanbeveling

Voor agentschappen die in 2026 beginnen, hier is de stack waarop ik zou wedden:

  • Expo SDK 53+ met Expo Router v4
  • NativeWind v4 voor styling (Tailwind CSS voor React Native)
  • TanStack Query voor server state
  • Zustand voor client state
  • React Native Reanimated 3 voor animaties
  • Turborepo voor monorepo management
  • EAS Build + EAS Update voor CI/CD

Als uw webpraktijk in plaats daarvan Astro gebruikt, werkt de gedeelde codestrategie nog steeds — u deelt alleen de datalaag en bedrijfslogica-pakketten in plaats van React-componenten.

Veelgestelde vragen

Hoe lang duurt het voordat een React/Next.js-ontwikkelaar productief wordt in React Native? Op basis van onze ervaring met het opschalen van vijf web-ontwikkelaars, verwacht ongeveer 2-3 weken voor basisproductiviteit (kan schermen bouwen en functies implementeren) en 2-3 maanden voor wat ik zeker zou noemen zelfstandige zekerheid (kan functies architectureren, native-problemen debuggen, platformspecifieke randgevallen verwerken). De initiële leercurve is meestal over navigatiepatronen, mobielspecifieke UX-conventies, en de stijlverschillen.

Kan ik dezelfde componenten in Next.js en React Native gebruiken? Niet rechtstreeks — de rendering-primitieven zijn anders (<div> vs <View>, <span> vs <Text>). U kunt echter componentlogica delen via aangepaste hooks, design tokens delen, en bibliotheken zoals Solito of react-native-web gebruiken om de kloof te overbruggen. In de praktijk delen we 40-60% van totale code tussen platforms, voornamelijk bedrijfslogica en datalaagcode.

Hoeveel kost het om een React Native-app jaarlijks te onderhouden? Voor een typische app met middelgrote complexiteit, verwacht $36K-$96K/jaar in onderhoudskosten. Dit dekt OS-compatibiliteitsupdate (iOS en Android brengen jaarlijks grote versies uit), afhankelijkhedenupdates, bugfixes, kleine feature-toevoegingen, en App Store-beleidsconformiteit. Dit is een echte kosten die cliënten moeten budgetteren.

Is React Native snel genoeg voor productie-apps in 2026? Ja, definitief. Met de New Architecture (Fabric + TurboModules + JSI) nu de standaard, bereiken React Native-apps consistent 60fps voor standaard-UI. Apps zoals Discord, Shopify Shop, en Coinbase gebruiken React Native op grote schaal. De prestatiesgap met native is verwaarloosbaar voor 90%+ van app-categorieën. Waar het nog steeds achterblijft, zijn zware animatie of GPU-intensieve workloads.

Moet ik Expo of bare React Native gebruiken? Expo. Dit is zelfs niet een nauw ding in 2026. Expo ondersteunt vrijwel elke native API, de Expo Modules API laat u aangepaste native code schrijven wanneer nodig, en EAS Build elimineert de native toolchain-kopzorgen. Het oude advies van "afscheiden van Expo als u X nodig hebt" is verouderd. Ongeveer 85-90% van productie React Native-apps gebruiken nu Expo, inclusief grote apps.

Wat is het minimale haalbare team voor een mobiel project? Twee ontwikkelaars en een designer die mobielconventies begrijpt. Één ontwikkelaar moet React Native-ervaring hebben (zelfs als dat via uw interne trainingsproject). U kunt van daar opschalen, maar solo gaan op een cliëntmobiel project is risicovol — er is te veel platformspecifieke kennis nodig. Voor uw eerste project, overweeg een part-time React Native-aannemer als veiligheidsmaatregel.

Hoe pak ik app store-indieningen en beoordelingen aan? EAS Submit automatiseert het binaire uploadproces. Maar u zult app Store Connect en Google Play Console handmatig moeten beheren voor metadata, screenshots, privacyverklaringen, en beoordelingrespons. Apple's beoordelingsproces duurt meestal 24-48 uur. Budget 1-2 weken voor eerste-ooit indieningen vanwege mogelijke afwijzingen. Veelvoorkomende afwijzingsredenen: ontbrekend privacybeleid, onvoldoende login-functionaliteit, en incompleet metadata.

Is het het waard om mobiele ontwikkeling aan te bieden als we alleen 5-10 ontwikkelaars hebben? Absoluut — dat is eigenlijk de ideale grootte om mee te beginnen. U hebt niet meteen een dedicated mobiel team nodig. Begin met het trainen van 2-3 van uw sterkste React-ontwikkelaars, neem één mobiel project tegelijk aan, en groei van daar uit. De code-sharing tussen web en mobiel betekent dat uw team niet is verdeeld — ze werken over platforms heen met gedeelde fundamenten. Bekijk onze prijspagina of neem rechtstreeks contact op als u wilt bespreken hoe andere agentschappen van vergelijkbare grootte deze overgang hebben gemaakt.