React Native 0.85 in 2026: Nieuw Animation Backend, Strikte TypeScript-API en Interviewvragen

React Native 0.85 markeert een belangrijk keerpunt in de evolutie van het framework. Na jaren van incrementele verbeteringen aan de New Architecture levert deze release een fundamenteel nieuw animatiesysteem, een striktere TypeScript-API en aanzienlijke prestatieverbeteringen die de dagelijkse ontwikkelervaring merkbaar veranderen. Voor ontwikkelaars die zich voorbereiden op technische sollicitatiegesprekken is het essentieel om deze veranderingen grondig te begrijpen — niet alleen de syntax, maar ook de architecturale beslissingen erachter.

Shared Animation Backend: het einde van de fragmentatie

Een van de meest impactvolle veranderingen in React Native 0.85 is de introductie van het Shared Animation Backend. Tot nu toe bestonden er twee parallelle animatie-ecosystemen: de ingebouwde Animated-API en de populaire community-bibliotheek react-native-reanimated. Beide systemen draaiden onafhankelijk van elkaar op de UI-thread, wat leidde tot duplicatie van logica, inconsistente timing en een hogere geheugenvoetafdruk.

Het nieuwe backend unificeert deze twee werelden door een gedeelde animatie-runtime te introduceren die direct op de UI-thread draait. Het belangrijkste gevolg voor ontwikkelaars is dat useNativeDriver: true nu ook layout-eigenschappen ondersteunt — iets wat voorheen alleen mogelijk was via Reanimated. Properties als width, height, margin en padding kunnen nu native worden geanimeerd zonder de JavaScript-thread te belasten.

import { Animated, Pressable, View, StyleSheet } from 'react-native';
import { useRef, useState } from 'react';

function ExpandableCard() {
  const widthAnim = useRef(new Animated.Value(120)).current;
  const heightAnim = useRef(new Animated.Value(80)).current;
  const [expanded, setExpanded] = useState(false);

  const toggle = () => {
    const toWidth = expanded ? 120 : 300;
    const toHeight = expanded ? 80 : 200;

    // Layout props with useNativeDriver — new in 0.85
    Animated.parallel([
      Animated.spring(widthAnim, {
        toValue: toWidth,
        useNativeDriver: true, // Now supports layout props
      }),
      Animated.spring(heightAnim, {
        toValue: toHeight,
        useNativeDriver: true,
      }),
    ]).start();

    setExpanded(!expanded);
  };

  return (
    <Pressable onPress={toggle}>
      <Animated.View
        style={[
          styles.card,
          { width: widthAnim, height: heightAnim },
        ]}
      />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#61DAFB',
    borderRadius: 8,
  },
});

Dit voorbeeld illustreert hoe layout-animaties nu met dezelfde API werken als transform-animaties. Voorheen zou dit een Reanimated useSharedValue en useAnimatedStyle hebben vereist, of een minder performante JS-gestuurde animatie via de oude Animated-API.

Hoe het Animation Backend intern werkt

Het Shared Animation Backend maakt gebruik van een dual update path-architectuur. Wanneer een animatie wordt gestart, bepaalt de runtime of de update via het snelle pad (direct op de UI-thread, zonder layout-herberekening) of het volledige pad (met Yoga-layout-herberekening op de UI-thread) moet verlopen.

Voor transform-eigenschappen zoals translateX, opacity en scale wordt het snelle pad gebruikt — dezelfde route die useNativeDriver: true altijd al volgde. Voor layout-eigenschappen zoals width en height wordt het volledige pad geactiveerd, waarbij Yoga incrementeel de layout herberekent. De sleutel tot de prestatie zit in het feit dat Yoga alleen de betrokken subtree herberekent, niet de volledige componentenboom.

Deze architectuur voorkomt dat ontwikkelaars moeten kiezen tussen twee fundamenteel verschillende API's voor verschillende soorten animaties. Het resultaat is een consistentere developer experience en voorspelbaardere framerates, vooral op mid-range Android-apparaten waar de overhead van dubbele animatie-runtimes het meest merkbaar was.

Post-Bridge Architectuur: JSI en TurboModules

React Native 0.85 consolideert de post-bridge architectuur die in eerdere versies geleidelijk werd geïntroduceerd. De oude bridge — het asynchrone JSON-serialisatiemechanisme tussen JavaScript en native code — is nu volledig verwijderd. Alle communicatie verloopt via JSI (JavaScript Interface), dat directe synchrone aanroepen mogelijk maakt tussen de JS-runtime en native modules.

Een van de meest merkbare verbeteringen is het standaard lazy-loaden van TurboModules. In eerdere versies werden alle geregistreerde native modules bij het opstarten van de applicatie geladen, ongeacht of ze daadwerkelijk werden gebruikt. In 0.85 worden TurboModules pas geïnitialiseerd op het moment dat ze voor het eerst worden aangeroepen.

// TurboModules now lazy-load by default in 0.85
// Cold-start memory reduced by ~40%
import { TurboModuleRegistry } from 'react-native';

// Module loads only when first accessed, not at app startup
const CameraModule = TurboModuleRegistry.getEnforcing('Camera');

// Direct synchronous call via JSI — no bridge serialization
const hasPermission = CameraModule.checkPermission();

Het effect op cold-start prestaties is aanzienlijk: het geheugengebruik bij het opstarten daalt met circa 40%, en de time-to-interactive verbetert meetbaar op zowel iOS als Android. Dit is vooral relevant voor applicaties met veel native modules waarvan slechts een deel bij elke sessie wordt gebruikt.

Metro TLS-ondersteuning

Metro, de JavaScript-bundler van React Native, ondersteunt in 0.85 nu native TLS-verbindingen. Dit betekent dat zowel het bundel-endpoint als de Fast Refresh WebSocket-verbinding over HTTPS en WSS kunnen draaien. Voor ontwikkelteams die werken met bedrijfsnetwerken, VPN-configuraties of strikte beveiligingsvereisten is dit een welkome toevoeging.

const fs = require('fs');
const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

// Enable HTTPS + WSS (Fast Refresh over secure WebSocket)
config.server.tls = {
  ca: fs.readFileSync('./certs/ca.pem'),
  cert: fs.readFileSync('./certs/cert.pem'),
  key: fs.readFileSync('./certs/key.pem'),
};

module.exports = config;

De configuratie is straightforward: door een tls-object toe te voegen aan de server-configuratie van Metro worden alle verbindingen automatisch versleuteld. Dit elimineert de noodzaak voor externe proxy-oplossingen die voorheen vereist waren in beveiligde ontwikkelomgevingen.

Breaking Changes en Migratiegids

De belangrijkste breaking change is de hernoeming van de Jest-preset. Projecten die de oude react-native-preset gebruiken, moeten overschakelen naar @react-native/jest-preset:

module.exports = {
  preset: 'react-native',
};

// jest.config.js — after
module.exports = {
  preset: '@react-native/jest-preset',
};

Daarnaast is StyleSheet.absoluteFillObject hernoemd naar StyleSheet.absoluteFill. De oude naam genereert een deprecation-waarschuwing in 0.85 en zal in een toekomstige versie volledig worden verwijderd:

const overlay = StyleSheet.absoluteFillObject;

// After (0.85+)
const overlay = StyleSheet.absoluteFill;

Andere noemenswaardige breaking changes zijn de vereiste van minimaal Node.js 20.19.4 en het feit dat tekst buiten borderRadius-grenzen nu standaard verborgen wordt. Componenten die afhankelijk zijn van overflow: visible voor tekst die buiten afgeronde hoeken valt, hebben een expliciete overflow: 'visible'-stijl nodig.

Verbeteringen in DevTools

De ontwikkelaarservaring krijgt in 0.85 een flinke impuls door verbeteringen aan de React Native DevTools. De geïntegreerde debugger ondersteunt nu meerdere gelijktijdige Chrome DevTools Protocol (CDP)-verbindingen. VS Code, React Native DevTools en AI-gestuurde coding agents kunnen tegelijkertijd verbinden zonder elkaars sessies te beëindigen.

De Network Inspector is uitgebreid met ondersteuning voor WebSocket-frames en herstelde request body-previews op Android na een regressie in eerdere versies. Dit versnelt het debuggen van data-gerelateerde problemen aanzienlijk.

Shadow Tree Commit Branching

Een minder zichtbare maar architecturaal belangrijke toevoeging is Shadow Tree Commit Branching. Het Fabric-renderingsysteem werkt met een shadow tree — een lichtgewicht representatie van de UI-hiërarchie die wordt gebruikt om de daadwerkelijke native views te updaten. Tot nu toe concurreerden animatie-commits en React state-updates om hetzelfde commit-pad, wat leidde tot frame drops bij complexe animaties die re-renders triggeren.

Met Commit Branching scheidt het systeem deze zorgen — het Animation Backend opereert op een eigen branch terwijl React-commits onafhankelijk doorgaan. De twee branches worden aan het einde van elk frame gereconcilieerd, waardoor de interleaving-problemen worden voorkomen die voorheen visuele glitches veroorzaakten bij het scrollen van lijsten met geanimeerde headers.

Voor de gemiddelde ontwikkelaar is dit een transparante verbetering — er hoeft geen code te worden aangepast. Het effect is echter merkbaar in de vorm van soepelere interacties, vooral bij schermen met zowel animaties als data-fetching.

View Transition API-infrastructuur

React Native 0.85 legt de fundamenten voor een toekomstige View Transition API, geïnspireerd op de gelijknamige web-standaard. Een nieuwe feature flag viewTransitionEnabled gaat een aankomende View Transition API af die geanimeerde overgangen tussen views mogelijk maakt. De flag staat standaard op false in 0.85 — dit is infrastructuur voor een toekomstige release, nog geen gebruikersgerichte functionaliteit.

Deze infrastructuur stelt de community in staat om te experimenteren met gedeelde element-transities via native modules, terwijl het React Native-team werkt aan een stabiele publieke API. De verwachting is dat deze API in een van de volgende releases beschikbaar komt, waardoor navigatie-animaties tussen schermen fundamenteel eenvoudiger worden.

Strikte TypeScript-API

Een laatste significante toevoeging is de opt-in strikte TypeScript-modus voor de React Native-API. Door een custom condition toe te voegen aan tsconfig.json worden strengere typedefinities geactiveerd die de exports beperken tot het publieke react-native-indexbestand, waardoor afhankelijkheid van interne bestandspaden — die tussen versies breken — wordt voorkomen.

{
  "compilerOptions": {
    "customConditions": ["react-native-strict-api"]
  }
}

De strikte API genereert types direct vanuit de broncode in plaats van ze handmatig te onderhouden. In de strikte modus retourneren functies meer precieze types. Deprecated API's genereren compile-time fouten in plaats van runtime-waarschuwingen. Platform-specifieke props worden afgedwongen op basis van het geconfigureerde platform, waardoor typefouten eerder in het ontwikkelproces worden gevangen.

Deze modus is bewust opt-in gehouden om bestaande projecten niet te breken. Voor nieuwe projecten en teams die waarde hechten aan maximale type-veiligheid wordt het sterk aanbevolen om deze modus vanaf het begin te activeren.

Veelgestelde Interviewvragen over React Native 0.85

Vraag: Wat is het Shared Animation Backend en waarom is het geïntroduceerd? Het Shared Animation Backend is een uniforme animatie-runtime die de ingebouwde Animated-API en react-native-reanimated samenvoegt op de UI-thread. Het werd geïntroduceerd om de fragmentatie tussen twee parallelle animatiesystemen op te heffen, geheugengebruik te reduceren en useNativeDriver: true uit te breiden naar layout-eigenschappen. De dual update path-architectuur zorgt ervoor dat transform-animaties het snelle pad volgen en layout-animaties incrementele Yoga-herberekeningen triggeren.

Vraag: Hoe werkt lazy-loading van TurboModules en wat is het effect op prestaties? TurboModules worden in 0.85 standaard pas geïnitialiseerd bij de eerste aanroep via TurboModuleRegistry.getEnforcing(), in plaats van allemaal bij het opstarten van de applicatie. Dit verlaagt het geheugengebruik bij cold-start met circa 40%. De communicatie verloopt via JSI, wat directe synchrone aanroepen mogelijk maakt zonder de overhead van JSON-serialisatie over de oude bridge.

Vraag: Wat is Shadow Tree Commit Branching? Shadow Tree Commit Branching scheidt animatie-gestuurde shadow tree-updates van React state-gestuurde updates in onafhankelijke branches. Elke branch committeert onafhankelijk en wordt aan het einde van elk frame gereconcilieerd. Dit voorkomt animatiejank veroorzaakt door React re-renders die concurreren om hetzelfde commit-pad — een veelvoorkomende bron van dropped frames bij het scrollen van lijsten met geanimeerde elementen.

Vraag: Welke breaking changes zijn het meest impactvol in 0.85? De hernoeming van de Jest-preset naar @react-native/jest-preset, de vervanging van StyleSheet.absoluteFillObject door StyleSheet.absoluteFill, de volledige verwijdering van de bridge, en de vereiste van minimaal Node.js 20.19.4. Op Android zijn ReactTextUpdate nu intern, ReactZIndexedViewGroup en UIManagerHelper deprecated, en CatalystInstanceImpl volledig verwijderd.

Vraag: Hoe verschilt de strikte TypeScript-modus van de standaardtypes? De strikte modus, geactiveerd via de react-native-strict-api custom condition in tsconfig.json, genereert types direct vanuit de broncode en beperkt exports tot het publieke indexbestand. Deprecated API's genereren compile-time fouten in plaats van runtime-waarschuwingen, en interne bestandspaden die tussen versies kunnen breken worden geblokkeerd.

Conclusie

React Native 0.85 is geen release die slechts cosmetische verbeteringen brengt. Het Shared Animation Backend elimineert een jarenlange bron van complexiteit, TurboModules met lazy-loading verbeteren de opstartprestaties drastisch, en de strikte TypeScript-modus verhoogt de codekwaliteit voor teams die bereid zijn de strengere regels te omarmen.

De architecturale fundamenten die in deze release worden gelegd — van Shadow Tree Commit Branching tot de View Transition API-infrastructuur — wijzen op een framework dat zich voorbereidt op een nieuwe generatie mobile experiences. Voor ontwikkelaars die zich op technische interviews voorbereiden, is het beheersen van deze concepten niet alleen nuttig voor het gesprek, maar ook voor het dagelijkse werk met het framework.

De migratie van 0.84 naar 0.85 vereist gerichte aandacht voor de breaking changes, maar de investering wordt ruimschoots terugverdiend door de verbeterde prestaties, betere ontwikkelaarservaring en een solider typesysteem.