React Native Reanimated 4: Animációk és Gesztusok Teljes Útmutatója (2026)

A modern mobilalkalmazások egyik legfontosabb versenytényezője a felhasználói élmény – és a gördülékeny animációk ebben kulcsszerepet játszanak. Ha valaha is megküzdöttél a React Native beépített Animated API akadozásával, tudod, miről beszélek. Az igazi, 60fps-es natív teljesítményhez a React Native Reanimated könyvtárra van szükség. Ez az útmutató végigvezet a Reanimated 4 legfontosabb koncepcióin, kódpéldákon és teljesítménytippeken – hogy professzionális, akadásmentes animációkat készíthess React Native-ban.

Miért nem elég az alap Animated API?

A React Native beépített Animated API az animációk logikáját a JavaScript (JS) szálon futtatja. Ez azt jelenti, hogy ha az alkalmazásod éppen hálózati kérést hajt végre, állapotot frissít, vagy nagy listát renderel, az animáció akadozni kezd. Elég fájdalmas tud lenni, főleg ha sokat dolgoztál az UI tökéletesítésén. A Reanimated ezzel szemben az animációs logikát közvetlenül a UI szálon futtatja, így a JS szál leterheltségétől függetlenül folyamatos, 60fps (sőt, 120fps) animációkat biztosít.

2026-ban a Reanimated 4 vált az iparági standarddá – kizárólag a React Native Új Architektúrájára (Fabric + JSI) épít, és egy teljesen új CSS Animations API-t is bevezetett. A Reanimated 3 még elérhető a régi architektúrát használó projektekhez, de aktív fejlesztése leállt.

A Reanimated főbb előnyei az alap Animated API-val szemben:

• UI szálon futó animációs logika – nincs akadás, ha a JS szál lefoglalt
• Gesture Handler integráció – gesztusvezérelt animációk nulla késéssel
• CSS Animations API (Reanimated 4) – deklaratív, ismerős szintaxis
• Layout Animations – automatikus belépési/kilépési átmenetek
• 120fps támogatás ProMotion kijelzőkön (iPhone 13 Pro+, Android)

Telepítés és konfiguráció

Expo projekthez futtasd az alábbi parancsot:

npx expo install react-native-reanimated react-native-gesture-handler react-native-worklets

Bare React Native projektben:

npm install react-native-reanimated react-native-gesture-handler react-native-worklets
npx pod-install   # iOS natív modulok telepítése

Ezután add hozzá a Babel plugint a babel.config.js fájlban:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    'react-native-worklets/plugin',  // Reanimated 4 worklets plugin
  ],
};

Fontos: Reanimated 4-ben a worklets implementáció a különálló react-native-worklets csomagba lett kiemelve. A plugin neve react-native-worklets/plugin – ez különbözik a Reanimated 3-as react-native-reanimated/plugin-től. A babel-preset-expo automatikusan kezeli ezt, ha Expo SDK 55+ verziót használsz.

Csomagold be az alkalmazásodat a GestureHandlerRootView komponenssel – ez szükséges a Gesture Handler működéséhez. Sokan elfelejtik ezt a lépést, majd csodálkoznak, hogy a gesztusok nem reagálnak:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Az alkalmazás többi része */}
    </GestureHandlerRootView>
  );
}

Alapfogalmak: Shared Values, Worklets és Animated Style

useSharedValue – Az animáció állapota

A useSharedValue hook olyan értékeket tárol, amelyek egyszerre elérhetők a JS szálon és a UI szálon. Amikor az értéke megváltozik, az animáció azonnal – React re-render nélkül – frissül. Ez az egyik legfontosabb különbség a hagyományos React state-tel szemben (és az oka, hogy miért kell külön gondolkodnod, mikor melyiket érdemes használni).

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

const opacity = useSharedValue(0);

// Animáció indítása
opacity.value = withTiming(1, { duration: 500 });

useAnimatedStyle – Stílusok kötése az animációhoz

A useAnimatedStyle hook egy stílusobjektumot ad vissza, amely automatikusan frissül, amikor a benne hivatkozott shared value megváltozik. Az Animated.View (vagy Animated.Text, Animated.Image) kapja meg ezt a stílust:

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

function FadeInBox() {
  const opacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  useEffect(() => {
    opacity.value = withTiming(1, { duration: 800 });
  }, []);

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

Worklets – Kód a UI szálon

A worklet egy speciális JavaScript függvény, amely közvetlenül a UI szálon fut. A Reanimated automatikusan workletként kezeli a useAnimatedStyle-ban, gesture callbackekben és más animációs kontextusokban lévő kódot. Saját worklet is definiálható a 'worklet' direktívával:

function clampValue(value, min, max) {
  'worklet';
  return Math.min(Math.max(value, min), max);
}

// Felhasználás useAnimatedStyle-ban
const animatedStyle = useAnimatedStyle(() => ({
  translateX: clampValue(offset.value, -200, 200),
}));

Animációs típusok: withTiming, withSpring, withDecay

withTiming – Lineáris és easing animáció

A withTiming egy meghatározott időtartam alatt vezet be egy értéket, opcionálisan easing görbével. Pontos, kiszámítható animációkhoz ideális (fade, slide, méretváltozás):

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

// Fade-in 400ms alatt, ease-out görbével
opacity.value = withTiming(1, {
  duration: 400,
  easing: Easing.out(Easing.quad),
});

// Azonnali, ugrásmentes beállítás
translateY.value = withTiming(0, { duration: 0 });

withSpring – Fizikai, rugószerű animáció

A withSpring természetesebb, fizikai érzetet ad – az érték "túllendül" a célon és visszatér, mintha rugón lógna. Gombnyomás-visszajelzéshez, húzható elemekhez és interaktív UI elemekhez ajánlott. Őszintén szólva, ez az a függvény, amelyet a legtöbbször fogsz nyúlni:

import { withSpring } from 'react-native-reanimated';

scale.value = withSpring(1.1, {
  damping: 12,      // csillapítás – kisebb érték = több oszcilláció
  stiffness: 150,   // rugómerevség – nagyobb érték = gyorsabb animáció
  mass: 0.8,
});

withDecay – Tehetetlenségi, lassulós animáció

A withDecay a gesztus sebességéből indul ki és fokozatosan lassul le – tökéletes swipe-alapú, lendítéses felületekhez (carousel, húzható panelek):

import { withDecay } from 'react-native-reanimated';

// A gesztus sebességét adja tovább, és gumiszalag-effekttel megáll
offset.value = withDecay({
  velocity: event.velocityX,
  rubberBandEffect: true,
  clamp: [-300, 300],
});

Gesture Handler integráció

A Reanimated igazi ereje a react-native-gesture-handler-rel való integrációban mutatkozik meg. A gesztusfeldolgozás (Pan, Tap, Pinch) közvetlenül a UI szálon fut, így a felhasználói érintés azonnal, bármilyen késés nélkül tükröződik az animációban. Ez az a különbség, amit a felhasználók megéreznek – még ha nem is tudják pontosan megfogalmazni, mi a jobb benne.

Pan Gesture: Húzható, visszaugró elem

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { StyleSheet, View } from 'react-native';

export default function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    })
    .onEnd(() => {
      // Elengedés után visszaugrik a középre
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

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

  return (
    <View style={styles.container}>
      <GestureDetector gesture={panGesture}>
        <Animated.View style={[styles.box, animatedStyle]} />
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#6366f1',
    borderRadius: 12,
  },
});

Tap Gesture: Gombnyomás-animáció

Az alábbi példában egy gomb lenyomásakor 0.95-re skálázódik, majd visszaáll – valódi natív visszajelzést adva a felhasználónak, anélkül, hogy React state-et kellene frissíteni:

import { runOnJS } from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
} from 'react-native-reanimated';

export function AnimatedButton({ onPress, children, style }) {
  const scale = useSharedValue(1);

  const tapGesture = Gesture.Tap()
    .onBegin(() => {
      scale.value = withTiming(0.95, { duration: 80 });
    })
    .onFinalize(() => {
      scale.value = withSpring(1);
      if (onPress) runOnJS(onPress)();
    });

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

  return (
    <GestureDetector gesture={tapGesture}>
      <Animated.View style={[style, animatedStyle]}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

Megjegyzés a runOnJS-ről: A UI szálon futó workletből nem hívhatsz közvetlenül JS szálú függvényt (pl. navigáció, React state frissítés). A runOnJS wrapper ezt teszi lehetővé. Reanimated 4-ben ez scheduleOnRN-re változik a react-native-worklets csomagban, de a runOnJS visszafelé kompatibilis maradt.

CSS Animations és Transitions – A Reanimated 4 legnagyobb újítása

A Reanimated 4 bevezette a webes CSS animációkhoz hasonló, deklaratív API-t. Ha már dolgoztál CSS transition-nel vagy @keyframes-szel, azonnal felismered a szintaxist. A célja egyszerű: az animációk 80%-ára – state-alapú megjelenés, eltűnés, átmenetek – a CSS API elegendő, és sokkal olvashatóbb, mint a worklet-alapú megközelítés. Én személy szerint nagyon megszerettem ezt az API-t; végre nem kell minden fade-in-hez shared value-t megnyitni.

CSS Transition – State-alapú átmenet

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

function TogglePanel({ isVisible }) {
  return (
    <Animated.View
      style={[
        styles.panel,
        css.transition({
          opacity: isVisible ? 1 : 0,
          transform: [{ translateY: isVisible ? 0 : 20 }],
          duration: 300,
          easing: 'ease-out',
        }),
      ]}
    />
  );
}

CSS Keyframe animáció – Ismétlődő animációk

import { css } from 'react-native-reanimated';

const pulseAnimation = css.keyframes({
  '0%': { transform: [{ scale: 1 }], opacity: 1 },
  '50%': { transform: [{ scale: 1.08 }], opacity: 0.85 },
  '100%': { transform: [{ scale: 1 }], opacity: 1 },
});

function LoadingIndicator() {
  return (
    <Animated.View
      style={[
        styles.dot,
        css.animation(pulseAnimation, {
          duration: 1200,
          iterationCount: 'infinite',
          easing: 'ease-in-out',
        }),
      ]}
    />
  );
}

Layout Animations: Automatikus belépési és kilépési átmenetek

A Layout Animations talán a leglátványosabb Reanimated funkció: egyetlen prop hozzáadásával kaphat egy elem belépési és kilépési animációt, anélkül, hogy manuálisan kellene kezelni a stílusátmeneteket.

import Animated, {
  FadeIn,
  FadeOut,
  SlideInRight,
  ZoomOut,
  Layout,
} from 'react-native-reanimated';
import { Text } from 'react-native';

function AnimatedListItem({ item }) {
  return (
    <Animated.View
      entering={SlideInRight.duration(300).springify()}
      exiting={FadeOut.duration(200)}
      layout={Layout.springify()}
    >
      <Text>{item.title}</Text>
    </Animated.View>
  );
}

A layout prop gondoskodik arról, hogy ha egy elem hozzáadódik vagy eltávolítódik a listából, a szomszédos elemek gördülékenyen rendeződjenek át – nem ugrik hirtelen a layout. Ez önmagában megérne egy Reanimated-migrációt.

Reanimated 3 vs Reanimated 4: A főbb különbségek

Ha meglévő projekted Reanimated 3-ra épül, érdemes tudni a főbb változásokat az átállás előtt:

Jellemző	Reanimated 3	Reanimated 4
Architektúra-támogatás	Régi + Új Architektúra	Csak Új Architektúra (Fabric)
Worklets csomag	Beépített	Különálló react-native-worklets
Babel plugin	react-native-reanimated/plugin	react-native-worklets/plugin
CSS Animations API	Nem elérhető	Igen – új fő funkció
runOnJS	Elérhető	Deprecated → scheduleOnRN
Visszafelé kompatibilitás	–	v2/v3 API nagyrészt változatlan
React Native kompatibilitás	0.71+	Legutóbbi 3 RN verzió

Ha a projekted még a régi architektúrán fut, maradj a Reanimated 3 legutóbbi stabil verzióján. Az architektúra-migrációt érdemes az Expo SDK 55 és az Új Architektúra útmutatónkkal párhuzamosan elvégezni, mielőtt Reanimated 4-re váltasz.

Teljesítménytippek 2026-ban

A Reanimated önmagában is nagy teljesítménynövekedést hoz, de néhány rossz szokás visszahozhatja az akadásokat. Kövesd ezeket az elveket:

• Kerüld a React state frissítést animáció közben: A setState hívás React re-rendert vált ki a JS szálon. Ha az animáció hajtja az UI frissítést, használj shared value-t – ne state-et.
• Csak szükség esetén hívj runOnJS-t: Minden runOnJS / scheduleOnRN hívás thread-határon kel át (UI → JS szál). Minimalizáld a hívások számát animáció közben.
• Tartsd egyszerűen a worklet logikát: A workletben futó kód közvetlen hatással van a frame rate-re. Kerüld a nehéz számításokat – végezd el a JS szálon, és a végeredményt add át shared value-n keresztül.
• Használj useAnimatedStyle-t minden animált stílushoz – soha ne kösd inline stílusba közvetlenül a shared value-t (style={{ opacity: opacity.value }} nem fog animálni).
• Profil először: A React Native DevTools Performance Panel (0.83+) segít megtalálni, melyik animáció ejt frame-eket. Ne optimalizálj vakra.

A Zustand és TanStack Query React Native-ban kombinációban különösen fontos figyelni arra, hogy a TanStack Query által kiváltott state frissítések ne zavarják meg a párhuzamosan futó animációkat – érdemes az animáció shared value-ját a React state-től teljesen függetlenül kezelni.

Gyakran Ismételt Kérdések

Mi a különbség a Reanimated 3 és a Reanimated 4 között?

A Reanimated 4 kizárólag a React Native Új Architektúrát (Fabric) támogatja, bevezeti az új CSS Animations és Transitions API-t, és a worklets implementációt a különálló react-native-worklets csomagba helyezi. A v2/v3 API (useSharedValue, useAnimatedStyle, withSpring stb.) nagyrészt változatlanul működik.

Kötelező a react-native-gesture-handler a Reanimated használatához?

Nem kötelező, de erősen ajánlott. Gesture Handler nélkül is használhatsz animációkat, de a gesztusvezérelt interakciókat (húzás, koppintás, swipe) csak Gesture Handlerrel tudod valóban késés- és akadásmentesen megvalósítani.

Hogyan hívhatok JS szálú függvényt egy workletből?

Reanimated 3-ban a runOnJS(myFunction)() szintaxist használd. Reanimated 4-ben ez scheduleOnRN-re változott a react-native-worklets csomagban, bár a runOnJS visszafelé kompatibilitás miatt egyelőre megtartva elérhető.

Működik a Reanimated 4 Expo-val?

Igen, az Expo SDK 55+ (Expo Go és EAS Build) teljes mértékben támogatja a Reanimated 4-et. A babel-preset-expo automatikusan konfigurálja a szükséges Babel plugint, és az Expo SDK 55 alapból engedélyezi az Új Architektúrát.

Mikor érdemes withSpring helyett withTiming-ot használni?

A withTiming pontosan meghatározott időtartamú, kiszámítható animációkhoz ideális (fade-in, modal megnyitás, oldalpanel). A withSpring természetesebb, fizikai "rugó" érzetet ad – gombnyomás-visszajelzéshez, húzható elemekhez és a felhasználó számára reagáló UI-hoz ajánlott.