Fabric

Fabric Renderer Nasıl Çalışır?

FabricRendererUI

C++ shadow tree, Component Descriptor, mounting layer ve React 18 concurrent modelinin Fabric üzerindeki anlamı. Custom native component Spec’ten performans beklentisine.

EG

Emre Gürbüz

24 Temmuz 2026 · 4 dk okuma

Fabric, React Native’in yeni rendering sistemidir (UI’nin ekrana çizilme katmanı). Eski Paper renderer’ın “JS’den bridge ile UIManager komutları” modelinin yerine C++ merkezli bir shadow tree (görünüm ağacının C++ kopyası) ve daha sıkı thread sözleşmesi koyar.

Turbo Modules native API’yi modernleştirir; Fabric olmadan New Architecture UI tarafında tamamlanmaz. Biri veri/API, diğeri çizim.

Paper renderer’ın tavanı

Paper döneminde layout ve view komutları büyük ölçüde asenkron bridge trafiğine bağlıydı. Üç yapısal gerilim birikti:

  • Concurrent React ile uyumsuzluk: Kesilebilir rendering, “tek yönlü komut kuyruğu” ile gerilim yaratıyordu.
  • Tree drift: JS tree ile native view hiyerarşisi arasında gecikme; “hangi tree doğru?” bug’ları.
  • Yüksek frekanslı güncelleme: Gesture ve scroll-linked animasyon batching’e takılıyordu.

Fabric’in cevabı: ortak C++ shadow tree ve host platform view’larına kontrollü, transactional mount.

Temel kavramlar

Shadow Node

Her RN bileşeninin C++ tarafındaki karşılığıdır. Props, children, layout girdileri burada yaşar. Yoga (layout motoru) shadow tree üzerinde çalışır — JS thread’de değil.

Prop değişikliği yeni node veya clone üretir. Mutable shared state varsaymak Fabric’te bug üretir.

Component Descriptor

Belirli bir component tipi için factory, prop parsing ve clone davranışını tanımlar. Codegen, custom native component Spec’inizden descriptor iskeleti üretir. Descriptor olmadan Fabric custom view’ı tanımaz.

Mounting layer

Shadow tree commit sonucunu platform view’lara (Android View, iOS UIView) uygulayan katmandır. Mümkün olduğunca UI thread’de, tutarlı transactional model ile çalışır. Gereksiz view create/destroy azaltılır.

Scheduler / UIManager

Commit’leri koordine eder; React güncellemelerini shadow tree’ye işler. React 18 concurrent features ile entegre çalışmak üzere tasarlandı.

Concurrent React ile ilişki

Fabric, React 18 concurrent modeliyle çalışmak üzere tasarlandı. Pratikte beklenenler:

  • Tree drift azalır
  • Suspense / transition için daha gerçekçi zemin
  • Gesture → layout → paint yolu daha tutarlı timing

Beklenmemesi gerekenler:

  • Sihirli FPS — ağır JS hâlâ frame çalar
  • Bitmap/image decode ayrı problem
  • Kötü list virtualization hâlâ kritik

Ölçüm: UI FPS ve JS FPS ayrı izleyin.

Custom native component: Spec zorunluluğu

View istiyorsanız Turbo Module yetmez — Fabric component Spec yazarsınız:

import type { ViewProps } from 'react-native';
import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

export interface NativeMapViewProps extends ViewProps {
  zoomEnabled?: boolean;
  onRegionChange?: (event: { nativeEvent: { lat: number; lng: number } }) => void;
}

export default codegenNativeComponent<NativeMapViewProps>(
  'NativeMapView'
) as HostComponent<NativeMapViewProps>;

Android/iOS’ta generated interop’a karşı view manager bağlarsınız. Eski requireNativeComponent interop ile yaşayabilir — third-party Fabric desteğini envanterleyin.

Event prop

Fabric’te event prop’ları codegen ile tip güvenli tanımlanır. directEventHandler scroll-linked callback’lerde tercih edilir; bubbling seçimi performansı etkiler.

Performans: gerçekçi beklenti

AlanFabric kazancıFabric yetmez
Gesture + scrollDaha tutarlı mountJS re-render hâlâ pahalı
Layout animationDaha az bridge driftYanlış Reanimated config
Concurrent updateDaha iyi önceliklendirmeAğır sync Turbo Module
Custom native viewCodegen descriptorEski Paper-only view manager
List performansıTemel iyileşmeVirtualization tuning şart

Baseline alın: Paper vs Fabric, aynı cihaz, aynı ekran. “Daha akıcı” anekdotu yetmez.

Sık tuzaklar

  • newArchEnabled=true açıp third-party Fabric desteğini kontrol etmemek
  • UIManager.measure timing değişikliği — Paper’dan farklı frame’de gelebilir
  • Shadow node’da mutable state varsayımı
  • Reanimated + Fabric uyumsuz eski sürüm
  • Sadece flagship test — düşük segment Android farklı davranır

Production checklist

  • Kritik native view’lar Fabric-compatible
  • Codegen Spec’leri release build’de üretiliyor
  • Gesture + scroll E2E
  • Reanimated uyumu doğrulandı
  • UI FPS + JS FPS baseline
  • Paper’a rollback binary planı var
  • Event prop’ları direct/bubbling doğru
  • R8 açık smoke — generated descriptor sınıfları

Özet

Fabric, RN UI’sini “mesaj gönderen JS” olmaktan çıkarıp paylaşılan C++ tree + mount protokolüne taşır. Turbo Modules API hızını, Fabric çizim tutarlılığını getirir. Renderer’ı anlamadan “New Arch açtık” demek yarım migrasyondur — pahalı bug’lar çoğu zaman mount timing’de yaşanır.

Diğer yazılar