React Native, web geliştiricilerine JavaScript ve React bilgileriyle mobil uygulama geliştirebilme gücü sunarak platformlar arası geliştirmenin en popüler araçlarından biri haline geldi. Tek bir kod tabanıyla hem iOS hem de Android için uygulamalar oluşturmak harika bir kolaylık sağlıyor. Ancak bazen, React Native'in sunduğu JavaScript tabanlı soyutlama katmanı, uygulamanızın ihtiyaç duyduğu tüm yetenekleri karşılamakta yetersiz kalabilir.

Benim geliştirme tecrübelerimde, özellikle mobil cihazın donanımına doğrudan erişim gerektiren (GPS, kamera, Bluetooth gibi gelişmiş sensörler), yoğun hesaplama gerektiren (görüntü işleme, kriptografik işlemler) veya mevcut platforma özgü kütüphaneleri yeniden kullanmak istediğiniz durumlarda, yerel (native) modüllerin hayati bir rol oynadığını defalarca gördüm. Bu yazıda, React Native uygulamalarınızda JavaScript ve yerel kod (Objective-C/Swift ve Java/Kotlin) arasında nasıl bir köprü kuracağınızı, bu köprülemenin inceliklerini ve uygulamanızın yeteneklerini nasıl genişletebileceğinizi derinlemesine inceleyeceğiz. Unutmayın, doğru yerde kullanılan bir yerel modül, uygulamanızın performansını ve kullanıcı deneyimini önemli ölçüde artırabilir.

Neden Yerel Modüllere İhtiyaç Duyarız? JavaScript Neden Yetersiz Kalır?

React Native'in temel prensibi, çoğu mobil uygulama mantığını JavaScript ile yazıp, bu kodu cihazın yerel arayüz bileşenlerine köprülemek olsa da, bazı senaryolarda bu yaklaşımın sınırları vardır:

Platforma Özgü API'lere Erişim: React Native API'leri, genellikle her iki platformda da ortak olan temel özellikleri kapsar. Ancak Apple HealthKit veya Android'in NFC okuyucusu gibi spesifik donanım veya sistem özelliklerine doğrudan erişim gerektiğinde, yerel kod yazmak kaçınılmaz hale gelir.
Performans Odaklı İşlemler: JavaScript, tek thread'li yapısı nedeniyle yoğun CPU hesaplamaları veya karmaşık veri işlemeleri için ideal olmayabilir. Görüntü işleme, video kodlama/kod çözme veya büyük veri setlerinin işlenmesi gibi performans açısından kritik görevler, genellikle yerel kodda daha verimli çalışır. React Native Uygulamalarında Performans Optimizasyonu hakkında daha fazla bilgi edinmek için önceki yazımı inceleyebilirsiniz.
Mevcut Yerel Kütüphanelerin Kullanımı: Zaten geliştirilmiş ve kanıtlanmış bir yerel kütüphaneyi (SDK) yeniden kullanmak, tekerleği yeniden icat etmekten çok daha verimlidir. Bu kütüphaneler genellikle C++, Objective-C, Swift veya Java/Kotlin dillerinde yazılmıştır ve React Native uygulamanızda doğrudan kullanılamazlar; bir köprüye ihtiyaç duyarlar.
Kritik Hata Yakalama ve Sistem Entegrasyonu: Cihazın işletim sistemi düzeyinde hata yakalama, crash reporting veya derinlemesine sistem entegrasyonları için yerel kod arayüzleri gerekebilir.

Diagram illustrating the bridge between JavaScript and native modules, emphasizing why native code is essential for advanced functionality and performance in React Native.

React Native Köprüsü (Bridge) Nasıl Çalışır?

React Native, JavaScript ile yerel kod arasındaki iletişimi bir köprü (Bridge) aracılığıyla sağlar. Bu köprü, asenkron bir iletişim katmanıdır ve mesajları seri hale getirip (serialize) göndererek, diğer tarafta tekrar eski haline getirir (deserialize).

JavaScript Tarafı: Uygulama mantığı ve UI komponentleri JavaScript ile yazılır. Yerel bir fonksiyona ihtiyaç duyulduğunda, React Native'in NativeModules objesi üzerinden ilgili modül ve metod çağrılır.
Yerel Taraf: JavaScript'ten gelen çağrıları dinleyen ve yerel API'leri kullanarak işlemleri gerçekleştiren modüller (Android'de Java/Kotlin sınıfları, iOS'te Objective-C/Swift sınıfları) bulunur. İşlem tamamlandığında, sonuçlar tekrar köprü üzerinden JavaScript tarafına geri gönderilir.

Bu iletişim asenkrondur ve doğrudan çağrılar yerine bir mesaj kuyruğu (message queue) üzerinden gerçekleşir. Bu, JavaScript UI thread'inin (Ana UI iş parçacığı) bloklanmamasını sağlar ve uygulamanın akıcı kalmasına yardımcı olur. Ancak bu asenkron yapı, özellikle çok sık ve küçük veri alışverişlerinde performans overhead'i yaratabilir.

Kendi Yerel Modülünüzü Oluşturma: Android Örneği

Şimdi basit bir Toast mesajı göstermek için bir Android yerel modülü oluşturalım.

Adım 1: Modül Sınıfını Oluşturma (Java/Kotlin)

android/app/src/main/java/com/yourprojectname/ dizininde (MainApplication.java'nın olduğu yerde) yeni bir Java veya Kotlin sınıfı oluşturun. Örneğin, ToastModule.java:

package com.yourprojectname;

import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import javax.annotation.Nonnull;

public class ToastModule extends ReactContextBaseJavaModule {

    private static ReactApplicationContext reactContext;

    ToastModule(@Nonnull ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @Nonnull
    @Override
    public String getName() {
        return "ToastModule"; // JavaScript'ten erişeceğimiz isim
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(reactContext, message, duration).show();
    }

    @ReactMethod
    public void showWithCallback(String message, int duration, com.facebook.react.bridge.Callback callback) {
        Toast.makeText(reactContext, message, duration).show();
        callback.invoke("Toast gösterildi: " + message);
    }

    @ReactMethod
    public void showWithPromise(String message, int duration, com.facebook.react.bridge.Promise promise) {
        try {
            Toast.makeText(reactContext, message, duration).show();
            promise.resolve("Toast başarıyla gösterildi: " + message);
        } catch (e) {
            promise.reject("TOAST_ERROR", e.getMessage());
        }
    }
}

Adım 2: Paket Oluşturma

android/app/src/main/java/com/yourprojectname/ dizininde ToastPackage.java adında bir sınıf oluşturun:

package com.yourprojectname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import javax.annotation.Nonnull;

public class ToastPackage implements ReactPackage {

    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Adım 3: Paketi Uygulamaya Kaydetme

MainApplication.java dosyasını açın ve getPackages() metoduna yeni paketinizi ekleyin:

// ... diğer importlar
import com.yourprojectname.ToastPackage; // Kendi paketimizi import et

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Bu kısma kendi paketimizi ekliyoruz
      packages.add(new ToastPackage()); 
      return packages;
    }

    // ... diğer metodlar
  };

  // ...
}

Adım 4: JavaScript Tarafında Kullanım

import { NativeModules, Platform } from 'react-native';

const ToastAndroid = NativeModules.ToastModule; // Android tarafındaki getName() değeri

const App = () => {
  const showToast = () => {
    if (Platform.OS === 'android') {
      ToastAndroid.show('Merhaba React Native!', ToastAndroid.SHORT);

      ToastAndroid.showWithCallback('Callback ile mesaj', ToastAndroid.LONG, (message) => {
        console.log(message);
      });

      ToastAndroid.showWithPromise('Promise ile mesaj', ToastAndroid.SHORT)
        .then(message => console.log(message))
        .catch(error => console.error(error));

    } else {
      // iOS için farklı bir Toast uygulaması veya uyarı
      alert('iOS Toast yok, sadece Android.');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Toast Göster" onPress={showToast} />
    </View>
  );
};

export default App;

JavaScript code displayed in a browser console, demonstrating usage of native modules

Kendi Yerel Modülünüzü Oluşturma: iOS Örneği

Şimdi de basit bir Native Calendar Event oluşturmak için bir iOS yerel modülü oluşturalım.

Adım 1: Modül Sınıflarını Oluşturma (Objective-C/Swift)

Xcode'da projenizi açın. .xcodeproj dosyanıza sağ tıklayıp "New File..." seçerek iki dosya oluşturacağız: CalendarModule.h ve CalendarModule.m (Objective-C için) veya CalendarModule.swift ve CalendarModule-Bridging-Header.h (Swift için).

Objective-C ile:

CalendarModule.h:

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

@interface CalendarModule : RCTEventEmitter <RCTBridgeModule>

@end

CalendarModule.m:

#import "CalendarModule.h"
#import <React/RCTLog.h>

@implementation CalendarModule

RCT_EXPORT_MODULE(); // JavaScript'ten erişeceğimiz isim, CalendarModule

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
  RCTLogInfo(@"Calendar Event: %@ at %@", name, location);
  // Burada gerçekte takvim etkinliği oluşturma kodunu yazacaksınız.
}

// Callback ile geri dönüş:
RCT_EXPORT_METHOD(createCalendarEventWithCallback:(NSString *)name location:(NSString *)location callback:(RCTResponseSenderBlock)callback)
{
  RCTLogInfo(@"Calendar Event with callback: %@ at %@", name, location);
  // Başarı durumunu ve hata durumunu geri gönderebilirsiniz
  callback(@[[NSNull null], @"Etkinlik başarıyla oluşturuldu!"]); // İlk parametre hata, ikincisi başarılı sonuç
}

// Promise ile geri dönüş:
RCT_EXPORT_METHOD(createCalendarEventWithPromise:(NSString *)name location:(NSString *)location resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
  @try {
    RCTLogInfo(@"Calendar Event with promise: %@ at %@", name, location);
    // Başarılı durumu döndür
    resolve(@"Etkinlik promise ile başarıyla oluşturuldu!");
  } @catch (NSException *exception) {
    // Hata durumunu döndür
    reject(@"CREATE_EVENT_ERROR", exception.reason, nil);
  }
}

// JavaScript'ten çağrılabilecek sabit değerler gönderme
- (NSDictionary *)constantsToExport
{
  return @{ @"DEFAULT_EVENT_NAME": @"Yeni Etkinlik" };
}

// EventEmitter kullanarak JavaScript'e olay gönderme
- (NSArray<NSString *> *)supportedEvents
{
  return @[@"EventReminder"];
}

- (void)calendarEventReminderReceived:(NSNotification *)notification
{
  NSString *eventName = notification.userInfo[@"name"];
  [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
}

@end

Swift ile:

Eğer Swift kullanıyorsanız, bir Objective-C Bridge dosyası oluşturmanız gerekir (Xcode size soracaktır). CalendarModule.swift:

import Foundation
import React

@objc(CalendarModule)
class CalendarModule: RCTEventEmitter {

  @objc
  func createCalendarEvent(_ name: String, location: String) {
    print("Calendar Event: \(name) at \(location)")
    // Burada Swift ile gerçek takvim etkinliği oluşturma kodunu yazacaksınız.
  }

  @objc
  func createCalendarEventWithCallback(_ name: String, location: String, callback: RCTResponseSenderBlock) {
    print("Calendar Event with callback: \(name) at \(location)")
    callback([NSNull(), "Etkinlik başarıyla oluşturuldu!"])
  }

  @objc
  func createCalendarEventWithPromise(_ name: String, location: String, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    do {
      print("Calendar Event with promise: \(name) at \(location)")
      resolve("Etkinlik promise ile başarıyla oluşturuldu!")
    } catch let error {
      reject("CREATE_EVENT_ERROR", error.localizedDescription, error)
    }
  }

  // Gerekliyse sabit değerler için
  override func constantsToExport() -> [AnyHashable : Any]! {
    return ["DEFAULT_EVENT_NAME": "Swift Etkinliği"]
  }

  // EventEmitter için
  override func supportedEvents() -> [String]! {
    return ["EventReminder"]
  }

  // ... Event gönderme metodları (Objective-C örneğindeki gibi)
}

Objective-C Bridge Dosyası (Örn: `YourProjectName-Bridging-Header.h`):

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

Adım 2: JavaScript Tarafında Kullanım

import { NativeModules, Platform, NativeEventEmitter } from 'react-native';

const CalendarManager = NativeModules.CalendarModule; // iOS tarafındaki RCT_EXPORT_MODULE() veya @objc(CalendarModule) değeri

// EventEmitter kullanmak için
const calendarEventEmitter = new NativeEventEmitter(CalendarManager);

const App = () => {
  useEffect(() => {
    if (Platform.OS === 'ios') {
      const subscription = calendarEventEmitter.addListener(
        'EventReminder',
        (event) => {
          console.log(`Yeni bir hatırlatıcı: ${event.name}`);
        }
      );
      return () => subscription.remove(); // Component unmount edildiğinde dinleyiciyi kaldır
    }
  }, []);

  const createEvent = () => {
    if (Platform.OS === 'ios') {
      CalendarManager.createCalendarEvent('Toplantı', 'Ofis');

      CalendarManager.createCalendarEventWithCallback('Tanıtım', 'Online', (error, message) => {
        if (error) {
          console.error(error);
        } else {
          console.log(message);
        }
      });

      CalendarManager.createCalendarEventWithPromise('Fuar', 'Şehir Merkezi')
        .then(message => console.log(message))
        .catch(error => console.error(error));

      console.log('Varsayılan etkinlik adı:', CalendarManager.DEFAULT_EVENT_NAME);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Takvim Etkinliği Oluştur (iOS)" onPress={createEvent} />
    </View>
  );
};

export default App;

Yerel Modül Geliştirmede En İyi Pratikler

Minimalizm: Bir özelliği JavaScript ile yapabiliyorsanız, yerel modül yazmaktan kaçının. Yerel modüllerin bakımı daha zordur ve her iki platform için ayrı kod yazmayı gerektirir. React Native Uygulamalarında Modüler Mimari, bu ayrımı daha net yapmanıza yardımcı olabilir.
Hata Yönetimi: Yerel modüllerinizde olası hataları (örneğin, donanım erişim izinleri) uygun şekilde ele alın ve bu hataları Promise reject veya Callback ile JavaScript tarafına bildirin.
Ana UI Thread'ini Bloklamayın: Performans açısından kritik uzun süreli yerel işlemler, arka plan thread'lerinde çalıştırılmalıdır. Sonuçlar ana thread üzerinden JavaScript'e geri iletilmelidir.
Olay (Event) Kullanımı: Yerel koddan JavaScript'e birden fazla veya sürekli güncellemeler göndermek için NativeEventEmitter kullanın. Örneğin, bir sensörden sürekli veri akışı gibi.
Veri Serileştirme: Köprü üzerinden gönderilen tüm verilerin JSON'a dönüştürülebilir olması gerekir. Karmaşık nesneleri göndermeden önce basit veri türlerine dönüştürün.
Test Edilebilirlik: Yerel modüllerinizi hem yerel test araçlarıyla (JUnit/XCTest) hem de React Native test çerçeveleriyle (Jest) test edin.

Üçüncü Taraf Yerel Modüllerle Entegrasyon

Çoğu zaman, kendi yerel modüllerinizi yazmak yerine, hali hazırda geliştirilmiş üçüncü taraf kütüphaneleri kullanacaksınız. Bu kütüphaneler genellikle npm veya yarn üzerinden yüklenir ve otomatik bağlama (autolinking) özelliği sayesinde manuel yapılandırma ihtiyacını ortadan kaldırır. Ancak bazen manuel adımlar veya sorun giderme gerekebilir.

`react-native link` (Eski Yöntem): Bazı eski kütüphaneler hala bu komutu kullanmanızı isteyebilir, ancak çoğu yeni proje ve kütüphane için otomatik bağlama yeterlidir.
Otomatik Bağlama (Autolinking): React Native 0.60 ve üzeri sürümlerde, paket yöneticinizle yüklediğiniz yerel kütüphaneler otomatik olarak bağlanır. Projenizi yeniden derlemeniz yeterlidir (npx react-native run-android / npx react-native run-ios).
Sorun Giderme: Bağlantı sorunları genellikle yanlış bağımlılıklar, önbellek sorunları (watchman watch-del-all && rm -rf node_modules && npm install && npm start -- --reset-cache) veya Xcode/Gradle ayarlarındaki hatalardan kaynaklanır.

Sonuç

React Native'in gücü, sadece platformlar arası kod yazma yeteneğinde değil, aynı zamanda ihtiyaç duyulduğunda yerel platformların derinliklerine inebilme esnekliğinde yatar. Yerel modül köprülemesi, uygulamanızın performansını artırmak, cihaza özel donanım ve API'lere erişmek veya mevcut yerel SDK'ları entegre etmek için vazgeçilmez bir araçtır. Ancak bu gücü kullanırken, her zaman gerekliliğini sorgulamak ve JavaScript ile yapabileceğinizden emin olmak önemlidir.

Doğru yerde ve doğru şekilde uygulandığında, yerel modüller React Native uygulamanızı sıradan olmaktan çıkarıp, kullanıcılara gerçekten üstün bir deneyim sunabilir. Unutmayın, bu alandaki herhangi bir soru veya yardıma ihtiyacınız olursa, ismailyagci371@gmail.com adresinden veya sosyal medya kanallarından benimle (İsmail YAĞCI) iletişime geçebilirsiniz. Başarılar dilerim!

React Native'de Yerel Modülleri Köprüleme: Gelişmiş Fonksiyonellik ve Performans Sırları