React Native: nedir, Bridge nasıl çalışır ve JavaScript ortamı

React Native Nedir

React Native, Facebook ekibi (şimdi Meta) tarafından oluşturulan ve 2015 yılında açık kaynak olarak yayınlanan bir framework'tür. Hibrit yaklaşımların (Cordova, Ionic) aksine, React Native WebView kullanmaz. Bunun yerine, JavaScript bileşenleri yerel UI öğelerine eşlenir: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

React Native'in ilk sürümü yalnızca iOS'u destekliyordu. Android desteği 2016'da geldi. Sürüm 0.60 (2019), Autolinking'i (yerel bağımlılıkların otomatik bağlanması) tanıttı. React Native 0.68 (2022), yeni Fabric + TurboModules mimarisini içeriyordu. Mevcut kararlı sürüm 0.74 (2024), Flexbox düzeni için Yoga 3.0 desteğiyle tamamen New Architecture'a geçmiştir.

Statista 2024'e göre, React Native çapraz platform projelerinin %38'inde kullanılmaktadır. Framework, Discord, Instagram, Shopify, Pinterest, Skype ve Uber Eats tarafından kullanılmaktadır. Meta, Facebook ve Instagram'da (2 milyar kullanıcılı ana mobil uygulama) React Native kullanmaktadır.

React Native'in Tarihi ve Gelişimi

React Native, Ocak 2015'te React.js Conf'te duyuruldu. Fikir, React'in bildirimsel paradigmasını web'den mobil platformlara taşımaktı. Depodaki ilk commit, iOS'ta Facebook Groups uygulamasını oluşturmak için 2013'te bir iç Facebook projesi olarak ortaya çıktı.

0.70 (2022) sürümü, Hermes'i varsayılan JavaScript motoru olarak tanıttı. Hermes, mobil cihazlar için optimize edilmiş önceden derlenmiş (AOT) bir motordur. JavaScriptCore'a kıyasla uygulama başlatma süresini %50 azaltır ve APK boyutunu %30 küçültür. Hermes, ES6'yı ve kısmen ES2020'yi destekler.

React Native ve React Web Arasındaki Fark

React Web, ReactDOM aracılığıyla bileşenleri DOM öğelerine (div, span, p) render eder. React Native, platformun yerel bileşenlerine render eder. <div> yerine <View>, <span> yerine <Text> kullanılır. Stiller StyleSheet.create() aracılığıyla tanımlanır ve platformun CSS özelliklerine çevrilir. Flexbox, Yoga motoru aracılığıyla varsayılan olarak etkindir.

React Native'de navigasyon web'den farklıdır. react-router-dom yerine React Navigation kullanılır — Stack, Tab ve Drawer navigatörlerini destekleyen yerel bir kütüphane. React Navigation 6.x, yerel animasyonlar (useNativeDriver) ve Deep Links entegrasyonu kullanır. iOS UINavigationController ve Android Fragment ile yerel ekran navigasyonu için Wix'in react-native-navigation kütüphanesi kullanılır.

React Native Mimarisi

React Native mimarisi geleneksel olarak Bridge (JavaScript ortamı ile yerel kod arasında asenkron bir JSON kanalı) etrafında inşa edilmişti. Sürüm 0.68'den itibaren Meta, Bridge'i JSI (JavaScript Interface) ve Fabric ile değiştiren New Architecture'ı tanıttı. Her iki modele de bakalım.

Bridge ve Fabric

Bridge, birden çok iş parçacığında çalışan serileştirilmiş bir JSON protokolüdür: JS Thread (React kodu yorumlama), Main Thread (UI) ve Native Modules Thread (API). JS ve yerel kod arasındaki her etkileşim, nesne serileştirme ve serileştirme çözme işlemlerinden geçer ve sık çağrılarda gecikmelere neden olur. 1000 öğeli bir liste kaydırılırken Bridge, saniyede 10.000'e kadar JSON mesajı üretir.

Fabric, React Native'de yeni bir render sistemidir. Bridge yerine Fabric, JSI aracılığıyla UI iş parçacığıyla senkronize olan bir C++ Gölge Ağacı (Shadow Tree) kullanır. Bu, JSON serileştirmeyi ortadan kaldırır: yerel C++ kodu doğrudan JavaScript ortamındaki işlevleri çağırır ve bunun tersi de geçerlidir. Fabric, render gecikmesini 16 ms'den (Bridge) 2–4 ms'ye düşürür.

TurboModules, New Architecture'ın ikinci parçasıdır. Eski modelde, tüm yerel modüller uygulama başlangıcında yüklenirdi. TurboModules, modülleri tembelce (lazy loading) yükler — yalnızca JS kodu ilk kez talep ettiğinde. Bu, 20+ yerel modülü olan uygulamalarda soğuk başlatma süresini %40 azaltır.

React Native Uygulama Örneği

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Yerel Modüller

Yerel modüller, JavaScript'ten platform API'lerini çağırmak için bir mekanizmadır. İşlevsellik standart React Native bileşenleri (kamera, Bluetooth, biyometri) tarafından karşılanmıyorsa, geliştirici Swift/Kotlin'de bir modül yazar ve bunu RCTBridgeModule veya TurboModule aracılığıyla kaydeder. Yerel işlev, JS'den NativeModules.CameraModule.takePhoto() aracılığıyla çağrılır.

React Native, ivmeölçer (react-native-sensors), coğrafi konum (@react-native-community/geolocation), biyometri (react-native-biometrics) ve yerel bildirimlere (@notifee/react-native) erişmek için hazır yerel modüller sağlar. Özel senaryolar için Expo, Expo Modules API sunar — Xcode veya Android Studio olmadan yerel modüller oluşturmak için daha basit bir arayüz.

React Native'in Avantajları

Büyük topluluk — React Native, çapraz platform framework'leri arasında en büyük topluluğa sahiptir. GitHub'da projenin 117.000+ yıldızı ve 1800+ katkıda bulunanı vardır. npm, haftalık 3 milyon+ kez react-native indirir. React Native soruları, Stack Overflow'daki mobil geliştirme bölümündeki tüm soruların %5'ini oluşturur.

JavaScript ekosistemi — React geliştiricileri web'dekiyle aynı araçları kullanır: npm, Babel, ESLint, Prettier, Jest, TypeScript. İş mantığı, web sürümü (React) ile mobil uygulama (React Native) arasında yeniden kullanılabilir. Redux, Zustand, React Query ve React Hook Form gibi kütüphaneler her iki platformda da değişiklik yapılmadan çalışır.

Expo, React Native geliştirmeyi basitleştiren bir SDK ve araç setidir. Expo, hazır modüller (kamera, bildirimler, haritalar, OAuth), bulut derlemeleri (EAS Build) ve OTA güncellemeleri (EAS Update) sağlar. Expo Go, Xcode veya Android Studio olmadan fiziksel bir cihazda uygulamayı çalıştırmaya olanak tanır. Expo 2024 verilerine göre, yeni React Native projelerinin %70'i Expo kullanmaktadır.

OTA güncellemeleri — Expo Update ve CodePush (Microsoft) aracılığıyla kullanılabilen bir özellik. Geliştiriciler, App Store veya Google Play incelemesinden geçmeden JavaScript paket güncellemelerini doğrudan kullanıcılara gönderebilir. Bu, kritik hata düzeltmelerini 2–5 günden (inceleme bekleme) 1–2 saate hızlandırır.

TypeScript desteği React Native 0.71'den itibaren varsayılan olarak dahil edilmiştir. Proje şablonu, tsconfig.json, tüm bileşenler için türler ve katı mod desteği içerir. Flow (Facebook tarafından statik yazma) da desteklenir, ancak Meta resmi olarak TypeScript'i önerir. State of React Native 2024 anketine göre, TypeScript şablonu yeni projelerin %85'ini oluşturur.

Ekosistem ve Popüler Kütüphaneler

npm, React Native için birincil paket kaydıdır. Kütüphane araması, react-native anahtar kelimesine göre filtrelenir. Kurulum için npm install veya yarn add kullanılır. React Native CLI, yerel bağımlılıkları otomatik olarak bağlar (sürüm 0.60'tan itibaren). Expo projeleri için kurulum, uyumlu kütüphane sürümünü seçen expo install aracılığıyla yönetilir.

Temel Kütüphaneler

@react-navigation/native — React Native'de navigasyon için fiili standarttır. Kütüphane, Stack Navigator (animasyonlu geçişler), Tab Navigator (iOS/Android için alt menü), Drawer Navigator (yan menü) ve Material Top Tab içerir. React Navigation 7.x (2024), statik rota yapılandırması ve useSyncExternalStore ile tam React 18 desteği getirdi.

react-native-reanimated — yüksek performanslı animasyonlar için bir kütüphane. Reanimated 3.x, JS iş parçacığını atlayarak UI iş parçacığında (worklet) animasyonları çalıştırır. Bu, 100+ öğeyi canlandırırken bile 60 FPS garantiler. useSharedValue, useAnimatedStyle ve withSpring, standart kütüphanedeki Animated API'nin yerini alır. Reanimated, dokunma hareketlerini react-native-gesture-handler aracılığıyla işler.

@tanstack/react-query — sunucu durumu yönetimi için bir kütüphane. React Query, API yanıtlarını önbelleğe alır, ağ değişikliğinde otomatik olarak verileri yeniden getirir (refetchOnReconnect) ve useInfiniteQuery ile sayfalamayı destekler. Sürüm 5.x, UX için iyimser güncellemeler içerir — arayüz, sunucu yanıtını almadan önce güncellenir ve ardından ayarlanır.