Web Dünyasından Mobil Geliştirmeye Geçiş: React Native ile İlk Haftamda Öğrendiklerim

Mobil geliştirmeye geçiş, bir web geliştiricisi için tahmin ettiğimden daha farklı bir deneyim oldu. Yıllardır React ve Next.js ile enterprise projeler geliştiriyorum. Dosya yapıları, component mantığı, styling yöntemleri ve deployment süreçleri zihnimde neredeyse otomatikleşmişti. Bu nedenle hobi amaçlı bir mobil uygulama geliştirmeye başladığımda, React Native’in beni çok zorlamayacağını düşünmüştüm. Kod temelde React, mantık temelde JavaScript, component yaklaşımı da oldukça benzer… fakat pratikte gördüm ki web ile mobil arasında belirgin ayrımlar var ve bu ayrımlar günlük geliştirme sürecini doğrudan etkiliyor.

Bu yazıda, React Native ile ilk haftamda karşılaştığım temel farkları, alışmamı gerektiren noktaları, mimari seçimleri, stil yönetimini, navigation mantığını ve mobil ekosistemin kendi dinamiklerini detaylı bir şekilde anlatacağım. Amacım hem benim gibi web tarafında uzun süre çalışmış geliştiricilere bir bakış açısı sunmak hem de React Native’e geçişte nelerin beklendiğini net bir şekilde ortaya koymak.

1. React Mantığı Aynı, Fakat Ortam Tamamen Farklı

İlk olarak şunu fark ettim:
React Native, React gibi görünse de DOM olmadan çalışıyor. Bu, birçok alışkanlığın değişmesi anlamına geliyor.

Web tarafında refleks gibi kullandığımız elementlerin hiçbiri mobilde yok:

• <div>

• <span>

• <p>

• <img>

Bunların yerine çok daha temel bir yapı var:

• View

• Text

• Image

Örneğin, web’de çok basit bir alan şöyle görünür:

<div className="header">
  <p>Hello</p>
</div>

Aynı yapı mobilde şu şekilde ifade ediliyor:

<View style={styles.header}>
  <Text>Hello</Text>
</View>

Ve burada üç önemli fark hemen ortaya çıkıyor:

1. ClassName yok

2. CSS yok

3. Text bile bir component (yani <p> diye bir şey yok)

Bu geçiş ilk gün tuhaf geliyor ama birkaç ekran sonra doğal bir pratik haline dönüşüyor.

2. CSS Beklentisiyle Gelip StyleSheet Gerçeğiyle Yüzleşmek

Web projelerinde Tailwind, CSS Modules, SCSS veya styled-components gibi araçlar neredeyse standart hale geldi. Mobilde ise default yaklaşım StyleSheet veya inline style.

const styles = StyleSheet.create({
  box: {
    padding: 16,
    backgroundColor: "#1d4ed8",
  },
});

Bu yaklaşım temiz ve kontrollü, evet, fakat web’de alıştığımız bazı özelliklerin mobilde birebir olmadığını hemen fark ediyorsun.

Örneğin:

• line-height Android ve iOS'ta farklı davranabilir

• shadow özellikleri platformdan platforma değişir

• overflow: hidden Android’de garip sonuçlar verebilir

• Flexbox'ın default yönü column

Bir örnek:

Web’de:

.card {
  display: flex;
  flex-direction: row;
}

Mobilde ise flex-direction'ın standart olarak column gelmesi bazen farkında olmadan yanlış layout’lara sebep oluyor.

<View style={{ flexDirection: "row" }}></View>

Bu küçük ama kritik bir davranış farkı.

3. Routing: Next.js’in Düzeninden Çıkıp Yeni Bir Dünyaya Girmek

Next.js tarafında dosya bazlı routing’le çalışmak oldukça konforlu.
pages/blog/[slug].js yazdığın anda route hazırdır.

React Native’de ise başlangıçta hiçbir router yok.
Bu, ilk başta “boş bir ekranla başlamak” hissi veriyor.

React Navigation çok popüler, fakat bana daha yakın gelen şey Expo Router oldu. Çünkü Next.js’e oldukça benziyor:

/app
  /(tabs)
  /profile
  /settings

Yani dosya bazlı yaklaşım bir nebze geri geliyor.
Bu da webden gelen biri için “zihinsel yükü azaltan” bir tercih.

4. Ekran Boyutları, Safe-Area ve Cihaz Çeşitliliği

Web’de responsive tasarım medya sorgularıyla kontrol ediliyor.
Mobilde ise işler çok daha cihaz merkezli.

Ele alman gereken başlıklar:

• Farklı ekran çözünürlükleri

• Notch’lu cihazlar

• SafeAreaView

• iOS ve Android’in farklı status bar davranışları

• Tablet uyumluluğu

Bir örnek:

import { Dimensions } from "react-native";

const { width, height } = Dimensions.get("window");

Bu değerlerle çalışırken “cihazdan cihaza” farklılık gösteren safe-area bölgelerini ayrıca hesaplamak gerekiyor. Web’den gelen bir geliştirici olarak bu kadar çok cihaz varyasyonunu bu kadar erken düşünmek gerektiğini beklemiyordum.

5. Kütüphane Seçimlerinin Web’deki Kadar Sorunsuz Olmaması

Web tarafında bir kütüphane kurarsınız, genelde çalışır.
Mobilde ise bazı paketler native module ister, bazıları iOS tarafında pod gerektirir.

Örneğin bir görsel seçici paketi:

npx pod-install ios

Bu adımı atladığınız an build sırasında hata alabilirsiniz.

Android’de ise gradle versiyon uyumsuzlukları çıkabilir.
Bu yüzden React Native ekosisteminde Expo’nun bu kadar popüler olması tesadüf değil; birçok native detayı soyutlayarak hızlı bir başlangıç sunuyor.

6. Platform Farklılıkları: iOS ve Android Aynı Davranmıyor

Aynı component iki platformda farklı görünebilir.
Shadow örneği bunun en iyi göstergesi:

iOS:

{
  shadowColor: "#000",
  shadowOpacity: 0.15,
  shadowRadius: 6,
}

Android:

{
  elevation: 4,
}

Aynı gölgeyi iki platformda birebir elde etmek çoğu zaman mümkün değil.

Yine Modal bileşeni:

• iOS’ta tam ekran açılamayabilir

• Android’de geri tuşuyla kapanabilir

• iOS’ta swipe-down gesture çalışır, Android’de genelde yoktur

Bu tarz farklılıkları yönetmek mobil projelerin doğasında var.

7. Deployment ve Yayın Süreci Web’den Çok Farklı

Web’de deploy süreci oldukça basittir:
Vercel veya Netlify üzerinde push yaptıktan sonra site yayına girer.

Android için:

• aab dosyası üretmek

• Play Console ayarları

• İkon ve splash adaptif formatları

• Minimum API level gereksinimleri

iOS için:

• sertifikalar

• provisioning profile

• TestFlight

• App Store Connect kayıtları

• App Privacy manifest

Kod yazmaktan çok “platform prosedürü yönetmek” gerekebiliyor.

Expo’nun build ve submit komutları burada büyük kolaylık sağlıyor:

npx expo build:android
npx expo build:ios
npx expo submit:ios

8. Web Alışkanlıklarını Kırıp Mobil Yaklaşıma Uyum Sağlamak

Süreç ilerledikçe şunu fark ettim:
React Native, React gibi görünse de zihniyeti mobil platformlara göre şekillenmiş durumda. Yani web tarafında kazandığım refleksler bazı noktalarda işe yarasa bile, birçok konuda farklı bir yaklaşım geliştirmek gerekiyor.

Örneğin UI tasarımını biraz daha “kart tabanlı”, “yerel gesture odaklı”, “native bileşen mimarisine uygun” şekilde ele almak gerekiyor.
Buton bile tasarlarken:

Web’de:

<button className="btn">Kaydet</button>

Mobilde:

<TouchableOpacity style={styles.button}>
  <Text style={styles.buttonText}>Kaydet</Text>
</TouchableOpacity>

Ayrıca TouchableOpacity, Pressable, TouchableWithoutFeedback gibi seçeneklerin davranış ve performans farklarına da dikkat etmek gerekiyor.

9. Performans Konuları Farklı Bir Perspektif Gerektiriyor

Web tarafında performans daha çok:

• render sayısı

• bundle boyutu

• lazy loading

• CDN yapısı

gibi başlıklardan oluşur.

Mobilde ise:

• bridge geçişleri

• büyük resimlerin kullanımı

• gesture performansı

• liste render optimizasyonu

• native modüllerin maliyeti

gibi noktalar öne çıkıyor.

Örneğin uzun bir listeyi performanslı göstermek için FlatList kullanmak şart:

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemCard item={item} />}
/>

Aynı işi ScrollView ile yapmak performans sorunlarına yol açıyor.

Sonuç: React Native Beklediğimden Farklı Ama Öğrenmesi Keyifli

React Native’e geçerken, React bilgimin bana büyük avantaj sağlayacağını biliyordum. Bu doğru, fakat şunu da söylemem gerekir ki mobil geliştirme kendi içinde tamamen başka bir ekosistem. Navigation’dan styling’e, component yapısından platform farklarına kadar birçok detay web’de olduğu gibi işlemiyor.

Buna rağmen süreç kesinlikle zorlayıcı değil; sadece yeni bir düşünce şekli gerektiriyor. Web alışkanlıklarını bırakıp mobil yaklaşımı benimsediğinizde, component tabanlı yapının avantajlarını daha net görüyorsunuz. React Native, doğru araç seçimleriyle ve doğru mimari tercihlerle oldukça verimli bir geliştirme ortamı sunuyor.

Benim için bu süreç hem öğretici hem de keyifli bir deneyim oldu. Önümüzdeki haftalarda proje derinleştikçe daha farklı konulara da değineceğim: performans optimizasyonları, gesture yönetimi, animasyonlar, form yapıları ve store süreçleri gibi daha ileri seviye başlıkları da incelemeyi planlıyorum.

Mobil geliştirmeye geçmek isteyen bir web geliştiricisiyseniz, React Native’e başlamak kesinlikle iyi bir tercih. Doğru beklenti ve doğru araçlarla ilerlediğinizde öğrenme süreci hem hızlı hem de tatmin edici oluyor.