# 2026'da React Native 0.85: Yeni Animasyon Backend'i, Katı TypeScript API ve Mülakat Soruları

> React Native 0.85, Shared Animation Backend, post-bridge mimari ve Metro TLS desteği sunuyor. Kod örnekleri ve mülakat sorularıyla derinlemesine inceleme.

- Published: 2026-05-16
- Updated: 2026-05-16
- Author: Anthony Fillion-Maillet
- Tags: react-native, animasyon, typescript, mobil mimari, mülakat soruları
- Reading time: 10 min

---

React Native 0.85, Nisan 2026'da yayınlandı ve framework'ün başlangıcından bu yana en önemli animasyon sistemi revizyonunu sunuyor. 58 katkıda bulunandan 604 commit ile bu sürüm, Shared Animation Backend'i tanıtıyor, post-bridge geçişini tamamlıyor ve kurumsal ortamlar için Metro TLS desteği ekliyor.

> **Temel Çıkarım**
>
> React Native 0.85, Animated ve Reanimated animasyon motorlarını tek bir paylaşımlı backend'de birleştiriyor. Width, height ve flex gibi layout özellikleri artık useNativeDriver: true ile animasyon yapılabiliyor — beş yılı aşkın süredir geliştiricileri hayal kırıklığına uğratan bir sınırlama.

## Shared Animation Backend: Animated ve Reanimated'ın Birleşimi

React Native 0.85'in ana özelliği, Software Mansion ile iş birliği içinde geliştirilen Shared Animation Backend'dir. Daha önce, yerleşik Animated kütüphanesi ve topluluk tarafından geliştirilen Reanimated kütüphanesi ayrı reconciliation döngüleri sürdürüyordu. Her biri animasyon güncellemelerini uygulamak için kendi iç mantığını çalıştırıyor ve bir sistemdeki performans iyileştirmelerinin diğerine fayda sağlayamadığı izole bir ekosistem oluşturuyordu.

Shared Animation Backend, temel animasyon güncelleme mantığını doğrudan React Native renderer'a taşıyor. Animasyon tabanlı commit'lerin React ve stillendirme kütüphaneleriyle birlikte Shadow Tree için mücadele etmesi yerine, özel bir mekanizma bunları ayrı ayrı yönetiyor.

```typescript
// AnimatedLayoutExample.tsx
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,
  },
});
```

0.85 öncesinde, width veya height gibi layout özelliklerinde `useNativeDriver: true` ayarlamak hata fırlatıyordu. Geliştiriciler, akıcı 60fps animasyonlar (native driver, transform ve opacity ile sınırlı) ile layout değişiklikleri için takılmalı JS-thread animasyonları arasında seçim yapmak zorundaydı. Shared Animation Backend bu beş yıllık sınırlamayı çözüyor.

## Animasyon Backend'i Dahili Olarak Nasıl Çalışır

Daha önce `-DRN_USE_ANIMATION_BACKEND` derleyici bayrağının arkasında saklanan C++ Animation Backend, 0.85'te varsayılan olarak etkin geliyor. Sistem iki özel güncelleme yolu kullanıyor:

- **synchronouslyUpdateProps** — layout dışı değişiklikler (opacity, transform) için tam Fabric commit döngüsünü atlayan hızlı yol
- **Tam Fabric commit** — yalnızca layout yeniden hesaplaması gerektiğinde tetikleniyor (width, height, flex, padding)

Bu çift yollu yaklaşım, basit opacity geçişlerinin eskisi kadar hızlı kalmasını sağlarken, layout animasyonlarının native thread performansını regresyon olmadan kazanmasını mümkün kılıyor.

> **Reanimated Uyumluluğu**
>
> Reanimated 4.x (şu anda beta aşamasında) Shared Animation Backend ile tamamen entegre oluyor. Mevcut Reanimated 3.x worklet'leri çalışmaya devam ediyor, ancak paylaşımlı backend'e geçiş, daha önce imkansız olan performans kazançlarını mümkün kılıyor — özellikle 120Hz'de çalışan layout animasyonları için.

## Post-Bridge Mimari: Bridge Artık Yok

React Native 0.85, sıfır bridge geri dönüşü ve eski interop katmanı olmayan ilk kararlı sürüm. JSI (JavaScript Interface) tabanlı yeni mimari, JavaScript ile native kod arasında 2ms altı interop gecikmesiyle doğrudan, senkron iletişim sağlıyor.

Mülakat hazırlığı için pratik etkileri:

```typescript
// TurboModuleExample.tsx
// 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();
```

TurboModules, 0.85'te varsayılan olarak tembel yükleniyor ve soğuk başlatma belleğini yaklaşık %40 azaltıyor. Bu, her native modülün hevesle kaydedilmesinin başlangıç cezasını ortadan kaldırıyor — React Native performans optimizasyonu hakkında yaygın bir mülakat sorusu.

## Metro TLS: Geliştirme Sunucuları İçin HTTPS

Kurumsal proxy'lerin arkasında çalışan veya yalnızca güvenli bağlantı gerektiren API'leri test eden ekipler, daha önce Metro'nun yalnızca HTTP destekleyen geliştirme sunucusu için geçici çözümlere ihtiyaç duyuyordu. Metro artık TLS'yi yerel olarak destekliyor:

```javascript
// metro.config.js
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;
```

Yerel geliştirme için [mkcert](https://github.com/FiloSottile/mkcert) manuel CA kurulumu olmadan güvenilir sertifikalar oluşturuyor. TLS etkinleştirildiğinde Fast Refresh WSS üzerinden çalışarak güvenli ortamlarda hot-reload'u işlevsel tutuyor.

## Kırıcı Değişiklikler ve Geçiş Rehberi

Yükseltme sırasında dikkat gerektiren birkaç kırıcı değişiklik bulunuyor:

**Jest Preset çıkarılması** — yerleşik preset `@react-native/jest-preset`'e taşındı:

```javascript
// jest.config.js — before
module.exports = {
  preset: 'react-native',
};

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

**StyleSheet.absoluteFillObject kaldırıldı** — `StyleSheet.absoluteFill` ile değiştirilmeli:

```typescript
// Before (0.84 and earlier)
const overlay = StyleSheet.absoluteFillObject;

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

**Node.js sürüm gereksinimleri** — minimum Node.js 20.19.4. Sürüm 21 ve 23 (her ikisi EOL) desteklenmiyor.

**Metin taşma davranışı** — `borderRadius` sınırlarının dışındaki metin artık varsayılan olarak gizleniyor. Yuvarlak köşelerin ötesine uzanan metin için `overflow: visible`'a dayanan bileşenler, açık `overflow: 'visible'` stiline ihtiyaç duyuyor.

> **Android Kırıcı Değişiklikler**
>
> ReactTextUpdate artık dahili, ReactZIndexedViewGroup ve UIManagerHelper kullanımdan kaldırıldı ve CatalystInstanceImpl tamamen kaldırıldı. Bu API'lere doğrudan erişen kütüphaneler, 0.85'e geçmeden önce güncelleme gerektiriyor.

## DevTools: Birden Fazla Eşzamanlı Hata Ayıklayıcı Bağlantısı

React Native 0.85, birden fazla eşzamanlı Chrome DevTools Protocol (CDP) bağlantısını destekliyor. VS Code, React Native DevTools ve yapay zeka destekli kodlama araçları, birbirlerinin oturumlarını sonlandırmadan aynı anda bağlanabiliyor.

Bu, birden fazla araç birleştiren hata ayıklama iş akışları kullanan ekipler için özellikle önemli. Android'deki Network Panel, önceki sürümlerdeki bir regresyon sonrasında istek gövdesi önizlemelerini geri yüklüyor.

## Shadow Tree Commit Dallanması

Yeni bir Fabric commit dallanma mekanizması, React Native'in Shadow Tree'ye güncelleme uygulama şeklini temelden değiştiriyor. Daha önce, animasyon commit'leri ve React durum güncellemeleri aynı commit yolu için rekabet ederek yeniden render tetikleyen karmaşık animasyonlar sırasında kare düşüşlerine neden oluyordu.

Dallanma mekanizması bu endişeleri ayırıyor — Animation Backend kendi dalında çalışırken React commit'leri bağımsız olarak ilerliyor. İki dal her karenin sonunda uzlaşarak, daha önce animasyonlu başlıklarla liste kaydırma sırasında görsel aksaklıklara neden olan serpişme sorunlarını önlüyor.

## View Transition API (Altyapı)

Yeni bir `viewTransitionEnabled` özellik bayrağı, görünümler arasında animasyonlu geçişleri mümkün kılan yaklaşan View Transition API'yi kontrol ediyor. Bayrak, 0.85'te varsayılan olarak `false` — bu gelecek bir sürüm için altyapı, henüz kullanıcıya yönelik bir özellik değil. React Native'in Web View Transitions API'ye benzer yerleşik navigasyon geçişlerine doğru yönünü işaret ediyor.

## Mülakat Soruları: React Native 0.85 Mimarisi

React Native mülakatlarına hazırlananlar için 0.85 mimarisini yansıtan temel sorular:

**S: Shared Animation Backend hangi sorunu çözüyor?**

Shared Animation Backend, daha önce ayrı olan iki animasyon reconciliation sistemini (Animated ve Reanimated) React Native çekirdeğinde tek bir motora birleştiriyor. 0.85 öncesinde, bir sistemdeki performans optimizasyonları diğerine fayda sağlayamıyordu. Paylaşımlı backend ayrıca native driver ile layout özelliklerinin animasyonunu engelleyen sınırlamayı kaldırıyor.

**S: TurboModules neden 0.85'te varsayılan olarak tembel yükleniyor?**

Başlangıçta tüm TurboModules'un hevesle kaydedilmesi, uygulamanın bir oturum boyunca hiç kullanmayabileceği modüller için bellek tüketiyordu. Tembel yükleme, somutlaştırmayı ilk erişime erteler ve geliştirici tarafındaki API'yi değiştirmeden soğuk başlatma belleğini yaklaşık %40 azaltıyor.

**S: Animation Backend'deki iki güncelleme yolunu açıklayın.**

`synchronouslyUpdateProps`, layout dışı özellik değişikliklerini (opacity, transform) Fabric commit'leri tetiklemeden yönetir. Bir animasyon layout özelliklerini (width, height, padding) değiştirdiğinde, doğru layout yeniden hesaplaması için tam bir Fabric commit tetikler. Bu çift yollu yaklaşım, basit animasyonlar için performansı korurken native thread'de layout animasyonunu mümkün kılıyor.

**S: Shadow Tree commit dallanması nedir?**

Commit dallanması, animasyon kaynaklı Shadow Tree güncellemelerini React durum kaynaklı güncellemelerden bağımsız dallara ayırır. Her dal bağımsız olarak commit yapar ve kare sınırlarında uzlaşır. Bu, React yeniden renderlarının aynı commit yolu için rekabet etmesinden kaynaklanan animasyon takılmalarını önler — animasyonlu öğelerle liste kaydırma sırasında düşen karelerin yaygın bir kaynağı.

## Katı TypeScript API: Zorlamaya Doğru

React Native 0.80'de opsiyonel olarak tanıtılan Katı TypeScript API, varsayılan olma yolunda ilerliyor. Etkinleştirmek için:

```json
// tsconfig.json
{
  "compilerOptions": {
    "customConditions": ["react-native-strict-api"]
  }
}
```

Katı API, türleri manuel olarak sürdürmek yerine doğrudan kaynak kodundan üretiyor. Dışa aktarmaları genel `react-native` index dosyasıyla sınırlandırarak, sürümler arasında kırılan dahili dosya yollarına bağımlılığı önlüyor. 0.85'e yükseltme yapan ekipler, gelecekteki bir sürümde zorunlu uygulamaya hazırlanmak için bu bayrağı etkinleştirmeli.

## Sonuç

- Shared Animation Backend, Animated ve Reanimated'ı tek bir motorda birleştirerek ilk kez `useNativeDriver: true` ile layout özelliği animasyonunu mümkün kılıyor
- React Native 0.85, sıfır eski interop ile post-bridge geçişini tamamlıyor ve tembel yüklenen TurboModules sayesinde soğuk başlatma belleğini %40 azaltıyor
- Metro TLS desteği, kurumsal geliştirme ortamları için HTTPS gereksinimlerini çözüyor
- Shadow Tree commit dallanması, rekabet eden React commit'lerinin neden olduğu animasyon takılmalarını ortadan kaldırıyor
- Katı TypeScript API, zorunlu uygulamaya hazırlanmak için şimdi etkinleştirilmeli
- Ekipler, yükseltmeden önce kırıcı değişiklikleri (Jest preset çıkarılması, StyleSheet.absoluteFillObject kaldırılması, Node.js 20+ gereksinimi) ele almalı

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/blog/react-native/react-native-085-new-features-animation-backend