SafeAreaView — cos’è, layout con Safe Area in React Native

Cos’è SafeAreaView?

SafeAreaView è un componente React Native che aggiunge automaticamente padding interno in modo che il contenuto non venga sovrapposto dagli elementi dell’interfaccia di sistema: barra di stato, Notch, Dynamic Island e barra di navigazione di sistema. Il componente è apparso in React Native 0.50 per iOS ed è stato successivamente esteso per Android.

Su iOS, SafeAreaView utilizza UIView.safeAreaInsets nativo, introdotto in iOS 11 (2017). Su Android, il componente tiene conto di WindowInsets — gli insets di sistema disponibili da Android 5.0 (API 21). Secondo Apple (2026), il 92% degli iPhone attivi ha un display con notch o Dynamic Island.

Perché Safe Area è necessario

Il concetto di Safe Area fa parte delle raccomandazioni Apple HIG (Human Interface Guidelines). Prima di iPhone X (2017), l’intero spazio dello schermo era sicuro. Con l’arrivo del Notch, Apple ha definito le aree in cui il contenuto non deve essere posizionato: il ritaglio della fotocamera, l’indicatore di ora e batteria, l’indicatore home. Android ha implementato un concetto simile con l’avvento degli schermi con notch nel 2018.

Come funziona Safe Area su iOS e Android

Su iOS, SafeAreaView legge safeAreaInsets dalla guida al layout nativa. L’inset superiore include l’altezza della barra di stato (solitamente 44 o 50 punti per iPhone con Notch). L’inset inferiore è di 34 punti per l’indicatore home. Android utilizza WindowInsets — inset superiore per la barra di stato e inferiore per la navigazione di sistema.

Importante: SafeAreaView applica automaticamente il padding, ma solo per il contenitore radice. I componenti annidati non ricevono protezione — ogni schermo deve avere il proprio SafeAreaView. Per finestre modali e BottomSheet, considera gli insets separatamente.

Notch, Dynamic Island e barre di sistema

Notch è un ritaglio hardware nella parte superiore dello schermo che contiene fotocamera e sensori. È apparso su iPhone X (2017). Dynamic Island è un’area software-hardware di iPhone 14 Pro e successivi, che sostituisce il Notch con un elemento interattivo. Entrambi richiedono un inset superiore di 50-56 pt.

Su Android, i ritagli hanno forme diverse: a goccia, punch-hole, striscia sotto la fotocamera. SafeAreaView su Android utilizza WindowInsets, che tengono conto della forma del ritaglio. Per le app in orientamento orizzontale, vengono aggiunti insets laterali per evitare che il contenuto si sovrapponga agli elementi di sistema.

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

L’approccio Edge-to-edge (Android 15+) raccomanda di disegnare il contenuto sotto le barre di sistema, ma tenendo conto degli insets per gli elementi interattivi. SafeAreaView aiuta a mantenere questo equilibrio: lo sfondo viene disegnato sotto le barre, mentre pulsanti e testo rimangono nella zona sicura.

Uso e alternative a SafeAreaView

SafeAreaView è il modo più semplice per proteggere il contenuto, ma non sempre flessibile. Il componente applica lo stesso padding su tutti i lati, il che è scomodo quando serve un padding diverso per bordi diversi. Ad esempio, il padding laterale può essere inutile, mentre il padding inferiore può essere necessario solo per un pulsante.

Le principali alternative: useSafeAreaInsets da react-native-safe-area-context (soluzione più flessibile), StatusBar.currentHeight su Android, Platform.OS con controllo manuale del modello del dispositivo. Per casi complessi, usa una combinazione di SafeAreaView per il contenitore generale e useSafeAreaInsets per i singoli elementi.

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

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

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

La libreria react-native-safe-area-context è lo standard de facto per lavorare con Safe Area in React Native. È supportata da Expo, React Navigation e dalla maggior parte dei kit UI. Fornisce sia un hook che un componente Consumer per approcci funzionali e basati su classi.

react-native-safe-area-context per il controllo totale

react-native-safe-area-context è una libreria che fornisce un’API più flessibile rispetto a SafeAreaView integrato. Il vantaggio principale è l’accesso ai singoli valori degli insets (top, bottom, left, right) tramite l’hook useSafeAreaInsets, consentendo l’applicazione selettiva degli insets.

La libreria fornisce anche SafeAreaProvider — un componente obbligatorio al livello superiore dell’applicazione. Si iscrive ai cambiamenti degli insets di sistema durante la rotazione dello schermo o l’apertura della tastiera. React Navigation utilizza questa libreria per impostazione predefinita.

SafeAreaView da react-native-safe-area-context differisce da quello integrato: funziona su più dispositivi e supporta l’animazione dei cambiamenti degli insets. Per i nuovi progetti, si consiglia di installare questa libreria come dipendenza e utilizzare il suo SafeAreaView invece di quello integrato.

Errori comuni con SafeAreaView

SafeAreaView viene spesso usato in modo errato. Il primo errore è avvolgere ogni componente in SafeAreaView, creando un doppio padding. La regola: un SafeAreaView per View radice dello schermo. I componenti annidati ereditano gli insets attraverso il layout Flex.

Il secondo errore è ignorare Android. Su Android, SafeAreaView utilizza WindowInsets, che possono differire tra versioni del sistema operativo. Su Android 15+, le barre di sistema possono essere trasparenti e gli insets cambiano. Testa sempre SafeAreaView su dispositivi reali, non solo nell’emulatore.

Il terzo errore è il padding hardcoded. Non usare mai Platform.OS === 'ios' ? 44 : 24 — i valori degli insets variano tra modelli e versioni del sistema operativo. Usa sempre le API di sistema: safeAreaInsets o useSafeAreaInsets. Dynamic Island su iPhone 15 Pro ha insets diversi rispetto al Notch su iPhone X.