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

Responsive ve Tablet Desteği

hooks/useResponsive.ts — Tüm responsive kararlar için kullanılır.

ResponsiveInfo

{
  isTablet: boolean,      // iPad/tablet tespiti
  isLandscape: boolean,   // Yatay mod
  width: number,
  height: number,
  isIOS: boolean,
  isAndroid: boolean,
  breakpoint: 'phone' | 'tablet'
}

Tablet Tespiti Algoritması

const isTablet = 
  minDimension >= 768 || 
  (minDimension >= 600 && maxDimension >= 1024);

iPhone Max gibi büyük telefonlar tablet değil — minimum boyut 768px veya 600+1024 koşulu sağlanmalı.

Dimensions.addEventListener('change', ...) ile döndürme durumunda güncellenir.

Kullanım Pattern

const { isTablet, isLandscape, width, isIOS } = useResponsive();
 
// Tab bar yüksekliği
height: isTablet ? TAB_DIMENSIONS.HEIGHT * 1.5 : TAB_DIMENSIONS.HEIGHT
 
// Spacing
padding: isTablet ? SPACING.LG * 2 : SPACING.LG

responsive.select() Utility

import { responsive } from '@/hooks/useResponsive';
 
const fontSize = responsive.select({
  phone: FONT_SIZES.MD,
  tablet: FONT_SIZES.LG
}, isTablet);

Dimension Change

Uygulama yatay/dikey döndürüldüğünde useResponsive otomatik güncellenir. Orientation değişimine subscribe eden tüm bileşenler re-render olur.

Related

• boyut-ve-spacing-sistemi — tablet-aware spacing değerleri
• tab-bar-ve-navigasyon-detaylari — tab bar tablet desteği