SafeAreaView — o que é, layout com Safe Area no React Native

O que é SafeAreaView?

SafeAreaView é um componente React Native que adiciona automaticamente padding interno para que o conteúdo não seja sobreposto por elementos da interface do sistema: barra de status, Notch, Dynamic Island e barra de navegação do sistema. O componente apareceu no React Native 0.50 para iOS e depois foi estendido para Android.

No iOS, o SafeAreaView usa o UIView.safeAreaInsets nativo, introduzido no iOS 11 (2017). No Android, o componente leva em conta WindowInsets — os insets do sistema disponíveis desde o Android 5.0 (API 21). Segundo a Apple (2026), 92% dos iPhones ativos têm uma tela com entalhe ou Dynamic Island.

Por que o Safe Area é necessário

O conceito de Safe Area faz parte das recomendações Apple HIG (Human Interface Guidelines). Antes do iPhone X (2017), todo o espaço da tela era seguro. Com a chegada do Notch, a Apple definiu áreas onde o conteúdo não deve ser colocado: o recorte da câmera, o indicador de hora e bateria, o indicador de inicio. O Android implementou um conceito semelhante com o advento de telas com entalhe em 2018.

Como o Safe Area funciona no iOS e Android

No iOS, o SafeAreaView lê safeAreaInsets do guia de layout nativo. O inset superior inclui a altura da barra de status (geralmente 44 ou 50 pontos para iPhones com Notch). O inset inferior é de 34 pontos para o indicador de inicio. O Android usa WindowInsets — inset superior para a barra de status e inferior para a navegação do sistema.

Importante: o SafeAreaView aplica o padding automaticamente, mas apenas para o contêiner raiz. Componentes aninhados não recebem proteção — cada tela deve ter seu próprio SafeAreaView. Para janelas modais e BottomSheet, considere os insets separadamente.

Notch, Dynamic Island e barras do sistema

Notch é um recorte de hardware na parte superior da tela contendo a câmera e sensores. Apareceu no iPhone X (2017). Dynamic Island é uma área de software-hardware do iPhone 14 Pro e posteriores, substituindo o Notch por um elemento interativo. Ambos exigem um inset superior de 50-56 pt.

No Android, os recortes têm formas diferentes: gota, punch-hole, faixa sob a câmera. O SafeAreaView no Android usa WindowInsets, que levam em conta a forma do recorte. Para aplicativos em orientação paisagem, insets laterais são adicionados para evitar que o conteúdo sobreponha elementos do 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>
);

A abordagem Edge-to-edge (Android 15+) recomenda desenhar conteúdo sob as barras do sistema, mas levando em conta os insets para elementos interativos. O SafeAreaView ajuda a manter esse equilíbrio: o fundo é desenhado sob as barras, enquanto botões e texto permanecem na zona segura.

Uso e alternativas ao SafeAreaView

SafeAreaView é a maneira mais simples de proteger o conteúdo, mas nem sempre é flexível. O componente aplica o mesmo padding a todos os lados, o que é inconveniente quando um padding diferente é necessário para bordas diferentes. Por exemplo, o padding lateral pode ser desnecessário, enquanto o padding inferior pode ser necessário apenas para um botão.

As principais alternativas: useSafeAreaInsets do react-native-safe-area-context (solução mais flexível), StatusBar.currentHeight no Android, Platform.OS com verificação manual do modelo do dispositivo. Para casos complexos, use uma combinação de SafeAreaView para o contêiner geral e useSafeAreaInsets para elementos individuais.

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

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

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

A biblioteca react-native-safe-area-context é o padrão de fato para trabalhar com Safe Area no React Native. Ela é suportada pelo Expo, React Navigation e pela maioria dos kits de UI. Fornece tanto um hook quanto um componente Consumer para abordagens funcionais e baseadas em classes.

react-native-safe-area-context para controle total

react-native-safe-area-context é uma biblioteca que fornece uma API mais flexível que o SafeAreaView embutido. A principal vantagem é o acesso a valores individuais de insets (top, bottom, left, right) através do hook useSafeAreaInsets, permitindo a aplicação seletiva de insets.

A biblioteca também fornece SafeAreaProvider — um componente obrigatório no nível superior da aplicação. Ele se inscreve nas mudanças de insets do sistema ao girar a tela ou abrir o teclado. O React Navigation usa esta biblioteca por padrão.

SafeAreaView do react-native-safe-area-context difere do embutido: funciona em mais dispositivos e suporta animação de mudança de insets. Para novos projetos, é recomendado instalar esta biblioteca como dependência e usar seu SafeAreaView em vez do embutido.

Erros comuns ao trabalhar com SafeAreaView

SafeAreaView é frequentemente usado incorretamente. O primeiro erro é envolver cada componente em SafeAreaView, o que cria padding duplo. A regra: um SafeAreaView por View raiz da tela. Componentes aninhados herdam os insets através do layout Flex.

O segundo erro é ignorar o Android. No Android, o SafeAreaView usa WindowInsets, que podem diferir entre versões do SO. No Android 15+, as barras do sistema podem ser transparentes e os insets mudam. Sempre teste o SafeAreaView em dispositivos reais, não apenas no emulador.

O terceiro erro é o padding codificado. Nunca use Platform.OS === 'ios' ? 44 : 24 — os valores de insets variam entre modelos e versões do SO. Sempre use as APIs do sistema: safeAreaInsets ou useSafeAreaInsets. O Dynamic Island no iPhone 15 Pro tem insets diferentes do Notch no iPhone X.