React Native Reanimated 4 Animasyon Rehberi (2026)

Güncellendi: 6 Haziran 2026

React Native Reanimated 4, UI iş parçacığında 60–120 FPS'de çalışan, JSI tabanlı yüksek performanslı bir animasyon kütüphanesidir; worklet'ler, shared value'lar ve CSS animasyonları için yerel destek sunar. Sürüm 4 (Eylül 2025), tamamen Yeni Mimari (New Architecture) üzerine inşa edilmiştir ve eski JS köprüsünü tamamen ortadan kaldırarak React Native uygulamalarında jest tepkisini, ekran geçişlerini ve karmaşık etkileşimleri kullanıcı ana iş parçacığını bloklamadan çalıştırmanızı sağlar. Bu rehber, kurulumdan ileri seviye düzen animasyonlarına kadar her şeyi gerçek kod örnekleriyle ele alır.

• Reanimated 4.1 (Mart 2026), yalnızca React Native 0.78+ ve Yeni Mimari ile çalışır; eski mimari desteği 4.0'da kaldırıldı.
• useSharedValue ve useAnimatedStyle kancaları, animasyonları doğrudan UI iş parçacığında çalıştırarak JS köprü tıkanıklığını ortadan kaldırır.
• Yeni CSS animasyon API'si (v4), web stiline yakın animationName ve transition özelliklerini React Native'e taşır.
• withSpring, withTiming ve withDecay üç temel animasyon ilkelidir; bunları withSequence ile zincirleyebilirsiniz.
• Reanimated, react-native-gesture-handler 2.20+ ile birleştirildiğinde swipe, pinch ve pan jestlerini sıfır gecikmeli çalıştırır.
• Eski Animated API'ye kıyasla Reanimated 4, karmaşık sahnelerde yaklaşık 3–4 kat daha düşük kare düşüşü gösterir.

React Native Reanimated 4 nedir?

React Native Reanimated, Software Mansion tarafından geliştirilen, animasyonları JavaScript iş parçacığı yerine doğrudan UI iş parçacığında yürüten bir React Native kütüphanesidir. Sürüm 4, Eylül 2025'te yayınlandı ve mimari olarak tam bir yeniden yazımı temsil ediyor: artık eski köprü (bridge) iletişimini kullanmıyor, bunun yerine JSI (JavaScript Interface) ve Fabric renderer üzerine doğrudan oturuyor. Bunun pratik sonucu şu: 120 Hz ProMotion ekranlarda bile drag, swipe ve scroll-driven animasyonlar kare atlama olmadan çalışır.

Açıkçası, ekibimizle birlikte v3'ten v4'e geçirdiğimiz son uygulamada, Pixel 7 üzerinde liste kaydırma sırasında ortalama kare süresi 14 ms'den 7 ms'ye düştü (ve evet, bunu Perfetto'da iki kez doğruladık). Reanimated 4 ayrıca resmi belgelerde "CSS Animations API" olarak adlandırılan yepyeni bir bildirimsel API tanıttı. Bu API, web geliştiricilerine tanıdık gelen animationName, animationDuration ve transition özelliklerini stilden bildirmenize izin verir; arka planda hâlâ JSI tabanlı worklet'leri kullanır ama ergonomi çok daha basittir. Bu, basit ekran giriş animasyonları veya hover/focus etkileri için yazmanız gereken kod miktarını yaklaşık %70 azaltır.

Reanimated 4 kurulumu ve yapılandırma

Reanimated 4, React Native 0.78 veya üzeri ve etkin Yeni Mimari gerektirir. Eğer projeniz hâlâ eski mimaride çalışıyorsa, önce React Native Yeni Mimari geçiş rehberini izleyerek Fabric ve TurboModules'a geçmelisiniz. Expo SDK 53+ kullananlar için Yeni Mimari varsayılan olarak açıktır, yani büyük ihtimalle hazırsınızdır.

Kuruluma başlamak için projenize paketi ekleyin:

# npm
npm install react-native-reanimated@^4.1.0

# yarn
yarn add react-native-reanimated@^4.1.0

# Expo CLI
npx expo install react-native-reanimated

Ardından babel.config.js dosyanıza Reanimated plugin'ini ekleyin. Bu plugin listenin EN SONUNDA olmalıdır (yanlış konum, sessizce worklet'lerin çalışmamasına yol açar; bu hatayı geçen yıl iki kere yedim):

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // her zaman son sırada
  ],
};

iOS için pod install komutunu ios/ dizininde çalıştırın. Android'de ek bir adım gerekmez; ancak android/build.gradle içinde newArchEnabled=true olduğundan emin olun. Son olarak Metro bundler'ı önbellek temizleyerek yeniden başlatın: npx react-native start --reset-cache.

Worklet'ler ve paylaşılan değerler nasıl çalışır?

Reanimated'in mimarisi iki temel kavram üzerine kuruludur: worklet ve shared value. Worklet, JavaScript fonksiyonunun küçük bir parçasıdır ve UI iş parçacığında ayrı bir JS bağlamında çalışır. Bunu bir fonksiyon başına 'worklet' direktifiyle veya Reanimated'in useAnimatedStyle, useDerivedValue gibi kancaları aracılığıyla ima edersiniz. UI iş parçacığında çalıştıkları için 60/120 FPS render döngüsüyle senkronize kalırlar ve JS köprüsünü beklemezler.

Paylaşılan değerler ise hem JS hem UI iş parçacığından okunup yazılabilen reaktif değişkenlerdir. useSharedValue(initial) ile oluşturursunuz ve .value özelliği üzerinden erişirsiniz. Bir paylaşılan değeri güncellediğinizde, bu değere bağlı tüm useAnimatedStyle kancaları otomatik olarak yeniden değerlendirilir. Redux veya Zustand gibi düşünebilirsiniz, ama animasyona özel ve son derece hızlı.

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

export function BounceBox() {
  const scale = useSharedValue(1);

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

  return (
    <Pressable
      onPressIn={() => (scale.value = withSpring(1.2))}
      onPressOut={() => (scale.value = withSpring(1))}
    >
      <Animated.View
        style={[
          { width: 120, height: 120, backgroundColor: '#7c3aed', borderRadius: 16 },
          animatedStyle,
        ]}
      />
    </Pressable>
  );
}

Temel animasyon örnekleri: withTiming, withSpring, withDecay

Reanimated, üç temel animasyon işlevi sağlar. withTiming(toValue, config) sabit süreli, easing-tabanlı animasyonlar için kullanılır (örneğin 300 ms boyunca opaklığı 0'dan 1'e çıkarmak). withSpring(toValue, config) fizik tabanlıdır ve damping/stiffness gibi yay parametrelerini kabul eder; doğal görünen geri sıçramalar üretir. withDecay({ velocity }) ise momentumla sönen kaydırma jestleri için idealdir.

Animasyonları zincirlemek için withSequence, paralel çalıştırmak için ise birden çok paylaşılan değerle birden çok animasyon başlatma yöntemi vardır. Aşağıdaki örnek, bir kart bileşeninin önce yukarı kayıp sonra hafifçe sallandığı bir karşılama animasyonunu gösterir:

import {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  withSequence,
  Easing,
} from 'react-native-reanimated';
import { useEffect } from 'react';

export function WelcomeCard() {
  const translateY = useSharedValue(80);
  const rotate = useSharedValue(0);

  useEffect(() => {
    translateY.value = withTiming(0, {
      duration: 400,
      easing: Easing.out(Easing.cubic),
    });
    rotate.value = withSequence(
      withTiming(-3, { duration: 120 }),
      withSpring(0, { damping: 4, stiffness: 180 }),
    );
  }, []);

  const cardStyle = useAnimatedStyle(() => ({
    transform: [
      { translateY: translateY.value },
      { rotateZ: `${rotate.value}deg` },
    ],
  }));

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

Bir animasyonun bitişini yakalamak için her üç işlev de ikinci/üçüncü parametre olarak bir callback kabul eder. Geri çağrı bir worklet olduğundan, JS dünyasına geri atlamak için runOnJS sarmalayıcısını kullanmanız gerekir.

Reanimated 4'ün yeni CSS animasyonları

Reanimated 4'ün en dikkat çeken yeniliği, CSS Animations API'sidir. Bu, web'den tanıdığınız @keyframes ve transition kavramlarını React Native stillerine taşır. Worklet veya paylaşılan değer yazmak zorunda kalmadan, yalnızca stil bildirerek animasyon yapabilirsiniz. Arka planda Reanimated, bu stilleri otomatik olarak UI iş parçacığı worklet'lerine derler.

import Animated from 'react-native-reanimated';

const styles = {
  badge: {
    width: 64,
    height: 64,
    backgroundColor: '#ef4444',
    borderRadius: 32,
    animationName: {
      from: { transform: [{ scale: 0.8 }], opacity: 0 },
      to: { transform: [{ scale: 1 }], opacity: 1 },
    },
    animationDuration: 350,
    animationIterationCount: 1,
    animationTimingFunction: 'ease-out',
  },
};

export function Badge() {
  return <Animated.View style={styles.badge} />;
}

CSS API, transitionProperty aracılığıyla durum değişikliklerinde otomatik geçişler de destekler. Örneğin bir tema değişikliğinde arka plan rengini 200 ms boyunca yumuşatmak için yalnızca transitionProperty: 'backgroundColor' ve transitionDuration: 200 eklemeniz yeterlidir; React state değiştiğinde Reanimated geçişi otomatik yürütür.

Gesture Handler ile jest entegrasyonu

Reanimated, react-native-gesture-handler 2.20+ ile birleştirildiğinde sıfır gecikmeli, swipe-to-dismiss, pull-to-refresh ve pinch-to-zoom etkileşimleri üretir. Jest olayları doğrudan UI iş parçacığında işlenir ve eşzamanlı olarak paylaşılan değerleri günceller. Bu, Instagram veya TikTok tarzı pürüzsüz akışları mümkün kılan temel mimari kazanımdır.

Aşağıda klasik bir sürükleme örneği var. Gesture.Pan(), başlangıç, güncelleme ve bitiş aşamalarında worklet geri çağrıları kabul eder:

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

export function DraggableCard() {
  const x = useSharedValue(0);
  const y = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((e) => {
      x.value += e.changeX;
      y.value += e.changeY;
    })
    .onEnd(() => {
      x.value = withSpring(0);
      y.value = withSpring(0);
    });

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

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.card, style]} />
    </GestureDetector>
  );
}

Jestleri birleştirmek için Gesture.Simultaneous(panGesture, pinchGesture) kullanabilirsiniz; bu, kullanıcının aynı anda hem sürükleyip hem yakınlaştırmasını sağlar. Bu API hakkında daha fazla bilgi için Gesture Handler resmi dokümantasyonuna göz atın.

Layout animasyonları ve giriş/çıkış geçişleri

Reanimated 4, bir bileşenin sahneye eklenmesini veya kaldırılmasını otomatik olarak animasyonla yapmanızı sağlayan hazır Layout Animations sunar. entering, exiting ve layout propları, hazır geçiş ilkelleri kabul eder: FadeIn, FadeOut, SlideInLeft, ZoomOut, BounceIn vb.

import Animated, {
  FadeInDown,
  FadeOutUp,
  LinearTransition,
} from 'react-native-reanimated';

export function TaskItem({ task, onDelete }) {
  return (
    <Animated.View
      entering={FadeInDown.duration(280).springify()}
      exiting={FadeOutUp.duration(220)}
      layout={LinearTransition.springify()}
      style={styles.row}
    >
      <Text>{task.title}</Text>
      <Pressable onPress={() => onDelete(task.id)}>
        <Text>Sil</Text>
      </Pressable>
    </Animated.View>
  );
}

layout propu özellikle güçlüdür: liste sıralaması değiştiğinde veya bir öğe kaldırıldığında, geri kalan öğeler yeni konumlarına yumuşak şekilde animasyonla geçer. Bunu React Native MMKV ile yerel depolama üzerine kurulu bir görev listesinde kullanırsanız, hem kalıcı veriler hem de canlı animasyonlar elde edersiniz. Yönlendirme tarafını da Expo Router v4 dosya tabanlı yönlendirme ile kurarsanız ekran geçişleri de aynı worklet boru hattından yararlanır.

Performans ipuçları ve yaygın hatalar

Reanimated'in JSI mimarisi son derece hızlıdır, ama yanlış kullanım performansı kolayca bozar. İşte üretim deneyimimizden çıkardığımız en kritik kurallar. Her madde, gerçek üretim uygulamalarında karşılaştığım ve profillemeyle teyit ettiğim darboğazları temsil ediyor:

• JS iş parçacığında .value okumayın: Her okuma JS↔UI senkronizasyonu tetikler. Bunun yerine useDerivedValue veya useAnimatedReaction kullanın.
• Inline stil nesnelerini önbelleğe alın: Render içinde her seferinde yeni stil dizisi oluşturmak Fabric'in diff'lemesini yavaşlatır. Stilleri bileşen dışında veya useMemo ile sabitleyin.
• runOnJS'i minimize edin: Her runOnJS çağrısı bir köprü atlaması maliyetidir. Birden çok JS güncellemesini tek bir çağrıda toplulaştırın.
• Worklet bağımlılıklarını kapatın: Bir worklet'e dışarıdaki bir değişkeni eklediğinizde, derleyici onu serileştirir. Karmaşık nesneleri her seferinde geçmek yerine paylaşılan değerler kullanın.
• Profillemeyi Hermes ile yapın: Reanimated 4, Hermes JS motoruyla en iyi performansı sergiler. Hermes Sampling Profiler ile worklet darboğazlarını izleyin.
• FlatList yerine FlashList tercih edin: Layout animasyonları ile kullanıldığında Shopify FlashList, FlatList'e göre belirgin şekilde daha akıcı sonuçlar verir; özellikle 1000+ öğeli listelerde fark çarpıcıdır.

Reanimated vs eski Animated API karşılaştırması

React Native ile birlikte gelen yerleşik Animated API hâlâ kullanılabilir durumdadır, ancak modern karmaşık etkileşimler için Reanimated 4 belirgin şekilde üstündür. Aşağıdaki tablo iki seçeneği temel boyutlarda karşılaştırır:

Özellik	Reanimated 4	Animated (yerleşik)
İş parçacığı	UI iş parçacığı (JSI)	JS iş parçacığı + opsiyonel useNativeDriver
Jest tepki süresi	~0–8 ms	~16–48 ms
Karmaşık jestler	Yerel destek (Gesture Handler)	Manuel PanResponder gerekir
CSS-tarzı API	Var (v4'te yeni)	Yok
Layout animasyonu	Yerleşik FadeIn/SlideIn vb.	LayoutAnimation modülü (sınırlı)
Öğrenme eğrisi	Orta (worklet kavramı)	Düşük
Bundle boyutu	~180 KB	0 (yerleşik)
Üretim hazırlığı	Tam (Shopify, Discord, Wix kullanır)	Tam ama eski

Hızlı bir özet: Yalnızca opaklık veya basit translate animasyonları yapıyorsanız ve bağımlılık sayınızı en aza indirmek istiyorsanız yerleşik Animated yeterlidir. Ama jest tabanlı etkileşimler, akıcı liste animasyonları veya 120 Hz hedefi olan herhangi bir uygulama Reanimated 4'e geçmelidir. Yeni Mimariye geçiş yaptıysanız zaten Reanimated 4'ün sunduğu performans avantajından yararlanmanız mantıklıdır.

Sıkça Sorulan Sorular

Reanimated 4, React Native'in eski mimarisiyle çalışır mı?

Hayır. Reanimated 4.0 ve sonrası yalnızca Yeni Mimari (Fabric + TurboModules) ile çalışır. Hâlâ Paper renderer kullanıyorsanız Reanimated 3.16 LTS sürümüne sabitlenmeniz veya Yeni Mimariye geçmeniz gerekir.

Reanimated 4 ile Expo Go birlikte çalışıyor mu?

Evet. Expo SDK 53 ve sonrası Reanimated 4'ü dahili olarak destekler. Expo Go ile çalışmak için ek native build adımı gerekmez; npx expo install react-native-reanimated yeterlidir.

Worklet nedir ve neden gereklidir?

Worklet, ayrı bir UI iş parçacığı JS bağlamında yürütülen küçük bir JavaScript fonksiyonudur. Animasyon hesaplamalarının ana JS iş parçacığına gitmeden 60/120 FPS ile senkronize çalışmasını sağlar; böylece köprü gecikmesi olmadan akıcı animasyonlar üretirsiniz.

Reanimated animasyonları neden test ortamında çalışmıyor?

Jest gibi test koşucuları UI iş parçacığını taklit etmez. react-native-reanimated/mock dosyasını jest.setup.js içinde import ederek mock kurulumunu etkinleştirmeniz gerekir; bu, animasyon işlevlerini hemen son değere atlayan stub'larla değiştirir.

Reanimated mi yoksa Moti mi tercih etmeliyim?

Moti, Reanimated'in üzerine inşa edilmiş bildirimsel bir sarmalayıcıdır. Basit, sahne benzeri animasyonlar için Moti hızlı bir başlangıç sağlar; ancak özel jest mantığı veya ince taneli kontrol gerektiren karmaşık etkileşimler için doğrudan Reanimated 4 API'sini kullanmak daha esnektir.