React Native — Custom Event Kullanımı

Merhabalar,

Konuya Custom Event nedir sorusunu yanıtlayarak başlayalım.

Custom Event Nedir?

React Native uygulamalarında bileşenler (component) arasında iletişim kurmanın birden fazla yolu mevcuttur; props, context, state yönetimi bunların başında gelir. Ancak birbiriyle doğrudan ilişkisi olmayan, farklı ağaç dallarında yer alan component’lar arasında veri iletmek gerektiğinde işler biraz karmaşıklaşabilir.

İşte tam bu noktada Custom Event yapısı devreye girer.

Custom Event, uygulama içerisinde herhangi bir noktadan yayınlanabilen (emit) ve yine herhangi bir noktadan dinlenebilen (listen) özel olaylardır. Bu yapı sayesinde component’lar arasında doğrudan bir bağımlılık oluşturmadan haberleşme sağlanabilir.

React Native’de bu işlemi gerçekleştirmek için en yaygın kullanılan yöntem **EventEmitter** yapısıdır.

EventEmitter ile Custom Event

React Native, bize EventEmitter sınıfını sunar. Bu sınıf üzerinden kendi event sistemimizi oluşturabiliriz.

İlk olarak basit bir EventEmitter instance'ı oluşturalım:

// utils/EventBus.js

import { EventEmitter } from 'events';

const EventBus = new EventEmitter();

export default EventBus;

Bu dosya uygulamamızın event merkezi (bus) görevini görecek. Artık bu instance’ı import ederek her yerden event yayınlayabilir ve dinleyebiliriz.

Event Yayınlamak (Emit)

Diyelim ki kullanıcı bir butona bastığında başka bir ekranın haberdar olmasını istiyoruz.

// screens/HomeScreen.js

import React from 'react';
import { View, Button } from 'react-native';
import EventBus from '../utils/EventBus';

const HomeScreen = () => {
  const handlePress = () => {
    EventBus.emit('userLoggedIn', { userId: 42, name: 'Emre' });
  };

  return (
    <View>
      <Button title="Giriş Yap" onPress={handlePress} />
    </View>
  );
};

export default HomeScreen;

Burada emit ile 'userLoggedIn' adlı event'i fırlattık ve içerisine bir veri nesnesi gönderdik.

Event Dinlemek (Listen)

Şimdi bu event’i başka bir component’tan dinleyelim.

// screens/ProfileScreen.js

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import EventBus from '../utils/EventBus';

const ProfileScreen = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const handleUserLogin = (data) => {
      console.log('Kullanıcı girişi algılandı:', data);
      setUser(data);
    };

    EventBus.on('userLoggedIn', handleUserLogin);

    // Component unmount olduğunda listener'ı temizliyoruz
    return () => {
      EventBus.off('userLoggedIn', handleUserLogin);
    };
  }, []);

  return (
    <View>
      {user ? (
        <Text>Hoş geldin, {user.name}!</Text>
      ) : (
        <Text>Henüz giriş yapılmadı.</Text>
      )}
    </View>
  );
};

export default ProfileScreen;

Dikkat edilmesi gereken önemli bir nokta var: useEffect içinde eklenen listener'ı, component unmount olduğunda mutlaka temizlememiz gerekiyor. Aksi takdirde memory leak oluşabilir.

Birden Fazla Event Kullanımı

Gerçek projelerde tek bir event ile iş bitmez. Farklı olaylar için farklı event isimleri tanımlayabiliriz.

Bunu daha düzenli yönetmek adına event isimlerini sabit bir dosyada tutmak iyi bir pratiktir:

// utils/EventTypes.js

const EventTypes = {
  USER_LOGGED_IN: 'userLoggedIn',
  USER_LOGGED_OUT: 'userLoggedOut',
  CART_UPDATED: 'cartUpdated',
  NOTIFICATION_RECEIVED: 'notificationReceived',
};

export default EventTypes;

Ve kullanımı:

import EventBus from '../utils/EventBus';
import EventTypes from '../utils/EventTypes';

// Yayınlama
EventBus.emit(EventTypes.CART_UPDATED, { itemCount: 3 });

// Dinleme
EventBus.on(EventTypes.CART_UPDATED, (data) => {
  console.log('Sepet güncellendi, ürün sayısı:', data.itemCount);
});

Ne Zaman Custom Event Kullanmalıyız?

Her durumda Custom Event kullanmak doğru değildir. Şu senaryolarda tercih edilebilir:

• Birbirleriyle doğrudan parent-child ilişkisi olmayan component’lar arasında iletişim kurulması gerektiğinde
• Redux veya Context gibi global state çözümlerine gerek duymadığımız, hafif haberleşme senaryolarında
• Native modüllerden (Android/iOS) JavaScript tarafına event göndermek gerektiğinde

Ancak uygulama büyüdükçe event takibi zorlaşabilir. Karmaşık durumlarda Redux, Zustand veya React Context gibi yapıları tercih etmek daha sağlıklı olacaktır.

Native Modülden Custom Event Göndermek

React Native’in sunduğu bir diğer güçlü kullanım ise Native taraftan (Android/iOS) JavaScript’e event fırlatmaktır. Bunun için RCTEventEmitter kullanılır.

Android (Java) tarafından event göndermek:

// MyModule.java

private void sendEvent(ReactContext reactContext, String eventName, WritableMap params) {
  reactContext
    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
    .emit(eventName, params);
}

JavaScript tarafında dinlemek:

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

const { MyModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(MyModule);

useEffect(() => {
  const subscription = eventEmitter.addListener('onDataReceived', (data) => {
    console.log('Native'den gelen veri:', data);
  });

  return () => subscription.remove();
}, []);

Sonuç

Custom Event yapısı, React Native uygulamalarında loosely coupled (gevşek bağlı) bir haberleşme sistemi kurmamıza olanak tanır. Özellikle küçük ve orta ölçekli projelerde, global state yönetimini şişirmeden bileşenler arası iletişimi kolayca sağlayabilirsiniz.

Konuyla ilgili önerileriniz ve sorularınız varsa yorumlarınızı bekliyorum. Okuduğunuz için teşekkür ederim..