React Native ve Expo ile mobil uygulamaya ilk adım

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. React’i web’de hooks ile bileşen yazarken tanımıştım; React Native’in vaadi tam olarak o bilgiyi mobile taşıyabilmek. 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.

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.

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.