SafeAreaView — nedir, React Native’de Safe Area ile düzen

SafeAreaView Nedir?

SafeAreaView, içeriğin sistem arayüz öğeleri (durum çubuğu, Notch, Dynamic Island ve sistem navigasyon çubuğu) tarafından maskelenmemesi için otomatik olarak iç dolgu ekleyen bir React Native bileşenidir. Bileşen, React Native 0.50'de iOS için ortaya çıktı ve daha sonra Android için genişletildi.

iOS'ta SafeAreaView, iOS 11'de (2017) tanıtılan yerel UIView.safeAreaInsets'i kullanır. Android'de bileşen, Android 5.0'dan (API 21) itibaren kullanılabilen WindowInsets — sistem insets'lerini dikkate alır. Apple'a (2026) göre aktif iPhone'ların %92'si çentikli veya Dynamic Island'lı ekrana sahiptir.

Safe Area Neden Gereklidir

Safe Area kavramı, Apple HIG (Human Interface Guidelines) önerilerinin bir parçasıdır. iPhone X'ten (2017) önce ekranın tamamı güvenliydi. Notch'un gelişiyle Apple, içeriğin yerleştirilmemesi gereken alanları tanımladı: kamera kesiği, saat ve pil göstergesi, ana sayfa göstergesi. Android, 2018'de çentikli ekranların ortaya çıkmasıyla benzer bir kavramı uygulamaya koydu.

iOS ve Android’de Safe Area Nasıl Çalışır

iOS'ta SafeAreaView, yerel düzen kılavuzundan safeAreaInsets'i okur. Üst insets, durum çubuğu yüksekliğini içerir (genellikle Notch'lu iPhone'lar için 44 veya 50 punto). Alt insets, Ana Sayfa Göstergesi için 34 puntodur. Android, WindowInsets — durum çubuğu için üst insets ve sistem navigasyonu için alt insets kullanır.

Önemli: SafeAreaView otomatik olarak dolgu uygular, ancak yalnızca kök kapsayıcı için. İç içe bileşenler koruma almaz — her ekranın kendi SafeAreaView'i olmalıdır. Modal pencereler ve BottomSheet için insets'leri ayrı ayrı dikkate alın.

Notch, Dynamic Island ve Sistem Çubukları

Notch, ekranın üst kısmında kamera ve sensörleri içeren donanımsal bir kesiktir. iPhone X'te (2017) ortaya çıktı. Dynamic Island, iPhone 14 Pro ve sonrasının bir yazılım-donanım alanıdır ve Notch'u etkileşimli bir öğeyle değiştirir. Her ikisi de 50-56 pt'lik bir üst insets gerektirir.

Android'de çentikler farklı şekillerde gelir: damla, punch-hole, kamera altı şeridi. Android'de SafeAreaView, çentik şeklini dikkate alan WindowInsets kullanır. Yatay yönlendirmedeki uygulamalar için içeriğin sistem öğeleriyle çakışmasını önlemek için yan insets'ler eklenir.

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

Edge-to-edge yaklaşımı (Android 15+), içeriğin sistem çubuklarının altına çizilmesini önerir, ancak etkileşimli öğeler için insets'leri dikkate alır. SafeAreaView bu dengeyi korumaya yardımcı olur: arka plan çubukların altına çizilir, düğmeler ve metin güvenli bölgede kalır.

SafeAreaView Kullanımı ve Alternatifleri

SafeAreaView, içeriği korumanın en basit yoludur, ancak her zaman esnek değildir. Bileşen tüm kenarlara aynı dolguyu uygular; bu, farklı kenarlar için farklı dolgu gerektiğinde kullanışsızdır. Örneğin, yan dolgu gereksiz olabilirken, alt dolgu yalnızca bir düğme için gerekli olabilir.

Ana alternatifler: react-native-safe-area-context'ten useSafeAreaInsets (en esnek çözüm), Android'de StatusBar.currentHeight, manuel cihaz modeli kontrolüyle Platform.OS. Karmaşık durumlar için genel kapsayıcıda SafeAreaView ve bireysel öğelerde useSafeAreaInsets kombinasyonunu kullanın.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

react-native-safe-area-context kütüphanesi, React Native'de Safe Area ile çalışmak için fiili standarttır. Expo, React Navigation ve çoğu UI kiti tarafından desteklenir. İşlevsel ve sınıf tabanlı yaklaşımlar için hem bir hook hem de bir Consumer bileşeni sağlar.

Tam Kontrol İçin react-native-safe-area-context

react-native-safe-area-context, yerleşik SafeAreaView'den daha esnek bir API sağlayan bir kütüphanedir. Ana avantajı, useSafeAreaInsets hook'u aracılığıyla bireysel insets değerlerine (top, bottom, left, right) erişim sağlayarak insets'lerin seçici olarak uygulanmasına olanak tanımasıdır.

Kütüphane ayrıca SafeAreaProvider — uygulamanın en üst seviyesinde zorunlu olan bir bileşeni sağlar. Ekran döndürüldüğünde veya klavye açıldığında sistem insets değişikliklerine abone olur. React Navigation varsayılan olarak bu kütüphaneyi kullanır.

react-native-safe-area-context'ten SafeAreaView, yerleşik olandan farklıdır: daha fazla cihazda çalışır ve insets değişimi animasyonunu destekler. Yeni projeler için bu kütüphanenin bağımlılık olarak kurulması ve yerleşik yerine onun SafeAreaView'inin kullanılması önerilir.

SafeAreaView ile Çalışırken Sık Yapılan Hatalar

SafeAreaView genellikle yanlış kullanılır. İlk hata, her bileşeni SafeAreaView ile sarmaktır ve bu çift dolgu oluşturur. Kural: ekranın kök View'i başına bir SafeAreaView. İç içe bileşenler, Flex düzeni aracılığıyla insets'leri devralır.

İkinci hata Android'i göz ardı etmektir. Android'de SafeAreaView, işletim sistemi sürümleri arasında farklılık gösterebilen WindowInsets kullanır. Android 15+'ta sistem çubukları şeffaf olabilir ve insets'ler değişir. SafeAreaView'i her zaman yalnızca öykünücüde değil, gerçek cihazlarda test edin.

Üçüncü hata sabit kodlanmış dolgudur. Asla Platform.OS === 'ios' ? 44 : 24 kullanmayın — insets değerleri modeller ve işletim sistemi sürümleri arasında değişir. Her zaman sistem API'lerini kullanın: safeAreaInsets veya useSafeAreaInsets. iPhone 15 Pro'daki Dynamic Island, iPhone X'teki Notch'tan farklı insets'lere sahiptir.