SafeAreaView — ano ito, layout na may Safe Area sa React Native

Ano ang SafeAreaView?

SafeAreaView — React Native component na awtomatikong nagdaragdag ng panloob na margin (padding) upang ang nilalaman ay hindi matakpan ng mga elemento ng system interface: status bar, Notch, Dynamic Island at system navigation panel. Lumitaw ang component sa React Native 0.50 para sa iOS at kalaunan ay pinalawak para sa Android.

Sa iOS ginagamit ng SafeAreaView ang native na UIView.safeAreaInsets, na lumitaw sa iOS 11 (2017). Sa Android isinasaalang-alang ng component ang WindowInsets — mga system margin na magagamit mula sa Android 5.0 (API 21). Ayon sa data ng Apple (2026), 92% ng mga aktibong iPhone ay may display na may notch o Dynamic Island.

Bakit kailangan ang Safe Area

Ang konsepto ng Safe Area — bahagi ng mga rekomendasyon ng Apple HIG (Human Interface Guidelines). Bago ang iPhone X (2017) ang buong espasyo ng screen ay ligtas. Sa pagdating ng Notch, tinukoy ng Apple ang mga lugar kung saan hindi dapat ilagay ang nilalaman: notch ng camera, indicator ng oras at baterya, home indicator. Ipinakilala ng Android ang isang katulad na konsepto sa pagdating ng mga display na may notch noong 2018.

Paano gumagana ang Safe Area sa iOS at Android

Sa iOS binabasa ng SafeAreaView ang safeAreaInsets mula sa native na layout-guide. Ang margin sa itaas ay may kasamang taas ng status bar (karaniwang 44 o 50 puntos para sa iPhone na may Notch). Margin sa ibaba — 34 puntos para sa Home Indicator. Gumagamit ang Android ng WindowInsets — margin sa itaas para sa status bar at margin sa ibaba para sa system navigation.

Mahalaga: Awtomatikong inilalapat ng SafeAreaView ang padding, ngunit para lamang sa root container. Ang mga nested component ay hindi nakakakuha ng proteksyon — bawat screen ay dapat may sariling SafeAreaView. Para sa mga modal window at BottomSheet, isaalang-alang ang mga margin nang hiwalay.

Notch, Dynamic Island at mga panel ng system

Notch — hardware notch sa itaas na bahagi ng screen na naglalaman ng camera at mga sensor. Lumitaw sa iPhone X (2017). Dynamic Island — software-hardware na lugar ng iPhone 14 Pro at mas bago na pumapalit sa Notch ng isang interactive na elemento. Pareho ay nangangailangan ng margin sa itaas na 50-56 pt.

Sa Android ang mga notch ay may iba't ibang hugis: patak ng luha, butas sa sulok (punch-hole), strip sa ilalim ng camera. SafeAreaView sa Android ay gumagamit ng WindowInsets na isinasaalang-alang ang hugis ng notch. Para sa mga application sa landscape na oryentasyon, idinaragdag ang mga side margin upang hindi matakpan ang nilalaman ng mga elemento ng system.

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>
);

Ang Edge-to-edge na diskarte (Android 15+) ay nagrerekomenda ng pagguhit ng nilalaman sa ilalim ng mga panel ng system, ngunit isinasaalang-alang ang mga margin para sa mga interactive na elemento. Tumutulong ang SafeAreaView na mapanatili ang balanseng ito: ang background ay iginuhit sa ilalim ng mga panel, ang mga button at text ay nasa ligtas na zone.

Paggamit at mga alternatibo ng SafeAreaView

SafeAreaView — ang pinakasimpleng paraan upang protektahan ang nilalaman, ngunit hindi palaging nababaluktot. Inilalapat ng component ang parehong margin sa lahat ng panig, na hindi maginhawa kapag kailangan ang iba't ibang padding para sa iba't ibang gilid. Halimbawa, ang mga side margin ay maaaring hindi kailangan, at ang margin sa ibaba ay para lamang sa isang button.

Mga pangunahing alternatibo: useSafeAreaInsets mula sa react-native-safe-area-context (pinaka-flexible na solusyon), StatusBar.currentHeight sa Android, Platform.OS na may manu-manong pagsusuri ng modelo ng device. Para sa mga kumplikadong kaso, gamitin ang kumbinasyon ng SafeAreaView para sa pangkalahatang container at useSafeAreaInsets para sa mga indibidwal na elemento.

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

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

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

Ang library na react-native-safe-area-context — de facto na pamantayan para sa pagtatrabaho sa Safe Area sa React Native. Ito ay sinusuportahan ng Expo, React Navigation at karamihan sa mga UI kit. Nagbibigay ito ng parehong hook at Consumer component para sa functional at class-based approach.

react-native-safe-area-context para sa buong kontrol

react-native-safe-area-context — library na nagbibigay ng mas nababaluktot na API kaysa sa built-in na SafeAreaView. Ang pangunahing bentahe — access sa mga indibidwal na halaga ng margin (top, bottom, left, right) sa pamamagitan ng useSafeAreaInsets hook, na nagpapahintulot sa selective na paglalapat.

Nagbibigay din ang library ng SafeAreaProvider — isang component na sapilitan sa pinakamataas na antas ng application. Nag-subscribe ito sa mga pagbabago sa system margin sa pag-ikot ng screen o pagbukas ng keyboard. Ginagamit ng React Navigation ang library na ito bilang default.

SafeAreaView mula sa react-native-safe-area-context ay naiiba sa built-in: gumagana ito sa mas maraming device at sumusuporta sa animation ng pagbabago ng margin. Para sa bagong proyekto, inirerekomenda na i-install ang library na ito bilang dependency at gamitin ang SafeAreaView nito sa halip na ang built-in.

Mga karaniwang pagkakamali sa pagtatrabaho sa SafeAreaView

SafeAreaView ay madalas na ginagamit nang hindi tama. Unang pagkakamali — pagbabalot ng bawat component sa SafeAreaView, na lumilikha ng dobleng margin. Panuntunan: isang SafeAreaView bawat root View ng screen. Ang mga nested component ay nagmamana ng margin sa pamamagitan ng Flex layout.

Pangalawang pagkakamali — pagbalewala sa Android. Sa Android ginagamit ng SafeAreaView ang WindowInsets, na maaaring mag-iba sa iba't ibang bersyon ng OS. Sa Android 15+ ang mga system panel ay maaaring transparent at nagbabago ang mga margin. Palaging subukan ang SafeAreaView sa totoong device, hindi lamang sa emulator.

Pangatlong pagkakamali — hard-coded na padding. Huwag kailanman gumamit ng Platform.OS === 'ios' ? 44 : 24 — ang mga halaga ng margin ay nagbabago sa pagitan ng mga modelo at bersyon ng OS. Palaging gumamit ng system API: safeAreaInsets o useSafeAreaInsets. Ang Dynamic Island sa iPhone 15 Pro ay may iba't ibang margin kaysa sa Notch sa iPhone X.