Áreas seguras y notches

react-native-safe-area-context y Android edge-to-edge en RN 0.86.

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

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

Cuándo usarlo: Cualquier layout de pantalla completa en iPhones con notch, dispositivos Dynamic Island, o Android 15+ edge-to-edge donde las barras del sistema se superponen a tu contenido.

Ejemplo funcional

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 top manual para texto legible bajo la barra de estado */}
      <View style={[styles.hero, { paddingTop: insets.top + 12 }]}>
        <Text style={styles.heroTitle}>Áreas seguras</Text>
        <Text style={styles.heroSubtitle}>Edge-to-edge con insets legibles</Text>
      </View>
 
      {/* Contenido estándar - SafeAreaView maneja los lados; inset bottom para indicador de inicio */}
      <SafeAreaView style={styles.content} edges={["left", "right", "bottom"]}>
        <ScrollView contentContainerStyle={styles.scroll}>
          <Text style={styles.paragraph}>
            En RN 0.86, Android se dibuja detrás de las barras de estado y navegación. iOS ha hecho esto durante años. react-native-safe-area-context reporta el rectángulo sin obstrucciones para que tu UI permanezca táctil.
          </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" },
});

Lo que esto demuestra:

• SafeAreaProvider en la raíz de la app para que los valores de inset se propaguen a todas las pantallas.
• useSafeAreaInsets() para un hero que se extiende edge-to-edge con padding top manual.
• SafeAreaView con edges selectivos - hero maneja top; el contenido maneja bottom y lados.
• StatusBar configurado en translucent para que Android edge-to-edge se dibuje detrás de la barra de estado.
• División de propiedad: header inmersivo vs body desplazable consciente de insets.

Análisis profundo

Cómo funciona

• Área segura es el rectángulo de la pantalla no cubierto por hardware (notch, Dynamic Island), UI del sistema (barra de estado), o áreas de gesto (indicador de inicio, barra de navegación Android).
• react-native-safe-area-context lee los valores de inset nativos y los expone a través de React context. Es la librería recomendada - incluida en plantillas de Expo y plantillas de comunidad RN.
• SafeAreaProvider debe envolver tu app (o cada raíz modal) para que los hooks y SafeAreaView puedan leer los insets actuales. La root layout de Expo Router típicamente incluye esto.
• SafeAreaView aplica padding igual al inset en cada lado seleccionado. Es un envoltorio de conveniencia - funcionalmente equivalente a paddingTop: insets.top, etc.
• useSafeAreaInsets() devuelve { top, right, bottom, left } en píxeles independientes de densidad. Úsalo cuando necesites control fino (botones flotantes, headers personalizados, padding parcial).
• Prop edges - un array como ["top", "left", "right"] que omite bottom cuando una barra de pestañas o barra de herramientas del teclado ya maneja ese inset.

Android edge-to-edge en RN 0.86

React Native 0.86 (Expo SDK 57) dibuja el contenido de la app detrás de las barras de estado y navegación del sistema en Android por defecto - coincidiendo con la guía moderna Android 15+ edge-to-edge.

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 a menudo maneja iOS
        paddingBottom: insets.bottom,
      }}
    >
      <StatusBar translucent backgroundColor="transparent" barStyle="dark-content" />
      {children}
    </View>
  );
}

Para configuración edge-to-edge a nivel de Gradle y expo-navigation-bar, ver Edge-to-Edge en 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, // limpia indicador de inicio / barra de navegación
      }}
    />
  );
}

Patrones de edges para chrome común

Notas de 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;
}
 
// Pasa insets a una utilidad no-React
function contentHeight(windowHeight: number, insets: EdgeInsets): number {
  return windowHeight - insets.top - insets.bottom;
}

• Edge es "top" | "right" | "bottom" | "left".
• Los insets se actualizan en rotación, pliegue, y cuando la barra de estado muestra/oculta - no los cachees en scope de módulo.

Errores comunes

• Usar SafeAreaView del núcleo desde react-native - El componente integrado es deprecado y solo maneja notches de iOS de manera confiable. Fix: Importa desde react-native-safe-area-context.

• Falta SafeAreaProvider - useSafeAreaInsets() devuelve ceros; el contenido se sienta bajo la barra de estado. Fix: Envuelve la raíz de la app (la plantilla de Expo hace esto; verifica después de expulsar o entrada personalizada).

• Double bottom padding encima de barras de pestañas - edges={["bottom"]} en una pantalla de pestañas añade padding y la barra de pestañas añade su propio área segura. Fix: Omite "bottom" de edges cuando el navegador de pestañas posee ese inset.

• Double top padding en SafeAreaViews anidados - Anidar dos envoltorios ambos con edges={["top"]} duplica el inset. Fix: Un propietario de área segura por eje por pantalla.

• Android edge-to-edge sin padding de inset - RN 0.86 se dibuja detrás de las barras del sistema; el texto y los botones se vuelven intacables bajo la barra de navegación. Fix: Aplica padding de useSafeAreaInsets() o SafeAreaView al contenido, no solo el color de la barra de estado.

• Ignorar insets de notch en horizontal - Los insets left y right son distintos de cero en iPhones con notch en horizontal. Fix: Incluye "left" y "right" en edges, o usa el hook para padding horizontal.

• Área segura vs teclado - El inset bottom no se mueve cuando se abre el teclado. Fix: Combina área segura con KeyboardAvoidingView o react-native-keyboard-controller para entradas de texto.

Alternativas

FAQs

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

Relacionado

• Flexbox Deep Dive - pantallas flex: 1 dentro de envoltorios de área segura
• Responsive & Adaptive Layout - tamaño de ventana vs área utilizable ajustada de inset
• Dark Mode & Color Schemes - barStyle de barra de estado por esquema de color
• Styling Basics - patrones de StyleSheet para layouts de pantalla
• Edge-to-Edge en Android - Gradle, barra de navegación, y expo-navigation-bar
• Dimensiones & Responsive Layout - useWindowDimensions junto con insets

Versiones de Stack: Esta página se escribió para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).