opencode, terminalde proje klasöründe opencode komutuyla başlatılan bir kodlama ajanıdır. React Native projesinde doğru AGENTS.md ve küçük adımlı çalışma döngüsüyle ekran, navigasyon, native modül ve test değişikliklerini planlayıp uygulayabilirsiniz. Bu rehberde Expo ve bare workflow’a uygun pratik kurulum ve kullanım adımları var; opencode hakkında genel kullanım için opencode nasıl kullanılır? Adım adım rehber sayfasına da bakabilirsiniz.
opencode neden React Native işlerine uygun?
React Native projeleri genellikle üç ayrı katmanda hata üretir: JavaScript/TypeScript, Metro/Babel yapılandırması ve iOS/Android native tarafı. opencode proje klasörünün tamamını gördüğü için package.json, app.json, babel.config.js, tsconfig.json, jest.config.js ve ios/android klasörlerini aynı bağlamda değerlendirir. Bir hata oluştuğunda npx tsc --noEmit, npm test, npx expo start gibi komutları çalıştırıp çıktıyı okuyabilir; bu da özellikle React Navigation tip hataları veya native modül bağlantı sorunları gibi çok katmanlı problemleri daraltmayı kolaylaştırır. Ayrıca AGENTS.md dosyasındaki kuralları her oturumda okuduğu için ekipten bağımsız, tutarlı bir kod stili izler. Örneğin, yeni bir ekran eklerken navigasyon tiplerini güncellemeyi unutmaz, çünkü bu kuralı dosyada görür ve uygular. opencode ile diğer CLI ajanları karşılaştırmak isterseniz opencode mu Claude Code mu? Dürüst bir karşılaştırma yazısına göz atabilirsiniz.
Projeyi ajana hazırlama: AGENTS.md
opencode, proje kökündeki AGENTS.md dosyasını talimat olarak okur. React Native projesinde bu dosyaya yalnızca genel komutlar değil, çalışma zamanı kuralları da yazılmalı: hangi workflow kullanılıyor, native klasörler elle düzenleniyor mu, test mock stratejisi ne, yeni ekran nasıl eklenir. Aşağıdaki örnek, Expo tabanlı bir proje için kısa ama yeterli bir başlangıçtır.
# AGENTS.md
## Komutlar
- Bağımlılık: npm install
- Geliştirme: npx expo start --dev-client
- Test: npm test -- --watchAll=false
- Lint: npm run lint
- Tip kontrolü: npx tsc --noEmit
## Klasör kuralları
- Ekranlar: src/screens/<Feature>/<Screen>.tsx
- Ortak bileşenler: src/components
- Navigasyon: src/navigation/RootNavigator.tsx
- API ve state: src/services, src/store
## React Native kuralları
- Expo managed workflow kullan; native klasörü elle düzenleme.
- Native modül gerekiyorsa config plugin veya prebuild sonrası değişikliği AGENTS.md'ye not et.
- Yeni ekran eklerken React Navigation tip parametrelerini güncelle.
- Testlerde @testing-library/react-native kullan; native modülleri mock'la.
- Metin daima <Text> içinde olsun; stil birleşimlerinde StyleSheet.create kullan.Bu dosyayı sade tutun; ajan, çelişkili veya çok uzun talimatlarda önemli kuralı gözden kaçırabilir. Native modül ekleyecekseniz pod install veya Gradle sync komutunu kendiniz çalıştırmak istediğinizi AGENTS.md’ye açıkça yazın; böylece ajan yalnızca gerekli değişiklikleri önerir. Ayrıca, projenin platforma özel dosyaları (Button.ios.tsx, Button.android.tsx) nasıl yöneteceğini de belirtebilirsiniz; örneğin, her iki dosyada da aynı mantığın korunmasını isteyebilirsiniz. AGENTS.md statik değildir; yeni bir kural keşfettiğinizde dosyayı güncelleyin, böylece ajan sonraki oturumlarda da aynı hatayı yapmaz.
Çalışma döngüsü: plan, küçük adım, test, diff
opencode ile React Native’de en verimli döngü şöyledir: önce ajandan dosya düzeyinde plan isteyin, sonra tek bir ekran veya tek bir hata için küçük bir diff üretmesini söyleyin, ardından test ve tip kontrolünü çalıştırın, son olarak git diff ile değişiklikleri inceleyin. Native tarafı içeren bir değişiklikte plana pod install veya Gradle sync adımını da ekleyin. Her turda tek bir sorumluluk vermek, Metro önbelleği veya native bağlantı sorunlarını ayıklarken hayat kurtarır. Ajan çok geniş bir değişiklik yaparsa geri almak zorlaşır; bu yüzden “bir ekran ekle” yerine “RootNavigator’a Profile rotasını ekle, sonra Profile bileşenini oluştur” gibi adım adım ilerleyin. Aşağıdaki promptlar tipik React Native işleri için başlangıç noktasıdır:
- Mevcut navigasyon yapısını incele; ‘Profil’ ekranının eklenmesi için değişecek dosyaları sırayla listele, kod yazma.
- RootNavigator.tsx içindeki ParamList’e
Profile: { userId: string }ekle, ardından Profile ekranını oluştur ve geri butonunu bağla. - Jest şu hatayı veriyor:
Unable to find node on an unmounted component. Yalnızca Profile.test.tsx içindeki temizleme mantığını düzelt, bileşeni değiştirme. - src/services/api.ts içindeki hata yönetimini
ApiErrorsınıfıyla refactor et; her adımdan sonranpx tsc --noEmitvenpm test -- --watchAll=falseçalıştırıp özet çıkar. - Bu bileşende inline style’ları StyleSheet.create içine taşı; dokunmadığın dosyaları diff’te gösterme.
Bu döngüyü her oturumda tekrarlayın. Ajan bazen ikinci veya üçüncü adımda context’i kaybedebilir; o yüzden her yeni promptta önceki adımın özetini vermek faydalıdır.
opencode’un iyi yaptığı işler ve dikkat edilecek yerler
opencode özellikle tip güvenliği, navigasyon ve test tarafında rahat çalışır; buna karşılık native derleme adımları ve platforma özel dosyalarda daha sıkı gözetim gerekir. Aşağıdaki tablo, hangi katmanda ne bekleyeceğinizi özetler.
| Katman | opencode’un güçlü olduğu işler | Dikkat edilecekler |
|---|---|---|
| TypeScript + bileşenler | props/state düzenleme, hook geçişleri, stil taşıma | any kaçışları, StyleProp<T> yerine genel tip kullanımı |
| React Navigation | ParamList tipi, yeni ekran, deep link yapılandırması | Tip güncellemesi unutulursa navigate hataları çalışma zamanında çıkar |
| Metro/Babel | alias, env değişkenleri, plugin ekleme | Önbellek sorunları npx expo start --clear gerektirebilir |
| Jest | mock’lar, async test, bekleme kalıpları | Native modül mock’u atlanırsa testler yanıltıcı geçebilir |
| Native modüller | mevcut köprüyü JS tarafında bağlama | pod install, Gradle sync, platform dosya senkronu |
Özellikle Expo managed workflow kullanıyorsanız, ajanın ios/ ve android/ klasörlerinde doğrudan değişiklik yapmasına izin vermeyin; bu dosyalar prebuild ile yeniden üretilebilir. Native değişiklik gerektiren bir bağımlılık eklerken önce npx expo install kullanmasını, sonra pod install komutunu size bırakmasını isteyin. React Native’in platforma özel dosya çözümlemesi nedeniyle Button.ios.tsx ve Button.android.tsx dosyaları arasındaki farkı ajan bazen karıştırabilir; diff’i bu açıdan da kontrol edin. Ayrıca, bir bileşende requireNativeComponent kullanıyorsa, ajanın bu bileşeni mock’lamadan test yazmasına engel olun; test sırasında gerçek native modül çağrısı yapılmamalı. Son olarak, Metro’nun modül çözümlemesiyle ilgili sorunlarda ajanın önerdiği çözümü hemen uygulamayın; önce npx expo start --clear ile önbelleği temizleyip tekrar denemek daha güvenlidir.
React Native’de test ve doğrulama
opencode’dan her değişiklik sonrası üç şeyi çalıştırmasını isteyin: birim testler (npm test -- --watchAll=false), tip kontrolü (npx tsc --noEmit) ve varsa lint (npm run lint). Jest testlerinde native modüller genellikle mock’lanmalıdır; AGENTS.md’ye hangi kütüphanenin kullanılacağını yazmazsanız ajan kendi seçimini yapabilir ve testler gerçek davranışı yansıtmayabilir. Örneğin, react-native-device-info veya react-native-keychain gibi modüller için jest.mock ile açık mock tanımları isteyin. Simülatörde manuel doğrulama gerektiren durumlarda ajana yalnızca kod değişikliği yapmasını, çalıştırma adımını size bırakmasını söyleyin; böylece Expo Go veya dev client üzerinde gerçek cihaz davranışını gözlemleyebilirsiniz. Ek olarak, native modül ekledikten sonra pod install veya Gradle sync sonrası ilk derlemenin başarılı olduğunu doğrulamak için ajandan npx expo run:ios veya npx expo run:android komutunun çıktısını özetlemesini isteyebilirsiniz; ancak bu komutu kendiniz çalıştırmanız daha güvenlidir çünkü uzun sürebilir ve simülatör durumuna bağlıdır.
Paralel ajanlar: AgentVera ile React Native’de iş bölümü
React Native projesinde birden fazla ajanı aynı anda çalıştırmak isterseniz AgentVera güvenli bir ortam sağlar. Her ajan kendi git worktree’sinde çalışarak dosyaları birbirinin üzerine yazmaz; otomatik kod incelemesi sayesinde bir ajan bitirdiğinde değişiklikleri ikinci bir model kontrol eder ve bulgular dosya:satır seviyesinde bağlanır. Token bütçeleri ve checkpoint özellikleri de uzun native build süreçlerinde yanlış adımı geri almayı kolaylaştırır. Detaylı araç karşılaştırması için paralel kodlama ajanları için en iyi araçlar sayfasına bakabilirsiniz.
Sonuç
opencode, React Native projesinde AGENTS.md ile yönlendirildiğinde navigasyon, tip güvenliği, test ve native modül köprüsü gibi konularda güvenilir bir yardımcıdır. Küçük adımlı döngüyü disiplinle uygular ve native komutları kendiniz çalıştırırsanız, ajanın ürettiği diff’ler hem daha güvenli hem de daha hızlı entegre olur. Paralel iş yükü için AgentVera’daki git worktree ve otomatik inceleme mekanizmaları, React Native’in çok katmanlı yapısında çakışmaları en aza indirir.