# React Native ve Expo ile mobil uygulamaya ilk adım

> Web geliştiricisinin mobil dünyaya geçiş deneyimi: Looplio'yu React Native ve Expo ile kurarken öğrendiklerim ve beklentilerimin nasıl değiştiği.

- Yayın: 2023-08-06
- Kategori: Günlük
- Etiketler: React Native
- Okuma süresi: 2 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/react-native-ve-expo-ile-mobil-uygulamaya-ilk-adim/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
Bu yıl, Looplio'nun mobil istemcisini yazmaya başladım. Looplio, bir süredir üzerinde çalıştığım kişisel bir proje: API tarafı Laravel ile yazılmış, web arayüzü var. Mobil tarafı ise eksikti. Uzun süre "zamanı gelince" diyerek erteledim; bu yaz başlamaya karar verdim.

React Native ve Expo'yu seçtim. Web tarafında JavaScript ve React deneyimim vardı; bilgi transferi beklentim makul görünüyordu. Kısmen doğruydu, kısmen de yanılmıştım.

## Expo mu, bare React Native mi

İlk karar, Expo ile mi yoksa doğrudan React Native CLI ile mi başlayacağım. Araştırdım; Expo'nun managed workflow'u çoğu kullanım senaryosu için yeterli görünüyordu. Native modül yazmayı gerektirmeyen, Expo'nun hazır paket ekosisteminin kapsadığı özelliklere ihtiyacım vardı: kamera, bildirimler, güvenli depolama, push bildirimleri.

Expo Go uygulamasıyla geliştirme deneyimi hızlı. Kodu değiştiriyorsunuz, telefonda anında görüyorsunuz. Web'deki hot reload alışkanlığı burada da karşılık buluyor.

```bash
npx create-expo-app looplio-mobile
cd looplio-mobile
npx expo start
```

Bundan sonrası, QR kodu okuyup telefona geliştirme sunucusunu bağlamak.

## Web'den getirdiklerim, bırakmak zorunda kaldıklarım

React bilgisi büyük ölçüde transfer oluyor. Component mantığı, `useState`, `useEffect`, prop'lar — bunların hepsi aynı. React Native'de HTML etiketleri yok; `div` yerine `View`, `p` yerine `Text`, `img` yerine `Image`. Bu geçiş birkaç günde içselleşiyor.

Styling daha farklı. CSS yok; JavaScript nesnesi olarak yazılan `StyleSheet` var. Flexbox tabanlı, ama web Flexbox'ından bazı davranış farkları var. `flex: 1` mobilde "kalan alanı doldur" anlamına geliyor, ama davranışı web'deki gibi her zaman öngörülemiyor. Bu farkları bizzat görmek gerekiyor.

```javascript
import { View, Text, StyleSheet } from 'react-native'

export default function EventCard({ title, date }) {
    return (
        <View style={styles.card}>
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.date}>{date}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: '#fff',
        padding: 16,
        borderRadius: 8,
        marginBottom: 12,
    },
    title: {
        fontSize: 16,
        fontWeight: '600',
        color: '#1a1a1a',
    },
    date: {
        fontSize: 14,
        color: '#666',
        marginTop: 4,
    },
})
```

## Navigasyon ilk büyük farklılık

Web'de navigasyon URL tabanlı; tarayıcının geçmişi var. Mobilde bunlar yok. React Navigation kütüphanesi bu boşluğu dolduruyor ama düşünce biçimi farklı. Stack navigator, tab navigator, drawer navigator — bunlar iç içe geçebiliyor.

Looplio için tab navigasyonu seçtim: ana sekme, takvim, bildirimler, profil. Stack'i her sekmenin içinde kullandım. Bu yapı birkaç deneme-yanılmayla oturdu; ilk denemede temiz çıkmadı.

## API entegrasyonu: beklediğimden kolay

Bu kısım gerçekten beklediğimden kolaydı. Laravel API'sini zaten belgelenmiş ve çalışır halde kurmuştum. Mobil tarafta `fetch` ya da Axios ile aynı uç noktalara istek atmak, web'deki JavaScript kodundan pek farklı değil.

Kimlik doğrulama için Expo SecureStore kullandım; token güvenli depolanıyor ve her istekte header'a ekleniyor. Bu yaklaşım birkaç satır kurulum gerektiriyor, sonra şeffaf çalışıyor.

## Şimdiki durumum

Ağustos sonu itibarıyla temel ekranlar çalışıyor: giriş, etkinlik listesi, etkinlik detayı, yeni etkinlik oluşturma. Bildirimler ve bazı özellikler eksik; ama bir iskelet var.

Web geliştirici olmak React Native başlangıcını kolaylaştırıyor — ama sizi tamamen hazırlamıyor. Mobil'in kendi düşünce biçimi var: dokunma hedefleri, ekran geçiş animasyonları, klavye davranışı, bellek ve performans kısıtları. Bunlar yavaş yavaş görünür hale geliyor.

Sonraki adım bu eksiklikleri tamamlamak ve Expo'nun derleme altyapısıyla test sürümü oluşturmak. Bir sonraki günlük yazısında o kısımdan bahsedeceğim.