SafeAreaView — шта је то, распоред са Safe Area у React Native

Шта је SafeAreaView?

SafeAreaView — React Native компонента која аутоматски додаје унутрашње размаке (padding) како садржај не би био прекривен системским елементима интерфејса: статусном траком, Notch-ом, Dynamic Island-ом и системским навигационим панелом. Компонента се појавила у React Native 0.50 за iOS и касније је проширена за Android.

На iOS-у SafeAreaView користи изворни UIView.safeAreaInsets, који се појавио у iOS 11 (2017). На Android-у компонента узима у обзир WindowInsets — системске размаке доступне од Android 5.0 (API 21). Према Apple подацима (2026), 92% активних iPhone-а има екран са изрезом или Dynamic Island-ом.

Зашто је Safe Area потребна

Концепт Safe Area — део Apple HIG (Human Interface Guidelines) препорука. Пре iPhone X (2017) целокупан простор екрана је био безбедан. Са појавом Notch-а, Apple је дефинисао области где садржај не треба да се налази: изрез камере, индикатор времена и батерије, почетни индикатор. Android је увео аналоган концепт са појавом екрана са изрезом 2018. године.

Како Safe Area ради на iOS и Android

На iOS-у SafeAreaView чита safeAreaInsets из изворног layout-guide-а. Горњи размак укључује висину статусне траке (обично 44 или 50 pt за iPhone са Notch-ом). Доњи размак — 34 pt за почетни индикатор (Home Indicator). Android користи WindowInsets — горњи размак за статусну траку и доњи за системску навигацију.

Важно: SafeAreaView примењује padding аутоматски, али само за корени контејнер. Угнежђене компоненте не добијају заштиту — сваки екран треба да има свој SafeAreaView. За модалне прозоре и BottomSheet узмите у обзир размаке одвојено.

Notch, Dynamic Island и системске панеле

Notch — хардверски изрез у горњем делу екрана који садржи камеру и сензоре. Појавио се у iPhone X (2017). Dynamic Island — софтверско-хардверска област iPhone 14 Pro и новијих која замењује Notch интерактивним елементом. Оба захтевају горњи размак од 50-56 pt.

На Android-у изрези имају различите облике: капљичасти, рупа у углу (punch-hole), трака испод камере. SafeAreaView на Android-у користи WindowInsets који узимају у обзир облик изреза. За апликације у пејзажној оријентацији додају се бочни размаци како садржај не би био прекривен системским елементима.

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 приступ (Android 15+) препоручује цртање садржаја испод системских панела, али са уважавањем размака за интерактивне елементе. SafeAreaView помаже у одржавању ове равнотеже: позадина се црта испод панела, а дугмад и текст — у безбедној зони.

Коришћење и алтернативе SafeAreaView

SafeAreaView — најједноставнији начин заштите садржаја, али не увек флексибилан. Компонента примењује исте размаке на све стране, што је непрактично када је потребан различит padding за различите ивице. На пример, бочни размаци могу бити непотребни, а доњи — само за дугме.

Главне алтернативе: useSafeAreaInsets из react-native-safe-area-context (најфлексибилније решење), StatusBar.currentHeight на Android-у, Platform.OS са ручном провером модела уређаја. За сложене случајеве користите комбинацију SafeAreaView за општи контејнер и useSafeAreaInsets за појединачне елементе.

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 — дефакто стандард за рад са Safe Area у React Native. Подржана је од Expo, React Navigation и већине UI комплета. Пружа и hook и Consumer компоненту за функционални и класни приступ.

react-native-safe-area-context за потпуну контролу

react-native-safe-area-context — библиотека која пружа флексибилнији API од уграђеног SafeAreaView-а. Главна предност — приступ појединачним вредностима размака (top, bottom, left, right) преко hook-а useSafeAreaInsets, што омогућава њихову селективну примену.

Библиотека такође пружа SafeAreaProvider — компоненту која је обавезна на врху апликације. Она се претплаћује на промене системских размака при ротацији екрана или отварању тастатуре. React Navigation подразумевано користи ову библиотеку.

SafeAreaView из react-native-safe-area-context се разликује од уграђеног: ради на већем броју уређаја и подржава анимацију промене размака. За нови пројекат препоручује се инсталирање ове библиотеке као зависности и коришћење њеног SafeAreaView-а уместо уграђеног.

Типичне грешке при раду са SafeAreaView

SafeAreaView се често користи неправилно. Прва грешка — облагање сваке компоненте у SafeAreaView, што ствара двоструке размаке. Правило: један SafeAreaView на корени View екрана. Угнежђене компоненте наслеђују размаке кроз Flex распоред.

Друга грешка — игнорисање Android-а. На Android-у SafeAreaView користи WindowInsets, који могу да се разликују на различитим верзијама ОС-а. На Android 15+ системске панеле могу бити провидне, а размаци се мењају. Увек тестирајте SafeAreaView на правим уређајима, не само у емулатору.

Трећа грешка — чврсто подешен padding. Никада не користите Platform.OS === 'ios' ? 44 : 24 — вредности размака се мењају између модела и верзија ОС-а. Увек користите системске API-је: safeAreaInsets или useSafeAreaInsets. Dynamic Island на iPhone 15 Pro има другачије размаке од Notch-а на iPhone X.