Edge-to-Edge no Android

Q: Edge-to-edge é obrigatório no RN 0.86?

É o padrão no template Android do RN 0.86. Desabilitá-lo requer mudanças de tema nativas e vai contra a direção da plataforma. Prefira aprender os padrões de inset em vez de optar por não participar.

Q: Preciso de expo-navigation-bar se eu só usar SafeAreaView?

SafeAreaView lida com o preenchimento do layout; expo-navigation-bar lida com a cor da barra de navegação e o contraste dos botões. Barras de navegação transparentes geralmente precisam de ambos.

Q: Por que meu conteúdo salta quando o teclado abre?

O teclado e a área segura são independentes. Combine KeyboardAvoidingView com o inset inferior na mesma tela com cuidado - evite preenchimento inferior duplo.

Q: As abas do Expo Router podem lidar com insets automaticamente?

Versões recentes de @react-navigation/bottom-tabs respeitam áreas seguras, mas barras de abas personalizadas precisam de insets.bottom manual.

Q: Como depuro valores de inset?

Registre useSafeAreaInsets() em builds de desenvolvimento. Compare emulador vs dispositivo - os insets de navegação por gestos diferem (~24–48dp).

Q: A tematização da barra de navegação afeta apenas a pílula de gestos?

setButtonStyleAsync afeta os modos de 3 botões e gestos; a cor de fundo afeta a área da barra atrás da pílula.

Q: Onde está o mergulho profundo de layout para áreas seguras?

Veja Áreas Seguras e Entalhes para padrões de edges e paridade com iOS.

React Native 0.86 (Expo SDK 57) habilita o edge-to-edge no Android por padrão - seu aplicativo desenha atrás das barras de status e navegação, alinhando-se com as diretrizes do Android 15. Este cookbook cobre os padrões do RN, expo-status-bar, expo-navigation-bar e os padrões de inset que mantêm os botões tocáveis.

Receita

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

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

// app/_layout.tsx - shell raiz para edge-to-edge 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>
  );
}

// Tela com barra de abas - omita o inset inferior; preencha o 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 }}>{/* conteúdo */}</View>
      {/* FAB limpa a barra de navegação por gestos */}
      <View style={{ position: "absolute", right: 16, bottom: insets.bottom + 16 }} />
    </SafeAreaView>
  );
}

Quando usar isso:

Botões inferiores ficam sob a pílula de navegação por gestos do Android.
Ícones da barra de status ficam invisíveis em uma imagem de herói escura (ou vice-versa).
QA relata diferenças de layout entre emuladores API 33 e API 35.
Você deseja cabeçalhos imersivos de tela cheia sem abrir mão de alvos de toque seguros.

Exemplo de Trabalho

Passo 1 - Instalar módulos e envolver o aplicativo

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

Passo 2 - Dividir herói (tela cheia) e corpo (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" },
});

Passo 3 - Tematizar a barra de navegação por tela (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]),
  );
}

Passo 4 - Verificar no emulador API 35

npx expo run:android
# Gerenciador de Dispositivos → Pixel 8 API 35 → navegação por gestos ativada

O que isso demonstra:

SafeAreaProvider na raiz - necessário para hooks de inset no Android edge-to-edge.
StatusBar translucent - o conteúdo desenha por trás; você preenche com insets.
expo-navigation-bar - barra de navegação transparente com estilo de botão claro/escuro.
Propriedade de inset dividida - o herói se estende; o corpo e o FAB respeitam insets.bottom.

Mergulho Profundo

Como Funciona

RN 0.86 opta pelo edge-to-edge no nível da atividade/janela nativa - a janela se estende sob as barras do sistema.
Insets de react-native-safe-area-context relatam o quanto da tela é obscurecido pela barra de status, recorte de exibição e barra de navegação (gesto ou 3 botões).
expo-status-bar define a cor do ícone/texto (light | dark | auto) - não substitui o preenchimento de inset.
expo-navigation-bar controla o fundo da barra de navegação do Android, estilo do botão, visibilidade e posição (relative vs absolute).
Evitação de teclado é separada - KeyboardAvoidingView / react-native-keyboard-controller ainda se aplicam; o inset inferior e o teclado podem se sobrepor.

Antes vs Depois do RN 0.86

Preocupação	Pré-edge-to-edge	RN 0.86 edge-to-edge
Barra de status	Faixa opaca reservada pelo sistema	Conteúdo por trás; inset superior necessário
Barra de navegação	Barra opaca	Pílula de gesto sobrepõe o conteúdo; inset inferior
Fundo	Sólido atrás das barras	Tela cheia possível
Navegador de abas	Frequentemente "simplesmente funcionava"	Pode precisar de `edges` sem inferior

Método	Propósito
`setBackgroundColorAsync(color)`	Cor da barra de navegação - use `#RRGGBBAA` para transparência
`setButtonStyleAsync("light" \| "dark")`	Contraste para ícones de 3 botões/gestos
`setPositionAsync("absolute" \| "relative")`	`absolute` sobrepõe o conteúdo (edge-to-edge)
`setVisibilityAsync("visible" \| "hidden")`	Leitores imersivos - restaure ao perder o foco
`getBackgroundColorAsync()`	Depure a cor atual em scripts do menu de desenvolvimento

Flags do Gradle / Janela (Quando Plugins São Necessários)

A maioria dos templates do Expo SDK 57 habilita o edge-to-edge via prebuild. Se você mantém um fork bare android/:

// app.config.ts - prefira a configuração em vez de editar manualmente MainActivity
export default {
  expo: {
    android: {
      // O template RN 0.86 define edge-to-edge; confirme após o prebuild
    },
    plugins: [
      [
        "expo-build-properties",
        {
          android: {
            // compileSdk / targetSdk 35 para o comportamento mais recente da barra
            compileSdkVersion: 35,
            targetSdkVersion: 35,
          },
        },
      ],
    ],
  },
};

Inspecione android/app/src/main/res/values/styles.xml após o prebuild - windowLayoutInDisplayCutoutMode e cores de status/barra de navegação transparentes devem estar presentes no template RN 0.86.

Padrões de Chrome da Tela

Elemento da UI	Estratégia de Inset
Cabeçalho da Pilha (personalizado)	`paddingTop: insets.top`
Conteúdo da tela de abas	`edges={["top","left","right"]}` - a barra de abas é dona da parte inferior
Modal / bottom sheet	`edges={["bottom"]}` ou inset completo
Mapa / câmera em tela cheia	Ocultar barra de navegação temporariamente; restaurar ao sair
`FlatList` CTA no rodapé	`contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}`

Armadilhas

SafeAreaView e insets.top manual combinados - dobram o espaço superior. Correção: Um dono por eixo.
Ícones de status brancos em cabeçalho branco - StatusBar style="light" em fundo claro. Correção: Combine style com a luminância do fundo por tela.
Barra de abas sobrepõe o indicador inicial - Abas do React Navigation podem precisar de ajuste de safeAreaInsets. Correção: Passe tabBarStyle: { height: 56 + insets.bottom } ou use os padrões da biblioteca no SDK 57.
Testando apenas com navegação de 3 botões - A navegação por gestos altera a altura do inset inferior. Correção: Alterne Configurações → Navegação do sistema no emulador.
Cor opaca da barra de navegação lutando contra a transparência - Algumas skins de OEM ignoram o alfa. Correção: setPositionAsync("absolute") + reaplicar ao focar.
Assumindo que expo-status-bar adiciona preenchimento - Ele apenas estiliza ícones. Correção: Sempre combine com react-native-safe-area-context.

Alternativas

Alternativa	Use Quando	Não Use Quando
Apenas `SafeAreaView`	Telas simples	FABs, layouts de herói/corpo divididos
`useSafeAreaInsets()` em todos os lugares	Controle granular	Preenchimento repetitivo de quatro bordas
`setVisibilityAsync("hidden")` imersivo	Vídeos, câmeras, jogos	Formulários - usuários perdem o controle de voltar do sistema
`android:fitsSystemWindows` em XML nativo	Layouts legacy brownfield em XML	Expo CNG Greenfield - use insets de JS

FAQs

Edge-to-edge é obrigatório no RN 0.86?

É o padrão no template Android do RN 0.86. Desabilitá-lo requer mudanças de tema nativas e vai contra a direção da plataforma.
Prefira aprender os padrões de inset em vez de optar por não participar.

Preciso de expo-navigation-bar se eu só usar SafeAreaView?

SafeAreaView lida com o preenchimento do layout; expo-navigation-bar lida com a cor da barra de navegação e o contraste dos botões.
Barras de navegação transparentes geralmente precisam de ambos.

Por que meu conteúdo salta quando o teclado abre?

O teclado e a área segura são independentes. Combine KeyboardAvoidingView com o inset inferior na mesma tela com cuidado - evite preenchimento inferior duplo.

Edge-to-edge afeta o iOS?

O iOS sempre usou áreas seguras para entalhes. O Android agora se comporta de forma semelhante - SafeAreaProvider multiplataforma ajuda ambos.

Como testo o contraste dos ícones da barra de status?

Alterne fundos de heróis claros/escuros no Storybook ou em uma tela de menu de desenvolvimento.
Execute em Samsung/Pixel físicos - a coloração OEM difere do AVD.

As abas do Expo Router podem lidar com insets automaticamente?

Versões recentes de @react-navigation/bottom-tabs respeitam áreas seguras, mas barras de abas personalizadas precisam de insets.bottom manual.

E o Android 15 forçando edge-to-edge?

O direcionamento para API 35 está alinhado com as expectativas da plataforma. O template RN 0.86 está à frente da curva de políticas - ainda teste na API 35.

Como depuro valores de inset?

Registre useSafeAreaInsets() em builds de desenvolvimento.
Compare emulador vs dispositivo - os insets de navegação por gestos diferem (~24–48dp).

A tematização da barra de navegação afeta apenas a pílula de gestos?

setButtonStyleAsync afeta os modos de 3 botões e gestos; a cor de fundo afeta a área da barra atrás da pílula.

Onde está o mergulho profundo de layout para áreas seguras?

Veja Áreas Seguras e Entalhes para padrões de edges e paridade com iOS.

Relacionado

Áreas Seguras e Entalhes - Prop edges e hooks de inset
Noções Básicas de Android para Desenvolvedores RN - níveis de API de emulador e Gradle
Permissões e Política de Play - não relacionado às barras, mas frequentemente testado na mesma matriz API 35
../deep-linking/android-app-links/android-app-links.md - links profundos abrem atividades em tela cheia - atenção ao inset nas telas de destino

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

Receita

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

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

// app/_layout.tsx - shell raiz para edge-to-edge 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>
  );
}

// Tela com barra de abas - omita o inset inferior; preencha o 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 }}>{/* conteúdo */}</View>
      {/* FAB limpa a barra de navegação por gestos */}
      <View style={{ position: "absolute", right: 16, bottom: insets.bottom + 16 }} />
    </SafeAreaView>
  );
}

Quando usar isso:

Botões inferiores ficam sob a pílula de navegação por gestos do Android.
Ícones da barra de status ficam invisíveis em uma imagem de herói escura (ou vice-versa).
QA relata diferenças de layout entre emuladores API 33 e API 35.
Você deseja cabeçalhos imersivos de tela cheia sem abrir mão de alvos de toque seguros.

Exemplo de Trabalho

Passo 1 - Instalar módulos e envolver o aplicativo

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

Passo 2 - Dividir herói (tela cheia) e corpo (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" },
});

Passo 3 - Tematizar a barra de navegação por tela (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]),
  );
}

Passo 4 - Verificar no emulador API 35

npx expo run:android
# Gerenciador de Dispositivos → Pixel 8 API 35 → navegação por gestos ativada

O que isso demonstra:

SafeAreaProvider na raiz - necessário para hooks de inset no Android edge-to-edge.
StatusBar translucent - o conteúdo desenha por trás; você preenche com insets.
expo-navigation-bar - barra de navegação transparente com estilo de botão claro/escuro.
Propriedade de inset dividida - o herói se estende; o corpo e o FAB respeitam insets.bottom.

Mergulho Profundo

Como Funciona

RN 0.86 opta pelo edge-to-edge no nível da atividade/janela nativa - a janela se estende sob as barras do sistema.
Insets de react-native-safe-area-context relatam o quanto da tela é obscurecido pela barra de status, recorte de exibição e barra de navegação (gesto ou 3 botões).
expo-status-bar define a cor do ícone/texto (light | dark | auto) - não substitui o preenchimento de inset.
expo-navigation-bar controla o fundo da barra de navegação do Android, estilo do botão, visibilidade e posição (relative vs absolute).
Evitação de teclado é separada - KeyboardAvoidingView / react-native-keyboard-controller ainda se aplicam; o inset inferior e o teclado podem se sobrepor.

Antes vs Depois do RN 0.86

Preocupação	Pré-edge-to-edge	RN 0.86 edge-to-edge
Barra de status	Faixa opaca reservada pelo sistema	Conteúdo por trás; inset superior necessário
Barra de navegação	Barra opaca	Pílula de gesto sobrepõe o conteúdo; inset inferior
Fundo	Sólido atrás das barras	Tela cheia possível
Navegador de abas	Frequentemente "simplesmente funcionava"	Pode precisar de `edges` sem inferior

Método	Propósito
`setBackgroundColorAsync(color)`	Cor da barra de navegação - use `#RRGGBBAA` para transparência
`setButtonStyleAsync("light" \| "dark")`	Contraste para ícones de 3 botões/gestos
`setPositionAsync("absolute" \| "relative")`	`absolute` sobrepõe o conteúdo (edge-to-edge)
`setVisibilityAsync("visible" \| "hidden")`	Leitores imersivos - restaure ao perder o foco
`getBackgroundColorAsync()`	Depure a cor atual em scripts do menu de desenvolvimento

Flags do Gradle / Janela (Quando Plugins São Necessários)

A maioria dos templates do Expo SDK 57 habilita o edge-to-edge via prebuild. Se você mantém um fork bare android/:

// app.config.ts - prefira a configuração em vez de editar manualmente MainActivity
export default {
  expo: {
    android: {
      // O template RN 0.86 define edge-to-edge; confirme após o prebuild
    },
    plugins: [
      [
        "expo-build-properties",
        {
          android: {
            // compileSdk / targetSdk 35 para o comportamento mais recente da barra
            compileSdkVersion: 35,
            targetSdkVersion: 35,
          },
        },
      ],
    ],
  },
};

Padrões de Chrome da Tela

Elemento da UI	Estratégia de Inset
Cabeçalho da Pilha (personalizado)	`paddingTop: insets.top`
Conteúdo da tela de abas	`edges={["top","left","right"]}` - a barra de abas é dona da parte inferior
Modal / bottom sheet	`edges={["bottom"]}` ou inset completo
Mapa / câmera em tela cheia	Ocultar barra de navegação temporariamente; restaurar ao sair
`FlatList` CTA no rodapé	`contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}`

Armadilhas

SafeAreaView e insets.top manual combinados - dobram o espaço superior. Correção: Um dono por eixo.
Ícones de status brancos em cabeçalho branco - StatusBar style="light" em fundo claro. Correção: Combine style com a luminância do fundo por tela.
Barra de abas sobrepõe o indicador inicial - Abas do React Navigation podem precisar de ajuste de safeAreaInsets. Correção: Passe tabBarStyle: { height: 56 + insets.bottom } ou use os padrões da biblioteca no SDK 57.
Testando apenas com navegação de 3 botões - A navegação por gestos altera a altura do inset inferior. Correção: Alterne Configurações → Navegação do sistema no emulador.
Cor opaca da barra de navegação lutando contra a transparência - Algumas skins de OEM ignoram o alfa. Correção: setPositionAsync("absolute") + reaplicar ao focar.
Assumindo que expo-status-bar adiciona preenchimento - Ele apenas estiliza ícones. Correção: Sempre combine com react-native-safe-area-context.

Alternativas

Alternativa	Use Quando	Não Use Quando
Apenas `SafeAreaView`	Telas simples	FABs, layouts de herói/corpo divididos
`useSafeAreaInsets()` em todos os lugares	Controle granular	Preenchimento repetitivo de quatro bordas
`setVisibilityAsync("hidden")` imersivo	Vídeos, câmeras, jogos	Formulários - usuários perdem o controle de voltar do sistema
`android:fitsSystemWindows` em XML nativo	Layouts legacy brownfield em XML	Expo CNG Greenfield - use insets de JS

FAQs

Edge-to-edge é obrigatório no RN 0.86?

É o padrão no template Android do RN 0.86. Desabilitá-lo requer mudanças de tema nativas e vai contra a direção da plataforma.
Prefira aprender os padrões de inset em vez de optar por não participar.

Preciso de expo-navigation-bar se eu só usar SafeAreaView?

SafeAreaView lida com o preenchimento do layout; expo-navigation-bar lida com a cor da barra de navegação e o contraste dos botões.
Barras de navegação transparentes geralmente precisam de ambos.

Por que meu conteúdo salta quando o teclado abre?

O teclado e a área segura são independentes. Combine KeyboardAvoidingView com o inset inferior na mesma tela com cuidado - evite preenchimento inferior duplo.

Edge-to-edge afeta o iOS?

O iOS sempre usou áreas seguras para entalhes. O Android agora se comporta de forma semelhante - SafeAreaProvider multiplataforma ajuda ambos.

Como testo o contraste dos ícones da barra de status?

Alterne fundos de heróis claros/escuros no Storybook ou em uma tela de menu de desenvolvimento.
Execute em Samsung/Pixel físicos - a coloração OEM difere do AVD.

As abas do Expo Router podem lidar com insets automaticamente?

Versões recentes de @react-navigation/bottom-tabs respeitam áreas seguras, mas barras de abas personalizadas precisam de insets.bottom manual.

E o Android 15 forçando edge-to-edge?

O direcionamento para API 35 está alinhado com as expectativas da plataforma. O template RN 0.86 está à frente da curva de políticas - ainda teste na API 35.

Como depuro valores de inset?

Registre useSafeAreaInsets() em builds de desenvolvimento.
Compare emulador vs dispositivo - os insets de navegação por gestos diferem (~24–48dp).

A tematização da barra de navegação afeta apenas a pílula de gestos?

setButtonStyleAsync afeta os modos de 3 botões e gestos; a cor de fundo afeta a área da barra atrás da pílula.

Onde está o mergulho profundo de layout para áreas seguras?

Veja Áreas Seguras e Entalhes para padrões de edges e paridade com iOS.

Relacionado

Áreas Seguras e Entalhes - Prop edges e hooks de inset
Noções Básicas de Android para Desenvolvedores RN - níveis de API de emulador e Gradle
Permissões e Política de Play - não relacionado às barras, mas frequentemente testado na mesma matriz API 35
../deep-linking/android-app-links/android-app-links.md - links profundos abrem atividades em tela cheia - atenção ao inset nas telas de destino

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

Edge-to-Edge no Android

Receita

Exemplo de Trabalho

Mergulho Profundo

Como Funciona

Antes vs Depois do RN 0.86

API do expo-navigation-bar

Flags do Gradle / Janela (Quando Plugins São Necessários)

Padrões de Chrome da Tela

Armadilhas

Alternativas

FAQs

Relacionado

Edge-to-Edge no Android

Receita

Exemplo de Trabalho

Mergulho Profundo

Como Funciona

Antes vs Depois do RN 0.86

API do expo-navigation-bar

Flags do Gradle / Janela (Quando Plugins São Necessários)

Padrões de Chrome da Tela

Armadilhas

Alternativas

FAQs

Relacionado

Edge-to-Edge no Android

Buscar na documentação

Edge-to-Edge no Android