Blog'a Dön
React NativeMobil UygulamaiOSAndroidJavaScript

React Native ile Mobil Uygulama Geliştirme: 2025 Tam Rehber

D
DGRSOFT Ekibi
·18 Şubat 2025·
5 dk okuma
React Native ile Mobil Uygulama Geliştirme: 2025 Tam Rehber

React Native nedir, nasıl kullanılır? iOS ve Android için tek kod tabanıyla mobil uygulama geliştirmenin avantajları, tuzakları ve 2025 best practice'leri.

React Native Nedir?

React Native, Meta (Facebook) tarafından 2015'te açık kaynak olarak yayınlanan, JavaScript ve React ile iOS ve Android için native mobil uygulamalar geliştirmenizi sağlayan bir framework'tür. 2025 itibarıyla dünya genelinde en çok tercih edilen cross-platform çözümlerinden biri olmayı sürdürmektedir.

Facebook, Instagram, Shopify, Discord ve Wix gibi dev şirketler React Native kullanmaktadır. Bunun en büyük nedeni: tek bir kod tabanıyla iki platform için uygulama geliştirme imkânı — bu da hem geliştirme süresini hem de maliyeti dramatik biçimde düşürür.

Neden React Native? Flutter ve Xamarin ile Karşılaştırma

| Özellik | React Native | Flutter | Xamarin | |---------|-------------|---------|---------| | Dil | JavaScript / TypeScript | Dart | C# | | Native UI | Evet (gerçek native bileşenler) | Hayır (özel render) | Hayır | | Ekosistem | Çok geniş (npm) | Gelişiyor | Sınırlı | | Öğrenme eğrisi | Düşük (JS bilenler için) | Orta | Yüksek | | Büyük şirket desteği | Meta + Microsoft + Shopify | Google | Microsoft | | Performans | Yüksek (New Architecture ile) | Çok yüksek | Orta |

React Native'i seçmeniz gereken durumlar:

  • Web'de React deneyiminiz varsa
  • Hızlı MVP çıkarmanız gerekiyorsa
  • Geniş npm ekosisteminden yararlanmak istiyorsanız
  • Orta-büyük ölçekli ticari uygulamalar geliştiriyorsanız

Mimari Seçimi: Expo mu, Bare React Native mi?

Expo — Hızlı Başlangıç için İdeal

npx create-expo-app MyApp --template blank-typescript
cd MyApp
npx expo start

Expo'nun avantajları:

  • Sıfır native konfigürasyon ile başlangıç
  • EAS Build ile cloud üzerinde iOS/Android derleme (Mac gerekmez!)
  • Expo SDK: kamera, bildirim, konum, dosya sistemi hazır hazır
  • Expo Go ile fiziksel cihazda anında test

Ne zaman Expo kullanın: Startup MVP'leri, prototip projeler, Expo SDK'nın kapsadığı özellikler yeterliyse.

Bare React Native — Tam Kontrol

npx react-native@latest init MyApp --template react-native-template-typescript

Bare RN'nin avantajları:

  • Native modüllere tam erişim
  • Özel native kod entegrasyonu (Objective-C, Swift, Java, Kotlin)
  • Daha ince bundle boyutu

Ne zaman kullanın: Bluetooth, NFC, özel donanım entegrasyonu; banka/fintech uygulamaları; Expo SDK'nın yetersiz kaldığı durumlar.

React Native New Architecture (2024+)

2024 sonunda stabil hale gelen New Architecture, React Native'in performansını köklü biçimde iyileştiriyor:

  • JSI (JavaScript Interface): Bridge yerine doğrudan JavaScript-Native iletişimi → latency sıfıra yakın
  • Fabric: Yeni render sistemi, concurrent React desteği
  • TurboModules: Native modüller lazy-load ile yükleniyor → başlangıç süresi azalıyor

React Native 0.74+ ve Expo SDK 51+ ile New Architecture varsayılan olarak açık geliyor.

Performans Optimizasyonu

Uzun Listeler

ScrollView büyük listelerde belleği tüketir. Bunun yerine:

import { FlatList } from 'react-native';

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemCard item={item} />}
  windowSize={5}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
/>

Çok büyük listeler için FlashList (by Shopify) FlatList'ten 10x daha hızlı olabilir.

Gereksiz Render'ları Önleyin

// Kötü — her parent render'da yeniden oluşur
const ItemCard = ({ item }) => <View>...</View>;

// İyi — sadece prop değiştiğinde render
const ItemCard = React.memo(({ item }) => <View>...</View>);

useMemo ve useCallback hook'larını hesaplama maliyetli işlemler ve callback prop'lar için kullanın.

Hermes Engine

Hermes, React Native için özelleştirilmiş JavaScript engine'dir. Başlangıç süresini %50'ye kadar azaltır, bellek kullanımını düşürür. React Native 0.70+ ile varsayılan olarak etkin.

Görsel Optimizasyonu

npm install react-native-fast-image

react-native-fast-image, önbellekleme ve progressive loading ile network görsellerini çok daha hızlı yükler.

State Yönetimi

| Çözüm | Ne Zaman Kullanın | |-------|-------------------| | React Context + useReducer | Küçük-orta ölçekli uygulamalar | | Zustand | Hafif, basit global state | | Redux Toolkit | Büyük kurumsal uygulamalar | | TanStack Query | Server state, API cache yönetimi | | Jotai | Atomic state, fine-grained reactivity |

2025'te en yaygın tercih: Zustand (lokal state) + TanStack Query (server state).

Navigasyon

React Navigation v7 (en güncel), stack, tab ve drawer navigasyonunu kapsayan de facto standart kütüphanedir:

npm install @react-navigation/native @react-navigation/native-stack

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Test Stratejisi

Birim ve entegrasyon testleri: Jest + React Native Testing Library

import { render, fireEvent } from '@testing-library/react-native';

test('buton tıklandığında çağrılır', () => {
  const onPress = jest.fn();
  const { getByText } = render(<Button onPress={onPress} title="Gönder" />);
  fireEvent.press(getByText('Gönder'));
  expect(onPress).toHaveBeenCalledTimes(1);
});

E2E testler: Detox (iOS/Android gerçek cihaz simülasyonu)

Yayınlama Süreci

App Store (iOS)

  1. Apple Developer Program üyeliği ($99/yıl)
  2. Xcode ile archive
  3. App Store Connect'e yükleme
  4. Review süreci: ortalama 24–72 saat

Google Play (Android)

  1. Google Play Console hesabı ($25 tek seferlik)
  2. Signed APK / AAB oluşturma
  3. Internal → Closed → Open testing → Production

EAS (Expo Application Services) ile her iki platform için build ve submit sürecini tek komutla otomatize edebilirsiniz.

Sık Sorulan Sorular (SSS)

React Native ile native app arasındaki performans farkı nedir? New Architecture ile bu fark neredeyse kapandı. Standart ticari uygulamalar için kullanıcı gözlemleyemez bir fark söz konusu. Yoğun grafik işleme veya AR/VR gibi özel senaryolarda native avantajlıdır.

React Native öğrenmek için React bilmek şart mı? React Native, React'in temel kavramlarını (components, hooks, state, props) kullanır. Temel React bilgisi olmadan başlamak mümkün ama zordur. Önce React web öğrenmeniz tavsiye edilir.

React Native ile yapılan uygulama App Store'a kabul edilir mi? Evet. App Store ve Google Play, React Native ile yapılan uygulamaları native uygulama olarak kabul eder. Facebook, Instagram ve Discord bunun canlı kanıtıdır.

Tek geliştirici hem iOS hem Android uygulama yapabilir mi? Evet, React Native'in en büyük avantajı budur. Tek bir JavaScript geliştiricisi her iki platformu kapsayabilir.

Sonuç

React Native, mobil uygulama geliştirme maliyetini ve süresini ikiye indirirken native deneyimden ödün vermemenizi sağlayan olgun bir ekosisteme sahip. 2025'te New Architecture ile performans endişeleri büyük ölçüde ortadan kalktı.

DGRSOFT olarak, hem Expo hem de bare React Native ile başarıyla teslim edilmiş projelerimiz var. iOS ve Android için profesyonel mobil uygulama geliştirme hizmetimiz hakkında bilgi almak için iletişime geçin.

Blog'a Dön
React NativeMobil UygulamaiOS