React Native ile Mobil Uygulama: Cursor + Expo Kombinasyonu
React Native + Cursor + Expo: Güçlü Trio Mobil uygulama geliştirme artık iki platform için ayrı kod yazmayı gerektirmiyor. React Native ile hem iOS hem Android'e tek kodbase ile çıkabilir, Expo ile kurulum ve deployment'ı kolaylaştırabilir…
React Native + Cursor + Expo: Güçlü Trio
Mobil uygulama geliştirme artık iki platform için ayrı kod yazmayı gerektirmiyor. React Native ile hem iOS hem Android'e tek kodbase ile çıkabilir, Expo ile kurulum ve deployment'ı kolaylaştırabilir, Cursor ile de geliştirme sürecini dramatik biçimde hızlandırabilirsiniz.
Neden Bu Kombinasyon?
React Native
- Tek kod, iki platform (iOS + Android)
- JavaScript/TypeScript ile yazılır
- Native performans sunar
- Meta tarafından desteklenir
Expo
- React Native kurulumunu kolaylaştırır
- OTA (over-the-air) güncelleme
- EAS Build ile bulut derleme
- 100+ hazır API (kamera, konum, bildirim...)
Cursor
- Expo projelerini mükemmel anlıyor
- TypeScript desteği tam
- Hata ayıklama yardımı
- NativeWind (Tailwind for RN) ile uyumlu
Kurulum (15 Dakika)
```bash
# Node.js kurulu olduğundan emin olun
node --version
Expo CLI kurulumu
npm install -g @expo/cli
Yeni proje oluştur
npx create-expo-app MyApp --template
Cursor'da aç
cursor MyApp
```
Cursor ile İlk Ekran
Cursor'a şunu yazın:
> "Expo Router ile bir todo uygulaması yap. NativeWind ile dark mode destekli tasarım. Ana ekranda todo listesi, alt tab'da ekle butonu, profil sekmesi. Supabase ile veri saklama."
Önemli Paketler
```bash
# NativeWind (Tailwind için)
npx expo install nativewind tailwindcss
Expo Router (navigasyon)
npx expo install expo-router
Supabase
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
```
NativeWind Kullanımı
NativeWind, Tailwind CSS sınıflarını React Native'de kullanmanızı sağlar:
```tsx
import { View, Text } from "react-native";
export function Card() {
return (
<View className="bg-white dark:bg-gray-900 rounded-2xl p-4 shadow-md">
<Text className="text-gray-900 dark:text-white font-bold text-lg">
Başlık
</Text>
<Text className="text-gray-500 dark:text-gray-400 mt-2">
Açıklama metni
</Text>
</View>
);
}
```
Expo Router ile Navigasyon
```
app/
_layout.tsx → Root layout
(tabs)/
_layout.tsx → Tab bar
index.tsx → Ana ekran
profile.tsx → Profil
todo/
[id].tsx → Detay sayfası
```
Cursor'a şunu sorun: "Expo Router ile bottom tab navigasyonu ekle. Anasayfa, Keşfet ve Profil sekmeleri olsun. Her sekme için ikon ekle."
App Store'a Çıkış
EAS Build Kurulumu
```bash
npm install -g eas-cli
eas login
eas build:configure
```
iOS Build (Mac gerekmez!)
```bash
eas build --platform ios
```
EAS Cloud'da derleme yapılır, siz sadece beklersiniz.
Android Build
```bash
eas build --platform android
```
Yaygın Sorunlar ve Çözümler
Metro bundler hata veriyor:
```bash
npx expo start --clear
```
iOS simülatörde açılmıyor:
> Cursor'a: "Bu hatayı çöz: [hata metni]"
NativeWind stilleri çalışmıyor:
> "babel.config.js ve tailwind.config.js dosyalarını NativeWind için güncelle"
Gerçek Dünya Örnekleri
Cursor + Expo ile 1 haftada çıkarılan uygulamalar:
- Restoran menü uygulaması: QR kod ile masaya gel, menüyü gör, sipariş ver
- Fatura takip: Müşteri bazlı fatura oluştur, PDF gönder
- Spor takip: Antrenman logu, ilerleme grafikleri
- Araç kiralama: Araç listesi, rezervasyon, ödeme
Sonuç
React Native + Expo + Cursor kombinasyonu, mobil uygulama geliştirmeyi dramatik biçimde hızlandırıyor. Ayda 2-3 uygulama çıkarmak artık tek bir geliştirici için mümkün. App Store'da Türkçe içerikli uygulamalar hâlâ büyük fırsat.