Kritik Bileşen Pattern Özeti (COMPONENT_PATTERNS.md)

Proje: Okul B2B App · Hub: Okul B2B App — Conventions

Kritik Bileşen Pattern Özeti

docs/development/COMPONENT_PATTERNS.md özeti.

1. Gallery Sortable Grid

<Sortable.Grid customHandle={true}>  // customHandle ZORUNLU
  <Sortable.Handle mode="fixed">     // Sabit elemanlar
    <AddPhotoCard />
  </Sortable.Handle>
  <Sortable.Handle mode="draggable"> // Sürüklenebilir
    <PhotoCard />
  </Sortable.Handle>
</Sortable.Grid>

customHandle={false} → Handle’lar çalışmaz, sürükleme bozulur.

2. Modal Bottom Button (Keyboard-aware)

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  keyboardVerticalOffset={5}
  style={{ flex: 1 }}
>
  <ScrollView contentContainerStyle={{ paddingBottom: 120 }}>
    {/* Form fields */}
  </ScrollView>
  <View style={{ paddingVertical: 5, paddingBottom: 10 }}>
    <Button />  {/* KAV içinde olmalı! */}
  </View>
</KeyboardAvoidingView>

Buton KeyboardAvoidingView içinde olmalı, dışında değil.

3. Platform-specific Modal İçin StatusBar

Android modal’larında StatusBar.setBarStyle() gerekebilir.

Related

• react-native-sortables-galeri — sortable karar
• photo-grid-yapisi — grid uygulama
• lead-detay-modal-yapisi — modal KeyboardAvoidingView