Áreas Seguras e Entalhes

react-native-safe-area-context e Android edge-to-edge no RN 0.86.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

import { StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 
export function AppRoot({ children }: { children: React.ReactNode }) {
  return <SafeAreaProvider>{children}</SafeAreaProvider>;
}
 
export function Screen({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <SafeAreaView style={styles.safe} edges={["top", "left", "right"]}>
      <View style={styles.header}>
        <Text style={styles.title}>{title}</Text>
      </View>
      <View style={styles.body}>{children}</View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#fff" },
  header: { paddingHorizontal: 16, paddingBottom: 8 },
  title: { fontSize: 28, fontWeight: "700" },
  body: { flex: 1, paddingHorizontal: 16 },
});

Quando usar isso: Qualquer layout de tela inteira em iPhones com entalhe, dispositivos com Dynamic Island, ou Android edge-to-edge 15+ onde as barras do sistema se sobrepõem ao seu conteúdo.

Exemplo de Trabalho

import { ScrollView, StatusBar, StyleSheet, Text, View } from "react-native";
import {
  SafeAreaProvider,
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
 
function ArticleScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <View style={styles.screen}>
      <StatusBar barStyle="dark-content" translucent backgroundColor="transparent" />
 
      {/* Hero edge-to-edge - inset superior manual para texto legível sob a barra de status */}
      <View style={[styles.hero, { paddingTop: insets.top + 12 }]}>
        <Text style={styles.heroTitle}>Áreas Seguras</Text>
        <Text style={styles.heroSubtitle}>Edge-to-edge com insets legíveis</Text>
      </View>
 
      {/* Conteúdo padrão - SafeAreaView cuida dos lados; inset inferior para o indicador de início */}
      <SafeAreaView style={styles.content} edges={["left", "right", "bottom"]}>
        <ScrollView contentContainerStyle={styles.scroll}>
          <Text style={styles.paragraph}>
            No RN 0.86, o Android desenha atrás das barras de status e navegação. O iOS faz isso há anos.
            react-native-safe-area-context relata o retângulo desobstruído para que sua UI permaneça tocável.
          </Text>
        </ScrollView>
      </SafeAreaView>
    </View>
  );
}
 
export default function App() {
  return (
    <SafeAreaProvider>
      <ArticleScreen />
    </SafeAreaProvider>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#0f172a" },
  hero: {
    paddingHorizontal: 20,
    paddingBottom: 24,
    backgroundColor: "#1e293b",
  },
  heroTitle: { fontSize: 32, fontWeight: "800", color: "#f8fafc" },
  heroSubtitle: { fontSize: 16, color: "#94a3b8", marginTop: 4 },
  content: { flex: 1, backgroundColor: "#fff", borderTopLeftRadius: 16, borderTopRightRadius: 16 },
  scroll: { padding: 20 },
  paragraph: { fontSize: 16, lineHeight: 24, color: "#334155" },
});

O que isso demonstra:

• SafeAreaProvider na raiz do app para que os valores de inset se propaguem para todas as telas.
• useSafeAreaInsets() para um hero que se estende de ponta a ponta com padding superior manual.
• SafeAreaView com edges seletivos - o hero cuida do topo; o conteúdo cuida da parte inferior e dos lados.
• StatusBar definido como translucent para desenho edge-to-edge do Android atrás da barra de status.
• Propriedade dividida: cabeçalho imersivo vs. corpo rolável ciente de inset.

Mergulho Profundo

Como Funciona

• Área segura é o retângulo da tela não coberto por hardware (entalhe, Dynamic Island), UI do sistema (barra de status) ou áreas de gestos (indicador de início, barra de navegação do Android).
• react-native-safe-area-context lê os valores nativos de inset e os expõe através do contexto React. É a biblioteca recomendada - incluída em modelos Expo e modelos da comunidade RN.
• SafeAreaProvider deve envolver seu app (ou cada raiz de modal) para que hooks e SafeAreaView possam ler os insets atuais. O layout raiz do Expo Router normalmente inclui isso.
• SafeAreaView aplica padding igual ao inset em cada borda selecionada. É um wrapper de conveniência - funcionalmente equivalente a paddingTop: insets.top, etc.
• useSafeAreaInsets() retorna { top, right, bottom, left } em pixels independentes de densidade. Use-o quando precisar de controle fino (botões flutuantes, cabeçalhos personalizados, padding parcial).
• Prop edges - um array como ["top", "left", "right"] que omite a parte inferior quando uma barra de abas ou barra de ferramentas do teclado já cuida desse inset.

Android Edge-to-Edge no RN 0.86

React Native 0.86 (Expo SDK 57) desenha o conteúdo do app atrás das barras de status e navegação do sistema no Android por padrão - alinhando-se com as orientações modernas de edge-to-edge do Android 15+.

import { Platform, StatusBar } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
 
function EdgeToEdgeShell({ children }: { children: React.ReactNode }) {
  const insets = useSafeAreaInsets();
 
  return (
    <View
      style={{
        flex: 1,
        paddingTop: Platform.OS === "android" ? insets.top : 0, // SafeAreaView geralmente cuida do iOS
        paddingBottom: insets.bottom,
      }}
    >
      <StatusBar translucent backgroundColor="transparent" barStyle="dark-content" />
      {children}
    </View>
  );
}

Para configuração de edge-to-edge em nível de Gradle e expo-navigation-bar, consulte Edge-to-Edge no Android.

SafeAreaView vs useSafeAreaInsets

import { useSafeAreaInsets } from "react-native-safe-area-context";
 
function FloatingActionButton({ onPress }: { onPress: () => void }) {
  const insets = useSafeAreaInsets();
 
  return (
    <Pressable
      onPress={onPress}
      style={{
        position: "absolute",
        right: 16,
        bottom: insets.bottom + 16, // limpa o indicador de início / barra de navegação
      }}
    />
  );
}

Padrões de edges para Cromos Comuns

Notas TypeScript

import type { EdgeInsets } from "react-native-safe-area-context";
import type { Edge } from "react-native-safe-area-context";
 
const TAB_EDGES: Edge[] = ["top", "left", "right"];
 
function useBottomInset(extra = 0): number {
  const { bottom } = useSafeAreaInsets();
  return bottom + extra;
}
 
// Passa insets para uma utilidade não-React
function contentHeight(windowHeight: number, insets: EdgeInsets): number {
  return windowHeight - insets.top - insets.bottom;
}

• Edge é "top" | "right" | "bottom" | "left".
• Insets atualizam na rotação, dobra e quando a barra de status aparece/desaparece - não os armazene em cache no escopo do módulo.

Armadilhas

• Usando SafeAreaView principal do react-native - O componente embutido é obsoleto e só lida com entalhes do iOS de forma confiável. Correção: Importe de react-native-safe-area-context.

• SafeAreaProvider ausente - useSafeAreaInsets() retorna zeros; o conteúdo fica sob a barra de status. Correção: Envolva a raiz do app (o modelo Expo faz isso; verifique após ejetar ou com uma entrada personalizada).

• Padding inferior duplo acima das barras de abas - edges={["bottom"]} em uma tela de abas adiciona padding e a barra de abas adiciona sua própria área segura. Correção: Omita "bottom" de edges quando o navegador de abas for o proprietário desse inset.

• Padding superior duplo em SafeAreaViews aninhados - Aninhar dois wrappers ambos com edges={["top"]} dobra o inset. Correção: Um proprietário de área segura por eixo por tela.

• Android edge-to-edge sem padding de inset - RN 0.86 desenha atrás das barras do sistema; texto e botões se tornam intocáveis sob a barra de navegação. Correção: Aplique useSafeAreaInsets() ou padding SafeAreaView no conteúdo, não apenas na cor da barra de status.

• Ignorando insets de entalhe em paisagem - Insets left e right são diferentes de zero em iPhones com entalhe em paisagem. Correção: Inclua "left" e "right" em edges, ou use o hook para padding horizontal.

• Área segura vs. teclado - O inset inferior não se move quando o teclado abre. Correção: Combine a área segura com KeyboardAvoidingView ou react-native-keyboard-controller para campos de texto.

Alternativas

FAQs

import { StatusBar } from "expo-status-bar";
 
<StatusBar style="auto" translucent />

Relacionados

• Mergulho Profundo em Flexbox - Telas com flex: 1 dentro de wrappers de área segura
• Layout Responsivo e Adaptativo - tamanho da janela vs. área utilizável ajustada por inset
• Modo Escuro e Esquemas de Cores - barStyle da barra de status por esquema de cores
• Noções Básicas de Estilização - Padrões de StyleSheet para layouts de tela
• Edge-to-Edge no Android - Gradle, barra de navegação e expo-navigation-bar
• Dimensões e Layout Responsivo - useWindowDimensions junto com insets

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0, e Expo SDK 57 (expo ~57.0.4).