# GitHub Copilot CLI ile React Native Geliştirme Rehberi

Adres: https://agentvera.dev/blog/copilot-cli-ile-react-native/ · Yayın: 2026-11-01

React Native projelerinde GitHub Copilot CLI ile çalışma düzeni: kurulum, talimat dosyası, test döngüsü, native tuzaklar ve çoklu ajan kullanımı.

**Kısaca:**

- GitHub Copilot CLI, React Native’de terminal komutlarını ve testleri sıralı çalıştırarak küçük adımlı geliştirmeyi hızlandırır.
- Proje talimatlarına Metro, Jest, TypeScript ve native kurulum komutları yazılırsa ajan daha az yanılır.
- Native modül ve cihaz doğrulaması sizde kalmalı; ajanın ürettiği diff her görev sonunda incelenmelidir.

React Native projelerinde GitHub Copilot CLI, terminalde komutları çalıştırarak, dosyaları okuyarak ve testleri koşturarak küçük değişiklikleri hızla hayata geçirmenizi sağlar. `copilot` komutuyla proje klasöründe başlatılan ajan, sizin verdiğiniz talimatlara göre plan yapar, kod yazar, testleri ve lint’i çalıştırır. Bu rehberde, React Native’e özel bir iş akışı ve dikkat edilmesi gereken noktalar ele alınmıştır.

## Neden GitHub Copilot CLI React Native işine uygun?

React Native geliştirme döngüsü, sık tekrarlanan görevlerden oluşur: ekran bileşenleri eklemek, navigasyon yapısını güncellemek, Jest testleri yazmak, Metro önbelleğini temizlemek ve native bağımlılıkları yönetmek. GitHub Copilot CLI, bu işlemleri sizin yerinize planlayıp küçük adımlara böler; her adımda `npm test`, `npx tsc --noEmit` veya `npm run lint` gibi komutları çalıştırarak geri bildirim üretir. Özellikle platform farklılıklarından kaynaklanan hataları yakalamak için ajanın proje dosyalarını gerçek zamanlı okuması büyük avantaj sağlar. Daha geniş bir bakış için [GitHub Copilot CLI](/ajanlar/copilot-cli/) sayfasına bakabilirsiniz.

## Projeyi ajana hazırlama

GitHub Copilot CLI, repo kökündeki `.github/copilot-instructions.md` veya `AGENTS.md` dosyasını otomatik okur. Bu dosyaya projeye özel komutlar, klasör düzeni ve React Native kurallarını yazmak, ajanın tahmin yürütmesini azaltır. Dosya kısa ve komutlar kesin olmalı; ajan her görev sonunda bu komutları çalıştırmaya çalışır. Aşağıdaki örnek, Expo veya bare workflow için uyarlanabilir:

```
# React Native projesi talimatları

## Komutlar
- Kurulum: `npm install` veya `yarn install`
- Test: `npm test -- --watch=false`
- Lint: `npm run lint`
- Tip kontrolü: `npx tsc --noEmit`
- Metro temizleme: `npm start -- --reset-cache`
- iOS pod kurulumu: `npx pod-install` (Expo bare veya bare workflow)
- Expo dev client: `npx expo start --dev-client`

## Klasör düzeni
- `src/` içinde component, screen, navigation, api, hooks klasörleri
- `__tests__/` dosya adına göre eşleşir
- Native klasörler: `ios/` ve `android/` sadece gerektiğinde düzenlenir

## React Native'e özel kurallar
- Platforma özel kod `Platform.OS` veya `Platform.select` ile ayrılır
- Tüm import'lar relative path ile yazılır
- Native modül eklerken hem iOS hem Android tarafını güncelle
- Metro cache sorunlarında önce `npm start -- --reset-cache` dene
- Jest testlerinde native modülleri mock'la
```

Talimat dosyasını oluştururken gereksiz uzunluktan kaçının; ajanın komutları doğru sırayla çalıştırabilmesi için net isimler kullanın. AGENTS.md gibi dosyaların yazımı hakkında daha fazla ipucu için [CLAUDE.md nasıl yazılır? AGENTS.md ve GEMINI.md rehberi](/blog/claude-md-nasil-yazilir/) rehberine göz atabilirsiniz. Ayrıca GitHub Copilot CLI’nin genel kullanımı için [GitHub Copilot CLI nasıl kullanılır? Adım adım rehber](/blog/copilot-cli-nasil-kullanilir/) adım adım rehberine bakın.

## Çalışma döngüsü

React Native projesinde verimli bir döngü şöyle kurulur: önce ajanla plan yapın, sonra küçük bir değişikliği uygulamasını isteyin, ardından test ve lint sonuçlarını inceleyin, en son diff üzerinde gözle kontrol yapın. Ajanın her adımda çalıştırdığı komutları terminalde takip edin; özellikle native taraf değişikliklerinde iOS veya Android build’inin başarılı olup olmadığını teyit edin.

- "Ürün listesi ekranındaki kart bileşenini `src/components/ProductCard.tsx` dosyasına taşı, prop tiplerini TypeScript ile tanımla ve mevcut kullanımları güncelle."
- "React Navigation stack’ine 'Profil' ekranını ekle, gerekli ekran dosyasını oluştur ve başlık ayarını route parametresine göre yap."
- "`api/fetchProducts` fonksiyonunu Jest ile test et, network isteğini `jest.mock` ile sahte veri döndür, hata durumunu da kapsa."
- "iOS tarafında pod kurulumu gerektiren `react-native-vision-camera` kütüphanesini ekle, Android manifest’e kamera iznini, iOS Info.plist’e NSCameraUsageDescription ekle ve `npx pod-install` çalıştır."
- "FlatList renderItem içinde arrow function kullanımını tespit et, `useCallback` ile optimize et ve performans testi ekle."
- "Mevcut `useAuth` hook’una giriş durumunu AsyncStorage’da saklama özelliği ekle ve ilgili testleri güncelle."
- "Uygulamanın tema yapısını `ThemeProvider` ile değiştir, tüm ekranlardaki hardcoded renkleri tema değişkenleriyle değiştir."
- "Android’de `react-native-splash-screen` kütüphanesini ekle, MainActivity ve styles.xml dosyalarını güncelle, iOS’ta LaunchScreen.storyboard’u kontrol et."

| Görev | İyi prompt |
|-------|------------|
| Ekran ekleme | "Settings ekranını oluştur, React Navigation stack’e ekle ve geri butonunu yapılandır." |
| Native modül | "react-native-ble-plx kur, Android manifest ve iOS Info.plist izinlerini ekle, pod install çalıştır." |
| Test yazma | "useAuth hook’u için Jest testleri yaz, AsyncStorage’ı mock’la." |
| Performans | "FlatList’te renderItem içinde inline fonksiyon kullanımını bul ve useCallback ile optimize et." |

Bu döngüde en önemli adım, ajanın ürettiği diff’i incelemektir. Özellikle navigation state veya platforma özel kod değişikliklerinde gözden kaçan yan etkiler olabilir. Ajan, değişiklikleri `git diff` olarak değil, kendi formatında gösterir; bu yüzden terminalde `git diff` komutunu kendiniz çalıştırıp platforma özel dosyaları (`Component.android.tsx`, `Component.ios.tsx`) ayrı ayrı kontrol edin.

## Hangi işlerde iyi, nerelerde dikkatli olmalı?

GitHub Copilot CLI, React Native’de şunlarda başarılıdır: yeni ekran ve bileşen oluşturma, mevcut kodun refactor edilmesi, Jest testlerinin yazılması veya güncellenmesi, lint hatalarının düzeltilmesi, bağımlılık eklerken ilgili import ve kullanım değişiklikleri. Ancak native modül entegrasyonlarında ve Metro yapılandırmasında dikkatli olunmalıdır. Ajan bazen iOS ve Android tarafındaki değişiklikleri eksik yapabilir, pod install’ı atlayabilir veya Android’de namespace/gradle sürüm uyumsuzluğu yaratabilir. Ayrıca RN sürümleri arasındaki farklar nedeniyle verdiği kod parçacıkları her zaman güncel olmayabilir. Bu nedenle native dosyalardaki değişiklikleri manuel olarak gözden geçirin, gerekirse cihazda test edin.

Özellikle dikkat edilmesi gereken senaryolar:
- **Android’de view manager veya native module ekleme:** Java/Kotlin dosyaları, AndroidManifest.xml ve MainApplication.java güncellenmeli; ajan bazen `new Package()` kaydını atlar.
- **iOS’ta podfile ve bridging header:** Swift tabanlı modüller için bridging header ve podfile değişiklikleri kritik; ajan `pod install` sonrası Xcode projesini güncellemeyebilir.
- **Navigation derin bağlantılar:** Linking configuration değişiklikleri URL scheme eşleşmelerini bozabilir; manuel test şart.
- **Metro config değişiklikleri:** `metro.config.js` veya `babel.config.js` değişiklikleri, özellikle monorepo veya özel çözümleyicilerde, uygulamanın başlamamasına neden olabilir.

## Test ve doğrulama

React Native projesinde test üç katmandan oluşur: birim testler (Jest), tip kontrolü (TypeScript) ve cihaz/simülatörde manuel doğrulama. Ajanı, her kod değişikliğinden sonra `npm test -- --watch=false` ve `npx tsc --noEmit` komutlarını çalıştırması için yönlendirin. Jest testleri hızlıdır ve ajanın sık yaptığı hataları yakalar; tip kontrolü ise özellikle React Navigation route parametreleri ve native modül tiplerinde faydalıdır. Ancak hiçbir CLI ajanı, uygulamanın gerçek cihazdaki davranışını göremez. Bu yüzden görsel değişiklikler, dokunma etkileşimleri ve native modül çalışmalarında simülatör veya fiziksel cihazda siz doğrulama yapmalısınız. Ajanın test sonuçlarını terminalde gösterdiğinden emin olun; gerekirse `--watch=false` bayrağıyla çalıştırın ki süreç takılmasın.

Jest yapılandırmasında `jest-expo` preset kullanıyorsanız, ajanın bunu tanıdığından emin olun; `jest.config.js` içinde `preset: 'jest-expo'` geçiyorsa native modül mock’ları otomatik yüklenir. Snapshot testleri eklerken ajanın ürettiği snapshot dosyalarını commit etmeyi unutmayın. Uygulamanın navigasyon akışını doğrulamak için `@testing-library/react-native` ile render testleri ekleyebilirsiniz; ajan bu kütüphaneyle test yazabilir. Ancak gerçek cihaz gerektiren kamera, konum, push notification gibi özelliklerde test komutlarını ajanın çalıştırmasını beklemeyin; bu testleri manuel olarak yapın.

## Birden fazla ajanı AgentVera ile çalıştırma

React Native projenizde paralel işler için AgentVera masaüstü uygulamasını kullanabilirsiniz. Her ajan ayrı bir git worktree üzerinde çalıştığı için birisi iOS native kodu güncellerken diğeri JS ekranlarını değiştirebilir; çakışma olmaz. Ajanın turu bittiğinde ikinci bir model otomatik kod incelemesi yapar ve bulguları file:line şeklinde gösterir; bu, native taraftaki hataları erken yakalar. Her turun anlık görüntüsü (checkpoint) alınır, tek tıkla geri alınabilir. Token bütçeleri ile ajanın aşırı kaynak tüketmesi engellenir. Böylece birden fazla React Native görevini güvenle paralel yürütebilirsiniz.

## Sonuç

GitHub Copilot CLI, React Native projelerinde planlama, kod üretme ve test çalıştırma döngüsünü hızlandıran güçlü bir araçtır. Başarılı kullanım, net talimat dosyaları, küçük adımlı çalışma ve her adımda diff incelemesi ile mümkündür. Native tarafta manuel doğrulamayı asla atlamayın; ajanın önerilerini kendi deneyiminizle süzün. Bu yaklaşımla React Native geliştirme süreciniz daha öngörülebilir ve verimli hale gelir.

## Sık sorulanlar

**GitHub Copilot CLI’yi React Native projesinde nasıl başlatırım?** Proje klasöründe terminalden copilot yazın. Repoda .github/copilot-instructions.md veya AGENTS.md varsa ajan bunu okur; yoksa önce oluşturup paket yöneticisi, test, lint ve native komutları ekleyin.

**Expo ve bare React Native projelerinde aynı şekilde çalışır mı?** Evet, ajan package.json ve klasör yapısına göre çalışır. Expo’da native klasörler yoksa yeni native bağımlılık için npx expo prebuild veya pod install gerekebilir; bare’de iOS/Android klasörleri doğrudan güncellenmelidir.

**Ajanın React Native’e özel hangi komutları bilmesi gerekir?** En azından npm test -- --watch=false, npx tsc --noEmit, lint komutu, npx expo start --clear, npx pod-install veya pod install. Bu komutları talimat dosyanıza yazın ki ajan iş bitirmeden önce doğrulama yapsın.

**Native modül eklerken ajan nerede hata yapabilir?** iOS ve Android tarafındaki izinleri atlayabilir, pod install’ı unutabilir veya Android gradle sürüm uyumsuzluğu yaratabilir. Bu yüzden native dosyalardaki değişiklikleri manuel kontrol edin ve cihazda test edin.

---

**AgentVera hakkında.** AgentVera, Solviera Teknoloji tarafından geliştirilen macOS, Windows ve Linux masaüstü uygulamasıdır. 18 yapay zeka kodlama ajanını (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) proje bazında, gerçek terminallerde ve kullanıcının kendi CLI kurulum ve girişleriyle yan yana çalıştırır. Ücretsiz planda sınırsız ajan vardır. İndir: https://agentvera.dev/indir/ · Fiyatlar: https://agentvera.dev/fiyatlar/