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

İçerik Ekranı — PagerView Tab Pattern

İçerikler ekranı (content.tsx) üç sekme içerir: Duyurular / Etkinlikler / Başarılar. Bu pattern diğer çok-sekmeli ekranlar için referans alınabilir.

Tab State Pattern

Her sekmenin kendi state’i ayrı saklanır:

const [tabStates, setTabStates] = useState<Record<SchoolContentType, TabState>>({
  announcements: { ...initialTabState },
  events:        { ...initialTabState },
  achievements:  { ...initialTabState }
});
 
interface TabState {
  items: SchoolContentItem[];
  isLoading: boolean;
  isLoadingMore: boolean;   // Pagination için
  currentPage: number;
  hasNextPage: boolean;
  isInitialized: boolean;   // İlk yükleme yapıldı mı?
}

isInitialized: false olan bir sekme ilk kez açıldığında veri yükler (lazy load).

PagerView + Animated Tab

• react-native-pager-view ile swipe
• useSharedValue<number>(0) ile tab pozisyon interpolation
• AnimatedTabButton aktif sekme için smooth renk geçişi (Reanimated 4)

useFocusEffect

Ekran focus’a geldiğinde veri yenileme:

useFocusEffect(useCallback(() => {
  // Her ekrana dönüşte refresh tetikle
  setRefreshTrigger(prev => prev + 1);
}, []));

Pagination

loadData(contentType, page=1, isRefresh=false):

• page=1, isRefresh=true → Pull-to-refresh
• page>1 → Infinite scroll (load more)
• isLoadingMore: true iken hasNextPage: true → Load More butonu

Filter State

statusFilter: boolean | undefined ile aktif/pasif filtre. undefined = tüm içerikler.

Related

• okul-icerikleri — içerik domain
• tab-bar-ve-navigasyon-detaylari — tab navigasyon konvansiyonları