SafeAreaView — ce este, aspectul cu Safe Area în React Native

Ce este SafeAreaView?

SafeAreaView — componentă React Native care adaugă automat margini interioare (padding) pentru ca conținutul să nu fie acoperit de elementele de sistem ale interfeței: bara de stare, Notch, Dynamic Island și panoul de navigare al sistemului. Componenta a apărut în React Native 0.50 pentru iOS și mai târziu a fost extinsă pentru Android.

Pe iOS, SafeAreaView utilizează UIView.safeAreaInsets nativ, apărut în iOS 11 (2017). Pe Android, componenta ține cont de WindowInsets — margini de sistem disponibile din Android 5.0 (API 21). Conform datelor Apple (2026), 92% din iPhone-urile active au ecran cu decupaj sau Dynamic Island.

De ce este necesară Safe Area

Conceptul Safe Area — parte din recomandările Apple HIG (Human Interface Guidelines). Înainte de iPhone X (2017) întregul spațiu al ecranului era sigur. Odată cu apariția Notch, Apple a definit zonele în care conținutul nu ar trebui să fie amplasat: decupajul camerei, indicatorul de timp și baterie, indicatorul de acasă. Android a introdus un concept similar odată cu apariția ecranelor cu decupaj în 2018.

Cum funcționează Safe Area pe iOS și Android

Pe iOS SafeAreaView citește safeAreaInsets din layout-guide nativ. Marginea superioară include înălțimea barei de stare (de obicei 44 sau 50 de puncte pentru iPhone cu Notch). Marginea inferioară — 34 de puncte pentru indicatorul de acasă (Home Indicator). Android utilizează WindowInsets — marginea superioară pentru bara de stare și cea inferioară pentru navigarea de sistem.

Important: SafeAreaView aplică padding automat, dar numai pentru containerul rădăcină. Componentele imbricate nu primesc protecție — fiecare ecran trebuie să aibă propriul SafeAreaView. Pentru ferestre modale și BottomSheet, luați în considerare marginile separat.

Notch, Dynamic Island și panourile de sistem

Notch — decupaj hardware în partea superioară a ecranului care conține camera și senzorii. A apărut în iPhone X (2017). Dynamic Island — zonă software-hardware a iPhone 14 Pro și mai noi care înlocuiește Notch cu un element interactiv. Ambele necesită o margine superioară de 50-56 pt.

Pe Android, decupajele au forme diferite: în formă de lacrimă, gaură în colț (punch-hole), bandă sub cameră. SafeAreaView pe Android utilizează WindowInsets care țin cont de forma decupajului. Pentru aplicațiile în orientare peisaj, se adaugă margini laterale pentru ca conținutul să nu fie acoperit de elementele de sistem.

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

Abordarea Edge-to-edge (Android 15+) recomandă desenarea conținutului sub panourile de sistem, dar cu luarea în considerare a marginilor pentru elementele interactive. SafeAreaView ajută la menținerea acestui echilibru: fundalul se desenează sub panouri, iar butoanele și textul — în zona sigură.

Utilizarea și alternativele SafeAreaView

SafeAreaView — cel mai simplu mod de a proteja conținutul, dar nu întotdeauna flexibil. Componenta aplică aceleași margini tuturor părților, ceea ce este incomod când este nevoie de padding diferit pentru margini diferite. De exemplu, marginile laterale pot fi inutile, iar cea inferioară — doar pentru un buton.

Principalele alternative: useSafeAreaInsets din react-native-safe-area-context (cea mai flexibilă soluție), StatusBar.currentHeight pe Android, Platform.OS cu verificare manuală a modelului dispozitivului. Pentru cazuri complexe, utilizați combinația SafeAreaView pentru containerul general și useSafeAreaInsets pentru elemente individuale.

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

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

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

Biblioteca react-native-safe-area-context — standardul de facto pentru lucrul cu Safe Area în React Native. Este suportată de Expo, React Navigation și majoritatea kit-urilor UI. Oferă atât hook, cât și componentă Consumer pentru abordări funcționale și de clasă.

react-native-safe-area-context pentru control complet

react-native-safe-area-context — bibliotecă care oferă o API mai flexibilă decât SafeAreaView încorporat. Principalul avantaj — accesul la valori individuale ale marginilor (top, bottom, left, right) prin hook-ul useSafeAreaInsets, ceea ce permite aplicarea lor selectivă.

Biblioteca oferă, de asemenea, SafeAreaProvider — o componentă obligatorie la nivelul superior al aplicației. Aceasta se abonează la modificările marginilor de sistem la rotirea ecranului sau deschiderea tastaturii. React Navigation utilizează această bibliotecă în mod implicit.

SafeAreaView din react-native-safe-area-context diferă de cel încorporat: funcționează pe mai multe dispozitive și suportă animația modificării marginilor. Pentru un proiect nou, se recomandă instalarea acestei biblioteci ca dependență și utilizarea SafeAreaView-ului său în locul celui încorporat.

Erori tipice la lucrul cu SafeAreaView

SafeAreaView este adesea utilizat incorect. Prima eroare — înfășurarea fiecărei componente în SafeAreaView, ceea ce creează margini duble. Regula: un SafeAreaView pe View-ul rădăcină al ecranului. Componentele imbricate moștenesc marginile prin aspectul Flex.

A doua eroare — ignorarea Android. Pe Android SafeAreaView utilizează WindowInsets, care pot diferi pe diferite versiuni de sistem. Pe Android 15+ panourile de sistem pot fi transparente, iar marginile se modifică. Testați întotdeauna SafeAreaView pe dispozitive reale, nu doar în emulator.

A treia eroare — padding-uri fixate rigid. Nu utilizați niciodată Platform.OS === 'ios' ? 44 : 24 — valorile marginilor se modifică între modele și versiuni de sistem. Utilizați întotdeauna API-urile de sistem: safeAreaInsets sau useSafeAreaInsets. Dynamic Island pe iPhone 15 Pro are margini diferite față de Notch pe iPhone X.