Edge-to-Edge en Android

Q: ¿Es edge-to-edge obligatorio en RN 0.86?

Es el valor por defecto en la plantilla RN 0.86 de Android. Deshabilitarlo requiere cambios de tema nativo y lucha contra la dirección de la plataforma. Prefiere aprender patrones de inset sobre optar por no participar.

Q: ¿Necesito expo-navigation-bar si solo uso SafeAreaView?

SafeAreaView maneja el padding de layout; expo-navigation-bar maneja el color de la barra de navegación y el contraste de botones. Las barras de navegación transparentes usualmente necesitan ambas.

Q: ¿Por qué mi contenido salta cuando se abre el teclado?

Teclado y área segura son independientes. Combina KeyboardAvoidingView con inset inferior en la misma pantalla cuidadosamente - evita double bottom padding.

Q: ¿Pueden las pestañas de Expo Router manejar insets automáticamente?

Versiones recientes de @react-navigation/bottom-tabs respetan áreas seguras, pero barras de pestañas personalizadas necesitan insets.bottom manual.

Q: ¿Cómo depuro valores de inset?

Registra useSafeAreaInsets() en compilaciones dev. Compara emulador vs dispositivo - los insets de navegación por gesto difieren (~24-48dp).

Q: ¿Afecta el tema de la barra de navegación solo a la píldora de gesto?

setButtonStyleAsync afecta modos 3-botón y gesto; el color de fondo afecta el área de la barra detrás de la píldora.

Q: ¿Dónde está el análisis profundo de layout para áreas seguras?

Ver Safe Areas & Notches para patrones de edges y paridad iOS.

React Native 0.86 (Expo SDK 57) habilita edge-to-edge en Android por defecto - tu aplicación se dibuja detrás de las barras de estado y navegación, alineándose con las directrices de Android 15. Este cookbook cubre los valores por defecto de RN, expo-status-bar, expo-navigation-bar, y los patrones de inset que mantienen los botones tappable.

Receta

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

npx expo install expo-status-bar expo-navigation-bar react-native-safe-area-context

// app/_layout.tsx - shell raíz para edge-to-edge en Android
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import * as NavigationBar from "expo-navigation-bar";
import { useEffect } from "react";
import { Platform } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
 
export default function RootLayout() {
  useEffect(() => {
    if (Platform.OS !== "android") return;
    NavigationBar.setBackgroundColorAsync("#ffffff00"); // transparente
    NavigationBar.setButtonStyleAsync("dark");
  }, []);
 
  return (
    <SafeAreaProvider>
      <StatusBar style="auto" translucent />
      <Stack screenOptions={{ headerShown: false }} />
    </SafeAreaProvider>
  );
}

// Pantalla con barra de pestañas - omite el edge seguro inferior; pad FAB manualmente
import { Platform, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 
export function OrdersScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
      <View style={{ flex: 1 }}>{/* contenido */}</View>
      {/* FAB limpia la barra de gestos de navegación */}
      <View style={{ position: "absolute", right: 16, bottom: insets.bottom + 16 }} />
    </SafeAreaView>
  );
}

Cuándo usarlo:

Los botones inferiores se sientan bajo la píldora de navegación por gesto de Android.
Los iconos de la barra de estado son invisibles sobre una imagen hero oscura (o viceversa).
QA reporta diferencias de layout entre emuladores de API 33 y API 35.
Quieres headers de sangrado completo inmersivos sin sacrificar los objetivos de tap seguros.

Ejemplo funcional

Paso 1 - Instala módulos y envuelve la aplicación

// app/_layout.tsx
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import * as NavigationBar from "expo-navigation-bar";
import { useEffect } from "react";
import { Platform } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
 
export default function RootLayout() {
  useEffect(() => {
    if (Platform.OS !== "android") return;
    void NavigationBar.setPositionAsync("absolute");
    void NavigationBar.setBackgroundColorAsync("#00000000");
    void NavigationBar.setButtonStyleAsync("light");
  }, []);
 
  return (
    <SafeAreaProvider>
      <StatusBar style="light" translucent />
      <Stack />
    </SafeAreaProvider>
  );
}

Paso 2 - Divide hero (sangrado completo) y body (inset)

import { ImageBackground, Text, View, StyleSheet } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
 
export function ProductScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <View style={styles.root}>
      <StatusBar style="light" />
      <ImageBackground source={{ uri: "https://pics.example/hero.jpg" }} style={styles.hero}>
        <Text style={[styles.heroTitle, { marginTop: insets.top + 8 }]}>Trail Runner Pro</Text>
      </ImageBackground>
      <View style={[styles.body, { paddingBottom: insets.bottom + 16 }]}>
        <Text style={styles.price}>$129.00</Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: "#fff" },
  hero: { height: 280, justifyContent: "flex-end", padding: 16 },
  heroTitle: { color: "#fff", fontSize: 28, fontWeight: "700" },
  body: { flex: 1, padding: 16 },
  price: { fontSize: 22, fontWeight: "600" },
});

Paso 3 - Tema la barra de nav por pantalla (opcional)

import { useFocusEffect } from "expo-router";
import * as NavigationBar from "expo-navigation-bar";
import { useCallback } from "react";
import { Platform } from "react-native";
 
export function useAndroidNavBar(style: "light" | "dark", background = "#00000000") {
  useFocusEffect(
    useCallback(() => {
      if (Platform.OS !== "android") return;
      void NavigationBar.setBackgroundColorAsync(background);
      void NavigationBar.setButtonStyleAsync(style);
    }, [style, background]),
  );
}

Paso 4 - Verifica en emulador API 35

npx expo run:android
# Device Manager → Pixel 8 API 35 → navegación por gesto habilitada

Lo que esto demuestra:

SafeAreaProvider en raíz - requerido para hooks de inset en edge-to-edge de Android.
StatusBar translucent - el contenido se dibuja detrás; rellenas con insets.
expo-navigation-bar - barra de navegación transparente con estilo de botón light/dark.
Propiedad de inset dividida - hero sangra; body y FAB respetan insets.bottom.

Análisis profundo

Cómo funciona

RN 0.86 opt-in en edge-to-edge a nivel nativo de actividad/ventana - la ventana se extiende bajo las barras del sistema.
Insets de react-native-safe-area-context reportan cuánto de la pantalla está oscurecido por la barra de estado, muesca de pantalla y barra de navegación (gesto o 3-botón).
expo-status-bar establece el color del icono/texto (light | dark | auto) - no reemplaza el padding de inset.
expo-navigation-bar controla el fondo de la barra de navegación de Android, estilo de botón, visibilidad y posición (relative vs absolute).
Teclado la prevención es separada - KeyboardAvoidingView / react-native-keyboard-controller aún aplican; inset inferior y teclado pueden apilar.

Antes vs Después de RN 0.86

Asunto	Pre-edge-to-edge	RN 0.86 edge-to-edge
Barra de estado	Banda opaca reservada del sistema	Contenido detrás; inset superior requerido
Barra de navegación	Barra opaca	Píldora de gesto superpone contenido; inset inferior
Fondo	Sólido detrás de barras	Sangrado completo posible
Navegador de pestañas	A menudo "simplemente funcionaba"	Puede necesitar `edges` sin inferior

Método	Propósito
`setBackgroundColorAsync(color)`	Color de barra de navegación - usa `#RRGGBBAA` para transparencia
`setButtonStyleAsync("light" \| "dark")`	Contraste para iconos 3-botón/gesto
`setPositionAsync("absolute" \| "relative")`	`absolute` superpone contenido (edge-to-edge)
`setVisibilityAsync("visible" \| "hidden")`	Lectores inmersivos - restaura en blur
`getBackgroundColorAsync()`	Depura color actual en scripts de menú dev

Gradle / Flags de ventana (Cuando se necesitan plugins)

La mayoría de plantillas de Expo SDK 57 habilitan edge-to-edge vía prebuild. Si mantienes un fork android/ bare:

// app.config.ts - prefiere config sobre editar MainActivity manualmente
export default {
  expo: {
    android: {
      // La plantilla RN 0.86 establece edge-to-edge; confirma después de prebuild
    },
    plugins: [
      [
        "expo-build-properties",
        {
          android: {
            // compileSdk / targetSdk 35 para el comportamiento más reciente de la barra
            compileSdkVersion: 35,
            targetSdkVersion: 35,
          },
        },
      ],
    ],
  },
};

Inspecciona android/app/src/main/res/values/styles.xml después de prebuild - windowLayoutInDisplayCutoutMode y colores de barra de estado/navegación transparentes deben estar presentes en la plantilla RN 0.86.

Patrones de Chrome de pantalla

Elemento de interfaz	Estrategia de inset
Encabezado de stack (personalizado)	`paddingTop: insets.top`
Contenido de pantalla de pestañas	`edges={["top","left","right"]}` - la barra de pestañas posee el inferior
Modal / hoja inferior	`edges={["bottom"]}` o inset completo
Mapa / cámara pantalla completa	Oculta barra de navegación temporalmente; restaura al salir
`FlatList` footer CTA	`contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}`

Errores comunes

Padding SafeAreaView y insets.top manual juntos - duplica el espacio superior. Solución: Un propietario por eje.
Iconos de barra de estado blanco sobre header blanco - StatusBar style="light" sobre fondo claro. Solución: Empareja style con luminancia de fondo por pantalla.
La barra de pestañas superpone el indicador home - Las pestañas de React Navigation pueden necesitar ajuste de safeAreaInsets. Solución: Pasa tabBarStyle: { height: 56 + insets.bottom } o usa valores por defecto de biblioteca en SDK 57.
Prueba solo en navegación 3-botón - La navegación por gesto cambia la altura del inset inferior. Solución: Alterna Configuración → Navegación del sistema en emulador.
Color de barra de navegación opaco peleando contra transparencia - Algunos skins OEM ignoran alpha. Solución: setPositionAsync("absolute") + reaplicar en foco.
Asumiendo que expo-status-bar añade padding - Solo estiliza iconos. Solución: Siempre empareja con react-native-safe-area-context.

Alternativas

Alternativa	Úsalo cuando	No lo uses cuando
`SafeAreaView` solo	Pantallas simples	FABs, layouts split hero/body
`useSafeAreaInsets()` en todas partes	Control granular	Padding repetitivo de cuatro ejes
Inmersivo `setVisibilityAsync("hidden")`	Video, cámara, juegos	Formularios - los usuarios pierden la asequibilidad de back del sistema
`android:fitsSystemWindows` en XML nativo	Layouts XML brownfield legados	Expo CNG greenfield - usa insets JS

Preguntas frecuentes

¿Es edge-to-edge obligatorio en RN 0.86?

Es el valor por defecto en la plantilla RN 0.86 de Android. Deshabilitarlo requiere cambios de tema nativo y lucha contra la dirección de la plataforma.
Prefiere aprender patrones de inset sobre optar por no participar.

¿Necesito expo-navigation-bar si solo uso SafeAreaView?

SafeAreaView maneja el padding de layout; expo-navigation-bar maneja el color de la barra de navegación y el contraste de botones.
Las barras de navegación transparentes usualmente necesitan ambas.

¿Por qué mi contenido salta cuando se abre el teclado?

Teclado y área segura son independientes. Combina KeyboardAvoidingView con inset inferior en la misma pantalla cuidadosamente - evita double bottom padding.

¿Afecta edge-to-edge a iOS?

iOS siempre ha usado áreas seguras para muescas. Android ahora se comporta de manera similar - SafeAreaProvider multiplataforma ayuda a ambas.

¿Cómo pruebo el contraste del icono de la barra de estado?

Alterna fondos hero light/dark en Storybook o una pantalla del menú dev.
Ejecuta en Samsung/Pixel físico - el tinted OEM difiere de AVD.

¿Pueden las pestañas de Expo Router manejar insets automáticamente?

Versiones recientes de @react-navigation/bottom-tabs respetan áreas seguras, pero barras de pestañas personalizadas necesitan insets.bottom manual.

¿Qué pasa con Android 15 edge-to-edge forzado?

Dirigirse a API 35 se alinea con las expectativas de la plataforma. La plantilla RN 0.86 está adelantada de la curva de política - aún prueba en API 35.

¿Cómo depuro valores de inset?

Registra useSafeAreaInsets() en compilaciones dev.
Compara emulador vs dispositivo - los insets de navegación por gesto difieren (~24-48dp).

¿Afecta el tema de la barra de navegación solo a la píldora de gesto?

setButtonStyleAsync afecta modos 3-botón y gesto; el color de fondo afecta el área de la barra detrás de la píldora.

¿Dónde está el análisis profundo de layout para áreas seguras?

Ver Safe Areas & Notches para patrones de edges y paridad iOS.

Relacionado

Safe Areas & Notches - prop edges y hooks de inset
Android Basics for RN Devs - niveles de API de emulador y Gradle
Permissions & Play Policy - no relacionado con barras pero frecuentemente probado en la misma matriz de API 35
../deep-linking/android-app-links/android-app-links.md - los enlaces profundos abren actividades pantalla completa - ten cuidado con inset en pantallas de aterrizaje

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Receta

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

npx expo install expo-status-bar expo-navigation-bar react-native-safe-area-context

// app/_layout.tsx - shell raíz para edge-to-edge en Android
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import * as NavigationBar from "expo-navigation-bar";
import { useEffect } from "react";
import { Platform } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
 
export default function RootLayout() {
  useEffect(() => {
    if (Platform.OS !== "android") return;
    NavigationBar.setBackgroundColorAsync("#ffffff00"); // transparente
    NavigationBar.setButtonStyleAsync("dark");
  }, []);
 
  return (
    <SafeAreaProvider>
      <StatusBar style="auto" translucent />
      <Stack screenOptions={{ headerShown: false }} />
    </SafeAreaProvider>
  );
}

// Pantalla con barra de pestañas - omite el edge seguro inferior; pad FAB manualmente
import { Platform, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 
export function OrdersScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
      <View style={{ flex: 1 }}>{/* contenido */}</View>
      {/* FAB limpia la barra de gestos de navegación */}
      <View style={{ position: "absolute", right: 16, bottom: insets.bottom + 16 }} />
    </SafeAreaView>
  );
}

Cuándo usarlo:

Los botones inferiores se sientan bajo la píldora de navegación por gesto de Android.
Los iconos de la barra de estado son invisibles sobre una imagen hero oscura (o viceversa).
QA reporta diferencias de layout entre emuladores de API 33 y API 35.
Quieres headers de sangrado completo inmersivos sin sacrificar los objetivos de tap seguros.

Ejemplo funcional

Paso 1 - Instala módulos y envuelve la aplicación

// app/_layout.tsx
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import * as NavigationBar from "expo-navigation-bar";
import { useEffect } from "react";
import { Platform } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
 
export default function RootLayout() {
  useEffect(() => {
    if (Platform.OS !== "android") return;
    void NavigationBar.setPositionAsync("absolute");
    void NavigationBar.setBackgroundColorAsync("#00000000");
    void NavigationBar.setButtonStyleAsync("light");
  }, []);
 
  return (
    <SafeAreaProvider>
      <StatusBar style="light" translucent />
      <Stack />
    </SafeAreaProvider>
  );
}

Paso 2 - Divide hero (sangrado completo) y body (inset)

import { ImageBackground, Text, View, StyleSheet } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
 
export function ProductScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <View style={styles.root}>
      <StatusBar style="light" />
      <ImageBackground source={{ uri: "https://pics.example/hero.jpg" }} style={styles.hero}>
        <Text style={[styles.heroTitle, { marginTop: insets.top + 8 }]}>Trail Runner Pro</Text>
      </ImageBackground>
      <View style={[styles.body, { paddingBottom: insets.bottom + 16 }]}>
        <Text style={styles.price}>$129.00</Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: "#fff" },
  hero: { height: 280, justifyContent: "flex-end", padding: 16 },
  heroTitle: { color: "#fff", fontSize: 28, fontWeight: "700" },
  body: { flex: 1, padding: 16 },
  price: { fontSize: 22, fontWeight: "600" },
});

Paso 3 - Tema la barra de nav por pantalla (opcional)

import { useFocusEffect } from "expo-router";
import * as NavigationBar from "expo-navigation-bar";
import { useCallback } from "react";
import { Platform } from "react-native";
 
export function useAndroidNavBar(style: "light" | "dark", background = "#00000000") {
  useFocusEffect(
    useCallback(() => {
      if (Platform.OS !== "android") return;
      void NavigationBar.setBackgroundColorAsync(background);
      void NavigationBar.setButtonStyleAsync(style);
    }, [style, background]),
  );
}

Paso 4 - Verifica en emulador API 35

npx expo run:android
# Device Manager → Pixel 8 API 35 → navegación por gesto habilitada

Lo que esto demuestra:

SafeAreaProvider en raíz - requerido para hooks de inset en edge-to-edge de Android.
StatusBar translucent - el contenido se dibuja detrás; rellenas con insets.
expo-navigation-bar - barra de navegación transparente con estilo de botón light/dark.
Propiedad de inset dividida - hero sangra; body y FAB respetan insets.bottom.

Análisis profundo

Cómo funciona

RN 0.86 opt-in en edge-to-edge a nivel nativo de actividad/ventana - la ventana se extiende bajo las barras del sistema.
Insets de react-native-safe-area-context reportan cuánto de la pantalla está oscurecido por la barra de estado, muesca de pantalla y barra de navegación (gesto o 3-botón).
expo-status-bar establece el color del icono/texto (light | dark | auto) - no reemplaza el padding de inset.
expo-navigation-bar controla el fondo de la barra de navegación de Android, estilo de botón, visibilidad y posición (relative vs absolute).
Teclado la prevención es separada - KeyboardAvoidingView / react-native-keyboard-controller aún aplican; inset inferior y teclado pueden apilar.

Antes vs Después de RN 0.86

Asunto	Pre-edge-to-edge	RN 0.86 edge-to-edge
Barra de estado	Banda opaca reservada del sistema	Contenido detrás; inset superior requerido
Barra de navegación	Barra opaca	Píldora de gesto superpone contenido; inset inferior
Fondo	Sólido detrás de barras	Sangrado completo posible
Navegador de pestañas	A menudo "simplemente funcionaba"	Puede necesitar `edges` sin inferior

Método	Propósito
`setBackgroundColorAsync(color)`	Color de barra de navegación - usa `#RRGGBBAA` para transparencia
`setButtonStyleAsync("light" \| "dark")`	Contraste para iconos 3-botón/gesto
`setPositionAsync("absolute" \| "relative")`	`absolute` superpone contenido (edge-to-edge)
`setVisibilityAsync("visible" \| "hidden")`	Lectores inmersivos - restaura en blur
`getBackgroundColorAsync()`	Depura color actual en scripts de menú dev

Gradle / Flags de ventana (Cuando se necesitan plugins)

La mayoría de plantillas de Expo SDK 57 habilitan edge-to-edge vía prebuild. Si mantienes un fork android/ bare:

// app.config.ts - prefiere config sobre editar MainActivity manualmente
export default {
  expo: {
    android: {
      // La plantilla RN 0.86 establece edge-to-edge; confirma después de prebuild
    },
    plugins: [
      [
        "expo-build-properties",
        {
          android: {
            // compileSdk / targetSdk 35 para el comportamiento más reciente de la barra
            compileSdkVersion: 35,
            targetSdkVersion: 35,
          },
        },
      ],
    ],
  },
};

Patrones de Chrome de pantalla

Elemento de interfaz	Estrategia de inset
Encabezado de stack (personalizado)	`paddingTop: insets.top`
Contenido de pantalla de pestañas	`edges={["top","left","right"]}` - la barra de pestañas posee el inferior
Modal / hoja inferior	`edges={["bottom"]}` o inset completo
Mapa / cámara pantalla completa	Oculta barra de navegación temporalmente; restaura al salir
`FlatList` footer CTA	`contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}`

Errores comunes

Padding SafeAreaView y insets.top manual juntos - duplica el espacio superior. Solución: Un propietario por eje.
Iconos de barra de estado blanco sobre header blanco - StatusBar style="light" sobre fondo claro. Solución: Empareja style con luminancia de fondo por pantalla.
La barra de pestañas superpone el indicador home - Las pestañas de React Navigation pueden necesitar ajuste de safeAreaInsets. Solución: Pasa tabBarStyle: { height: 56 + insets.bottom } o usa valores por defecto de biblioteca en SDK 57.
Prueba solo en navegación 3-botón - La navegación por gesto cambia la altura del inset inferior. Solución: Alterna Configuración → Navegación del sistema en emulador.
Color de barra de navegación opaco peleando contra transparencia - Algunos skins OEM ignoran alpha. Solución: setPositionAsync("absolute") + reaplicar en foco.
Asumiendo que expo-status-bar añade padding - Solo estiliza iconos. Solución: Siempre empareja con react-native-safe-area-context.

Alternativas

Alternativa	Úsalo cuando	No lo uses cuando
`SafeAreaView` solo	Pantallas simples	FABs, layouts split hero/body
`useSafeAreaInsets()` en todas partes	Control granular	Padding repetitivo de cuatro ejes
Inmersivo `setVisibilityAsync("hidden")`	Video, cámara, juegos	Formularios - los usuarios pierden la asequibilidad de back del sistema
`android:fitsSystemWindows` en XML nativo	Layouts XML brownfield legados	Expo CNG greenfield - usa insets JS

Preguntas frecuentes

¿Es edge-to-edge obligatorio en RN 0.86?

Es el valor por defecto en la plantilla RN 0.86 de Android. Deshabilitarlo requiere cambios de tema nativo y lucha contra la dirección de la plataforma.
Prefiere aprender patrones de inset sobre optar por no participar.

¿Necesito expo-navigation-bar si solo uso SafeAreaView?

SafeAreaView maneja el padding de layout; expo-navigation-bar maneja el color de la barra de navegación y el contraste de botones.
Las barras de navegación transparentes usualmente necesitan ambas.

¿Por qué mi contenido salta cuando se abre el teclado?

Teclado y área segura son independientes. Combina KeyboardAvoidingView con inset inferior en la misma pantalla cuidadosamente - evita double bottom padding.

¿Afecta edge-to-edge a iOS?

iOS siempre ha usado áreas seguras para muescas. Android ahora se comporta de manera similar - SafeAreaProvider multiplataforma ayuda a ambas.

¿Cómo pruebo el contraste del icono de la barra de estado?

Alterna fondos hero light/dark en Storybook o una pantalla del menú dev.
Ejecuta en Samsung/Pixel físico - el tinted OEM difiere de AVD.

¿Pueden las pestañas de Expo Router manejar insets automáticamente?

Versiones recientes de @react-navigation/bottom-tabs respetan áreas seguras, pero barras de pestañas personalizadas necesitan insets.bottom manual.

¿Qué pasa con Android 15 edge-to-edge forzado?

Dirigirse a API 35 se alinea con las expectativas de la plataforma. La plantilla RN 0.86 está adelantada de la curva de política - aún prueba en API 35.

¿Cómo depuro valores de inset?

Registra useSafeAreaInsets() en compilaciones dev.
Compara emulador vs dispositivo - los insets de navegación por gesto difieren (~24-48dp).

¿Afecta el tema de la barra de navegación solo a la píldora de gesto?

setButtonStyleAsync afecta modos 3-botón y gesto; el color de fondo afecta el área de la barra detrás de la píldora.

¿Dónde está el análisis profundo de layout para áreas seguras?

Ver Safe Areas & Notches para patrones de edges y paridad iOS.

Relacionado

Safe Areas & Notches - prop edges y hooks de inset
Android Basics for RN Devs - niveles de API de emulador y Gradle
Permissions & Play Policy - no relacionado con barras pero frecuentemente probado en la misma matriz de API 35
../deep-linking/android-app-links/android-app-links.md - los enlaces profundos abren actividades pantalla completa - ten cuidado con inset en pantallas de aterrizaje

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Edge-to-Edge en Android

Receta

Ejemplo funcional

Análisis profundo

Cómo funciona

Antes vs Después de RN 0.86

API de expo-navigation-bar

Gradle / Flags de ventana (Cuando se necesitan plugins)

Patrones de Chrome de pantalla

Errores comunes

Alternativas

Preguntas frecuentes

Relacionado

Edge-to-Edge en Android

Receta

Ejemplo funcional

Análisis profundo

Cómo funciona

Antes vs Después de RN 0.86

API de expo-navigation-bar

Gradle / Flags de ventana (Cuando se necesitan plugins)

Patrones de Chrome de pantalla

Errores comunes

Alternativas

Preguntas frecuentes

Relacionado

Edge-to-Edge en Android

Buscar en la documentación

Edge-to-Edge en Android