🎹 Manuel Klavye Yönetimi Sorunlarının Düzeltilmesi - 5 Dosya

📋 Problem Özeti

Mobil uygulamada birçok sayfada hala manuel klavye yönetimi kodu bulunmakta. Bu, kullanıcı deneyimini olumsuz etkileyen gecikmeli ve doğal olmayan scroll davranışlarına neden oluyor. react-native-keyboard-controller kütüphanesi ile tutarlı bir yaklaşım benimsenmelidir.

🚨 Kritik Öncelik - Tamamen Manuel İşlemler

1. PersonalInfoSection.tsx

Dosya: /components/user-info/PersonalInfoSection.tsx
Satırlar: 67-79, 97-107, 129-140

Problemler:

• 6 farklı hardcoded scroll pozisyonu (y: 100, y: 180, y: 260, y: 280)
• setTimeout ile manuel gecikme (100ms)
• Her input için ayrı onFocus ve onSubmitEditing manuel scroll handling

Mevcut Problemli Kod:

onFocus={() => {
  setTimeout(() => {
    scrollViewRef.current?.scrollTo({ y: 100, animated: true });
  }, 100);
}}

2. BusinessInfoSection.tsx

Dosya: /components/user-info/BusinessInfoSection.tsx
Satırlar: 8, 9, 58-72, 93-96

Problemler:

• useKeyboardHandler + runOnJS kombinasyonu
• Manuel scroll pozisyonu (y: 280)
• Hibrit yaklaşım (hem keyboard-controller hem manuel scroll)

Mevcut Problemli Kod:

useKeyboardHandler({
  onEnd: () => {
    "worklet";
    runOnJS(handleScrollAfterKeyboard)();
  },
});

onFocus={() => {
  setIsNipInputFocused(true);
  scrollViewRef.current?.scrollTo({ y: 280, animated: true });
}}

⚠️ Orta Öncelik - Eski Yaklaşımlar

3. AuthScreenLayout.tsx

Dosya: /components/auth/AuthScreenLayout.tsx
Satırlar: 9, 48-54

Problem: React Native'in eski KeyboardAvoidingView kullanımı

4. OrderNotes.tsx

Dosya: /components/checkout/summary/OrderNotes.tsx
Satırlar: 15-17, 54-55

Problem: Parent component'e onFocus/onBlur callback'leri (manuel handling parent'ta olabilir)

📚 Düşük Risk - Kısmen Güncel

5. user-info.tsx

Dosya: /app/(auth)/user-info.tsx
Satırlar: 18-20, 90, 152

Not: Zaten KeyboardAwareScrollView kullanıyor ama child component'lerde manuel işlemler var

🛠️ Çözüm Yaklaşımı

Adım 1: Kritik Dosyaları Dönüştür

Her dosya için aşağıdaki pattern'i uygula:

1. Manuel scroll kodlarını kaldır:

```typescript
// ❌ Kaldırılacak
const handleFocus = (y: number) => {
scrollViewRef.current?.scrollTo({ y, animated: true });
};

// ❌ Kaldırılacak
useKeyboardHandler({
onEnd: () => {
"worklet";
runOnJS(handleScrollAfterKeyboard)();
},
});
```

1. KeyboardAwareScrollView config ekle:

``typescript
// ✅ Eklenecek
<KeyboardAwareScrollView
style={{ flex: 1 }}
keyboardShouldPersistTaps="handled"
bottomOffset={200}
extraKeyboardSpace={0}
>
``

1. onFocus handler'larını temizle:

```typescript
// ❌ Önce: Manuel scroll
onFocus={() => handleFocus(180)}

// ✅ Sonra: Sadece state management
onFocus={() => setFieldFocused(true)}
```

Adım 2: Test Pattern'leri

Her dönüştürülen dosya için:

• [ ] Klavye açılınca otomatik scroll çalışıyor
• [ ] Footer buton klavyenin üstünde kalıyor
• [ ] Gereksiz boşluk yok
• [ ] Input'lar klavye ile örtülmüyor

Adım 3: Tutarlı Config

Tüm dosyalarda aynı config kullan:

// Çoğu form için golden formula
bottomOffset={200}
extraKeyboardSpace={0}
contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 20, paddingBottom: 0 }}

📝 İlerlemeli Yaklaşım

1. Önce PersonalInfoSection.tsx (en kritik - 6 hardcoded pozisyon)
2. Sonra BusinessInfoSection.tsx (hibrit yaklaşım düzeltme)
3. Ardından AuthScreenLayout.tsx (KeyboardAvoidingView dönüşümü)
4. OrderNotes.tsx (parent dependency temizleme)
5. Son user-info.tsx (child component'leri düzelt)

🎯 Beklenen Sonuç

• ✅ Tüm keyboard handling react-native-keyboard-controller ile
• ✅ Tutarlı ve native-like scroll davranışı
• ✅ Manuel scroll kodu yok
• ✅ Daha az karmaşık ve maintainable kod
• ✅ Kullanıcı deneyimi iyileştirmesi

---
Tahmini Süre: 2-3 saat (dosya başına 30-40 dakika)
Zorluk: Orta (pattern'ler hazır, config'ler test edildi)