React Native Academy · Les

Reanimated en shared values installeren

Installeer react-native-reanimated, voeg de Babel-plugin toe, maak shared values met useSharedValue en koppel deze aan geanimeerde stijlen met useAnimatedStyle.

Les 1 van 413 stappen

Reanimated en shared values installeren is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

Waarom Reanimated bestaat

React Native Reanimated is een krachtigere animatiebibliotheek die verder gaat dan wat de ingebouwde Animated API kan bereiken. De Animated API verplaatst de animatieconfiguratie eenmalig naar native en voert die daar uit, terwijl Reanimated je toestaat om willekeurige JavaScript-achtige logica — worklets genoemd — beeld voor beeld rechtstreeks op de UI-thread uit te voeren.

Hierdoor zijn animaties mogelijk die door gebaren worden aangestuurd en in realtime reageren op de positie van een vinger, iets wat onmogelijk is met de vooraf geconfigureerde aanpak van de Animated API. Reanimated 3 is de huidige versie en vormt de basis van de vloeiende interacties van React Native Gesture Handler.

react-native-reanimated installeren

Installeer Reanimated vanuit npm en voeg daarna de Babel-plug-in toe aan babel.config.js. De Babel-plug-in transformeert workletfuncties tijdens het bouwen, zodat ze op de UI-thread kunnen worden uitgevoerd. Zonder de plug-in werkt de bibliotheek tijdens runtime stilletjes niet.

Bij de beheerde Expo-werkwijze moet de bibliotheek compatibel zijn met je SDK-versie. Controleer de compatibiliteitstabel van Reanimated voordat je installeert. Na de installatie moet je de native app opnieuw bouwen — Reanimated kan niet via een OTA-update worden toegevoegd.

// Terminal:
// npx expo install react-native-reanimated

// babel.config.js:
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

// IMPORTANT: Reanimated plugin must be listed LAST

useSharedValue: het basisprimitief van Reanimated

useSharedValue is het equivalent van Animated.Value in Reanimated. Het maakt een waarde die wordt gedeeld tussen de JavaScript-thread en de UI-thread en die vanuit worklets op de UI-thread kan worden gelezen en geschreven zonder de bridge te passeren.

In tegenstelling tot useState veroorzaakt het schrijven naar een gedeelde waarde GEEN nieuwe React-rendering. In plaats daarvan wordt de geanimeerde stijl rechtstreeks op de UI-thread bijgewerkt. Hierdoor kun je gebaren vloeiend volgen — de positie meer dan 60 keer per seconde bijwerken zonder tussenkomst van React.

import { useSharedValue } from 'react-native-reanimated';
import { useEffect } from 'react';

export default function MyComponent() {
  const offset = useSharedValue(0);
  const opacity = useSharedValue(1);

  // Read the value: offset.value
  // Write to it: offset.value = 100
}

useAnimatedStyle: waarden met stijlen verbinden

useAnimatedStyle maakt een stijlobject dat opnieuw wordt berekend op de UI-thread wanneer een gedeelde waarde die het leest verandert. Je geeft een workletfunctie door die een stijlobject retourneert en gedeelde waarden leest met .value. Koppel de geretourneerde stijl aan een ReanimatedView (geïmporteerd als Animated.View vanuit Reanimated).

Dit is de verbinding tussen gedeelde waarden en de zichtbare gebruikersinterface. De stijlfunctie wordt uitgevoerd op de UI-thread en heeft daardoor geen enkele invloed op React-rendering of de JavaScript-thread.

import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

export default function Box() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return <Animated.View style={[styles.box, animatedStyles]} />;
}

withTiming- en withSpring-animaties

In plaats van Animated.timing op een gedeelde waarde aan te roepen, wijs je de geretourneerde waarde van withTiming of withSpring eraan toe. Dit zijn animatiefuncties die de gedeelde waarde in de loop van de tijd naar een doelwaarde sturen en op de UI-thread worden geëvalueerd.

Met offset.value = withTiming(100) start je een vloeiende timinganimatie. Met offset.value = withSpring(100) start je een springanimatie. Deze toewijzingssyntaxis is eenvoudiger dan het imperatieve .start()-patroon van de Animated API.

import { useSharedValue, withTiming, withSpring } from 'react-native-reanimated';

const offset = useSharedValue(0);

// Trigger a timing animation:
function moveRight() {
  offset.value = withTiming(200, { duration: 500 });
}

// Trigger a spring:
function springRight() {
  offset.value = withSpring(200, { damping: 15, stiffness: 100 });
}

Opacity en scale animeren

Gedeelde waarden voor opacity en scale werken precies hetzelfde: maak een gedeelde waarde, bouw een geanimeerde stijl met useAnimatedStyle en wijs animatiefuncties aan de waarde toe om overgangen te starten. Je kunt meerdere gedeelde waarden combineren in één useAnimatedStyle.

Het belangrijkste voordeel ten opzichte van de Animated API is dat de workletfunctie in useAnimatedStyle samen met gebaargebeurtenissen op de UI-thread wordt uitgevoerd, waardoor realtime volgen perfect vloeiend verloopt.

const scale = useSharedValue(1);
const opacity = useSharedValue(0);

const style = useAnimatedStyle(() => ({
  opacity: opacity.value,
  transform: [{ scale: scale.value }],
}));

// Animate on press:
function press() {
  scale.value = withSpring(0.9);
  opacity.value = withTiming(0.7, { duration: 150 });
}

function release() {
  scale.value = withSpring(1);
  opacity.value = withTiming(1, { duration: 150 });
}

Regels voor useAnimatedStyle-worklets

De functie die je aan useAnimatedStyle doorgeeft, is een worklet — deze wordt uitgevoerd op de UI-thread, niet op de JavaScript-thread. Daardoor heeft de functie niet rechtstreeks toegang tot JavaScript-closures, geïmporteerde modules of React-status. Ze heeft alleen toegang tot gedeelde waarden en primitieve constanten die tijdens de definitie zijn vastgelegd.

De Babel-plug-in van Reanimated transformeert de workletfunctie zodat deze veilig op de UI-thread kan worden uitgevoerd. Als je deze regels schendt, zie je onduidelijke runtimefouten. Test bij twijfel eerst met een eenvoudige transformatie voordat je complexiteit toevoegt.

const offset = useSharedValue(0);
const MULTIPLIER = 2; // primitives captured OK

// CORRECT: only reads sharedValue and primitive
const style = useAnimatedStyle(() => ({
  transform: [{ translateX: offset.value * MULTIPLIER }],
}));

// WRONG: accessing React state would throw
// const [reactState] = useState(0);
// const badStyle = useAnimatedStyle(() => ({
//   opacity: reactState, // cannot read React state in worklet
// }));

Reanimated uitvoeren met Expo Go

Reanimated vereist dat de native module in het app-binaire bestand wordt gecompileerd. In de beheerde Expo-werkwijze betekent dit dat je een ontwikkelbuild nodig hebt (gemaakt met npx expo run:android of npx expo run:ios) in plaats van de standaardapp Expo Go, die de native module van Reanimated niet bevat.

Een eenvoudig alternatief is de ontwikkelclient van Expo (expo-dev-client), een aanpasbare versie van Expo Go die je eigen native modules bevat. Installeer deze, bouw opnieuw en scan de QR-code om een ontwikkelomgeving te krijgen die Reanimated ondersteunt.

// Install expo-dev-client for Reanimated support:
// npx expo install expo-dev-client
// npx expo run:ios   (or run:android)

// Then in babel.config.js ensure:
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'], // must be last
};

Animaties koppelen met withSequence

Reanimated biedt withSequence en withRepeat om animaties rechtstreeks in de waardetoewijzing samen te stellen, zonder afzonderlijke Animated.sequence- of Animated.loop-objecten. De syntaxis is beknopter en functioneler.

withRepeat accepteert een animatie, een aantal herhalingen (−1 voor oneindig) en een boolean om de richting om te keren. withSequence koppelt meerdere animatiefasen in de juiste volgorde.

import { withTiming, withSpring, withSequence, withRepeat } from 'react-native-reanimated';

// Shake animation: left, right, center
offset.value = withSequence(
  withTiming(-10, { duration: 100 }),
  withTiming(10, { duration: 100 }),
  withTiming(0, { duration: 100 })
);

// Pulse animation (infinite):
opacity.value = withRepeat(
  withTiming(0.3, { duration: 600 }),
  -1, // repeat forever
  true // reverse each cycle
);

Gedeelde waarden lezen versus React-status

Een belangrijk mentaal model: gedeelde waarden zijn geen React-status. Schrijven naar offset.value veroorzaakt geen nieuwe weergave. De gebruikersinterface wordt rechtstreeks bijgewerkt via geanimeerde stijlen. Als je een gedeelde waarde moet synchroniseren met React-status (bijvoorbeeld om voorwaardelijke JSX weer te geven), gebruik je useAnimatedReaction of runOnJS om vanuit de UI-thread een React-statussetter aan te roepen.

Als je deze grens begrijpt — Reanimated bevindt zich buiten de weergavecyclus van React — kun je Reanimated effectief gebruiken zonder bugs te introduceren.

import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';

const [isVisible, setIsVisible] = React.useState(true);
const opacity = useSharedValue(1);

// React to shared value changes on JS thread:
useAnimatedReaction(
  () => opacity.value,
  (current) => {
    if (current === 0) runOnJS(setIsVisible)(false);
  }
);

Samenvatting van Reanimated versus Animated API

Wanneer je elk animatiesysteem gebruikt:

Animated API — Eenvoudige animaties voor binnenkomen en verdwijnen, vervagingen met opacity en vooraf geconfigureerde reeksen. De leercurve is lager, het wordt meegeleverd met React Native en het is toereikend voor de meeste apps.
Reanimated — Bewegingsgevoelige animaties, realtime tracking en complexe interactieve fysica. Dit is nodig wanneer een animatie frame voor frame moet reageren op de actuele positie van een gebaar.

Veel apps in productie gebruiken Animated API voor eenvoudige UI-overgangen en Reanimated alleen voor gebaargestuurde componenten zoals veegkaarten, onderste panelen en slepen-en-neerzetten.

Korte controle

Test je begrip van de concepten van React Native Mobile Development uit deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd dat useSharedValue een waarde maakt die wordt gedeeld tussen de JS- en UI-threads voor animaties zonder overhead van de bridge, dat useAnimatedStyle gedeelde waarden via een worklet op de UI-thread koppelt aan stijlen van componenten en dat withTiming en withSpring worden toegewezen aan sharedValue.value om animaties te starten. Hierna bekijken we worklets en hoe deze complexe gebarenlogica volledig op de UI-thread kunnen uitvoeren.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Reanimated en shared values installeren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Reanimated en shared values installeren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “Reanimated en shared values installeren”?

Installeer react-native-reanimated, voeg de Babel-plugin toe, maak shared values met useSharedValue en koppel deze aan geanimeerde stijlen met useAnimatedStyle. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Reanimated en shared values installeren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Native Academy?

Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Reanimated en shared values installeren
Worklets en code uitvoeren op de UI-thread
Pan- en swipebewegingen met Gesture Handler
Knijpen om te zoomen en roteren

← Terug naar React Native Academy