Definitie: React Native is een open source framework van Meta waarmee ontwikkelaars mobiele apps voor iOS en Android bouwen met JavaScript of TypeScript en de componentenaanpak van React. De code wordt omgezet naar echte native interface-elementen van het besturingssysteem, waardoor één codebase op beide platforms een app oplevert die aanvoelt als een native app.
In het kort
- React Native is in 2015 door Facebook, nu Meta, als open source vrijgegeven en is gratis te gebruiken onder de MIT-licentie.
- Met één codebase bouw je een react native app voor iOS en Android, en met aanvullende projecten ook voor web, Windows en macOS.
- Bekende apps die React Native gebruiken zijn onder meer Instagram, Facebook, Shopify, Discord en Microsoft Office.
- React Native is een logische keuze voor teams met kennis van JavaScript en React; voor zware grafische toepassingen blijft volledig native ontwikkelen vaak sterker.
Wat is React Native?
React Native is een framework om mobiele apps te bouwen. Een framework is een verzameling kant-en-klare bouwstenen en afspraken waarmee ontwikkelaars sneller en gestructureerder werken. React Native richt zich op apps voor smartphones en tablets, en dan vooral op iOS van Apple en Android van Google.
Normaal gesproken bouw je voor die twee platforms twee aparte apps. Voor iOS schrijf je code in Swift of Objective-C, voor Android in Kotlin of Java. Dat betekent twee codebases, vaak twee teams en elke wijziging twee keer doorvoeren. React Native lost dat op door één codebase te gebruiken, geschreven in JavaScript of TypeScript, die op beide platforms draait.
Het verschil met veel oudere cross-platformoplossingen is dat React Native geen webpagina in een app verpakt. De interface wordt opgebouwd uit de echte knoppen, lijsten, tekstvelden en navigatie-elementen van het besturingssysteem. Daardoor voelt een react native app voor de gebruiker als een gewone app uit de App Store of Google Play.
Waar komt React Native vandaan?
React Native is ontstaan bij Facebook. Het bedrijf had in 2013 al React uitgebracht, een JavaScript-bibliotheek om interfaces van websites te bouwen uit herbruikbare componenten. Volgens TechTarget kwam React Native voort uit een intern prototype dat interface-elementen kon aansturen vanuit een JavaScript-thread op de achtergrond. In 2015 bracht Facebook React Native uit als open source project. Volgens TechTarget werd het eerst gebruikt voor de apps Facebook Groups en Ads Manager.
Sindsdien is het framework flink doorontwikkeld. Een belangrijke stap is de zogenoemde New Architecture: een nieuwe manier waarop JavaScript en de native code met elkaar communiceren. Volgens Adapty is die nieuwe architectuur sinds versie 0.76, eind 2024, standaard ingeschakeld. Dat maakt de communicatie tussen beide lagen sneller en directer.
Hoe werkt React Native?
Een React Native-app bestaat uit componenten. Een component is een herbruikbaar stukje interface, zoals een knop, een kaart met klantgegevens of een volledig scherm. Ontwikkelaars schrijven die componenten in JSX, een schrijfwijze die JavaScript en opmaak combineert.
Bij het draaien van de app gebeurt het volgende:
- De JavaScript-code bepaalt welke componenten op het scherm moeten staan en met welke gegevens.
- React Native vertaalt die componenten naar de native bouwstenen van het platform. Een View wordt op iOS een UIView en op Android een Android View.
- Het besturingssysteem tekent de interface met zijn eigen elementen, zodat scrollen, typen en animaties zich gedragen zoals gebruikers gewend zijn.
- Bij een actie van de gebruiker, zoals een tik op een knop, gaat een signaal terug naar de JavaScript-code, die de juiste stap uitvoert.
Heeft de app toegang nodig tot iets specifieks van de telefoon, zoals de camera, locatie, pushmeldingen of biometrische beveiliging, dan gebruik je een bestaande bibliotheek of schrijf je een native module in Swift of Kotlin. Zo kan een app grotendeels gedeeld zijn en alleen op specifieke punten platformcode bevatten.
React en React Native: wat is het verschil?
De namen lijken op elkaar, maar ze hebben een ander doel.
| React | React Native | |
|---|---|---|
| Doel | Interfaces voor websites en webapplicaties | Mobiele apps voor iOS en Android |
| Verschenen | 2013 | 2015 |
| Bouwstenen | HTML-elementen zoals div en button | Native componenten zoals View en Text |
| Opmaak | CSS | Stijlobjecten in JavaScript, geïnspireerd op CSS |
| Draait in | De browser | De app op het toestel |
| Gedeeld | Componentenaanpak, JavaScript, state management | Componentenaanpak, JavaScript, state management |
Een ontwikkelaar die React kent, leert React Native relatief snel. De denkwijze is hetzelfde; de bouwstenen en een deel van de hulpmiddelen verschillen.
Wat is Expo?
Wie met React Native begint, komt al snel Expo tegen. Expo is een verzameling tools en diensten bovenop React Native die het bouwen, testen en publiceren van apps eenvoudiger maakt. Je kunt een app direct op je eigen telefoon testen, veelgebruikte functies zoals camera en meldingen zijn kant-en-klaar beschikbaar, en het bouwen van installatiebestanden voor de App Store en Google Play kan in de cloud. Voor veel nieuwe projecten is Expo inmiddels het gebruikelijke startpunt.
Voordelen van React Native
- Eén codebase voor twee platforms. Een groot deel van de code wordt gedeeld tussen iOS en Android. Dat scheelt ontwikkeltijd en maakt onderhoud overzichtelijker.
- Native interface. De app gebruikt de echte interface-elementen van het platform, wat zorgt voor een vertrouwde gebruikservaring.
- Bekende taal. JavaScript en TypeScript zijn breed bekend. Webontwikkelaars met React-ervaring kunnen relatief snel aan de slag.
- Snelle ontwikkelcyclus. Met Fast Refresh zie je een wijziging in de code vrijwel direct terug in de app, zonder opnieuw te bouwen.
- Groot ecosysteem. Er zijn veel bibliotheken voor navigatie, formulieren, kaarten, betalingen en koppelingen met diensten.
- Delen met het web. Logica voor validatie, berekeningen of API-aanroepen kan soms gedeeld worden met een webapplicatie die in React is gebouwd.
- Gratis en open source. Er zijn geen licentiekosten voor het framework zelf.
Nadelen en beperkingen
- Zware grafische taken. Volgens Adapty gaan toepassingen met veel 3D, augmented reality of realtime videoverwerking vaak beter in volledig native code.
- Afhankelijkheid van bibliotheken. Nieuwe functies van iOS of Android zijn niet altijd meteen beschikbaar; soms moet je wachten tot een communitybibliotheek wordt bijgewerkt.
- Updates bijhouden. React Native brengt regelmatig nieuwe versies uit. Een app die jarenlang niet wordt bijgewerkt, wordt steeds lastiger te onderhouden.
- Debuggen over twee lagen. Een fout kan in de JavaScript-code zitten, in een bibliotheek of in de native laag. Dat maakt het zoeken soms lastiger.
- Platformkennis blijft nodig. Voor publicatie in de App Store, rechten op het toestel en specifieke native modules heb je nog steeds kennis van iOS en Android nodig.
- Niet elke keuze blijft. Adapty noemt Airbnb, dat React Native vanaf 2016 gebruikte en er in 2018 mee stopte. Dat laat zien dat de keuze afhangt van het team, de app en de schaal.
Welke bekende apps gebruiken React Native?
React Native wordt gebruikt door grote en kleine bedrijven. Volgens Adapty zijn onder meer Facebook, Instagram, Microsoft Office, Shopify, Discord, Uber Eats, Coinbase, Wix en Bloomberg met React Native gebouwd, geheel of voor een deel. Vaak gaat het om een mix: sommige schermen in React Native, andere volledig native. Dat is ook een kracht van het framework. Je hoeft niet alles of niets te kiezen.
React Native vergeleken met andere opties
| Optie | Taal | Interface | Sterk in |
|---|---|---|---|
| React Native | JavaScript / TypeScript | Native componenten van het platform | Teams met webkennis, één codebase, vertrouwde uitstraling per platform |
| Flutter | Dart | Eigen rendering-engine | Identieke vormgeving op alle platforms, veel controle over animaties |
| Native (Swift / Kotlin) | Swift, Kotlin | Volledig native | Maximale prestaties en directe toegang tot alle functies |
| Progressive Web App | HTML, CSS, JavaScript | Webinterface in de browser | Geen app store nodig, één versie voor elk apparaat |
| Hybride app | HTML, CSS, JavaScript | Webview in een app-schil | Bestaande webcode snel als app beschikbaar maken |
Flutter van Google is de belangrijkste concurrent. Volgens Adapty heeft Flutter een iets groter marktaandeel onder ontwikkelaars, terwijl teams met webervaring doorgaans sneller werken met React Native. Een Progressive Web App is een serieus alternatief als je geen specifieke telefoonfuncties nodig hebt en niet in de app stores hoeft te staan.
Wanneer kies je voor een React Native app?
React Native past goed als:
- je zowel iOS- als Android-gebruikers wilt bedienen en het budget voor twee aparte apps niet logisch is;
- je team of ontwikkelaar al werkt met JavaScript, TypeScript of React;
- de app vooral bestaat uit schermen met lijsten, formulieren, overzichten en meldingen;
- je logica wilt delen met een bestaande webapplicatie of API;
- je in de app stores aanwezig wilt zijn en functies als pushmeldingen of camera nodig hebt.
Kies eerder iets anders als:
- de app draait om zware graphics, games, augmented reality of intensieve videobewerking;
- je volledig afhankelijk bent van de nieuwste functies van één platform;
- een webapplicatie of Progressive Web App het probleem al oplost, zodat een app in de store geen meerwaarde heeft.
Hoe verloopt de ontwikkeling van een React Native app?
Het bouwen van een React Native app volgt grotendeels dezelfde stappen als andere softwareprojecten. Innowise noemt op zijn pagina over React Native-ontwikkeling bijvoorbeeld deze fasen, met een indicatie van de duur:
| Fase | Indicatieve duur volgens Innowise |
|---|---|
| Ontdekking en afbakening | 1 tot 3 weken |
| Technisch ontwerp | 1 tot 2 weken |
| UX- en UI-ontwerp | 1 tot 2 weken |
| Ontwikkeling en testen | Vanaf 4 weken, in iteraties van 1 tot 2 weken |
| Uitrol naar de app stores | 1 tot 2 weken |
| Ondersteuning en doorontwikkeling | Doorlopend |
Dit is een marktindicatie van één bureau. De werkelijke duur hangt af van het aantal schermen, koppelingen, gebruikersrollen en de eisen aan beveiliging. Reken bij een app ook op de beoordeling door Apple en Google bij publicatie, en op terugkerende kosten voor ontwikkelaarsaccounts, hosting van de achterliggende API en onderhoud.
Waar let je op bij een React Native project?
- Begin bij de gebruiker. Wie gebruikt de app, op welk moment en met welk doel? Dat bepaalt of een app nodig is of dat een webapplicatie volstaat.
- Breng de achterkant in kaart. Een app heeft bijna altijd een server of API nodig voor gegevens, inloggen en meldingen. Die backend is vaak minstens zo groot als de app zelf.
- Kies bibliotheken bewust. Gebruik bij voorkeur actief onderhouden pakketten, zodat updates van React Native niet worden geblokkeerd.
- Test op echte toestellen. Gedrag op een oude Android-telefoon kan anders zijn dan op een nieuwe iPhone.
- Plan onderhoud. iOS en Android krijgen jaarlijks nieuwe versies, en de app stores stellen eisen aan bijgewerkte apps. Spreek af wie updates doorvoert.
- Regel toegang tot de broncode en de ontwikkelaarsaccounts in de app stores, zodat je niet afhankelijk bent van één persoon.
Veelgemaakte fouten bij een React Native app
- Een app bouwen waar een website volstaat. Een app in de store vraagt om publicatie, beoordeling en updates. Dat is alleen de moeite waard als gebruikers de app vaak openen of telefoonfuncties nodig hebben.
- De backend vergeten in de planning. Inloggen, gegevens opslaan, meldingen versturen en rechten bepalen gebeurt op de server. Wie alleen de schermen begroot, onderschat het project.
- Alles in de eerste versie willen. Begin met de belangrijkste taak van de gebruiker en voeg functies toe op basis van echt gebruik.
- Geen offline scenario. Gebruikers zitten soms in een kelder, op een bouwplaats of in de trein. Bepaal vooraf wat de app doet zonder verbinding.
- Te veel bibliotheken. Elk extra pakket is een afhankelijkheid die bij een update kan breken. Gebruik alleen wat echt nodig is.
- Geen plan voor updates. Een app die twee jaar niet is bijgewerkt, kan problemen krijgen bij nieuwe versies van iOS of Android en bij de eisen van de app stores.
Wat betekent dit voor jouw project?
Bij een nieuw idee stel ik eerst de vraag wie het gaat gebruiken en welke taak die persoon als eerste moet kunnen afronden. Het antwoord bepaalt of een app in de store echt nodig is. Moet een monteur onderweg foto’s maken en offline werken, dan ligt een mobiele app voor de hand. Moet een klant af en toe een status bekijken, dan is een webapplicatie die goed werkt op de telefoon vaak eenvoudiger en goedkoper in onderhoud.
Daarna onderzoek ik of een bestaand pakket, een koppeling of maatwerk het beste past. React Native is een van de opties binnen maatwerk, naast een webapplicatie of een Progressive Web App. Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen, zodat de techniek volgt uit wat de gebruiker nodig heeft en niet andersom.
Vraag? Twijfel je tussen een app, een webapplicatie of iets ertussenin? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook wat er komt kijken bij een webapplicatie laten maken.
Veelgestelde vragen over React Native
Wat is een React Native app?
Een React Native app is een mobiele app voor iOS en Android die is gebouwd met het framework React Native. De code is geschreven in JavaScript of TypeScript en wordt omgezet naar native interface-elementen, zodat de app aanvoelt als een gewone app uit de app store.
Is React Native gratis?
Ja. React Native is open source en gratis te gebruiken onder de MIT-licentie. Kosten ontstaan wel voor ontwikkeling, ontwikkelaarsaccounts bij Apple en Google, hosting van de achterliggende server en onderhoud.
Wat is het verschil tussen React Native en Flutter?
React Native gebruikt JavaScript of TypeScript en de native interface-elementen van het platform. Flutter is van Google, gebruikt de taal Dart en tekent de interface met een eigen rendering-engine, wat zorgt voor een identieke vormgeving op elk platform.
Verwante termen
Flutter · Native app · Hybride app · Progressive Web App · JavaScript · API-koppeling
← Terug naar de kennisbank