Safe areas no React Native: notch, Dynamic Island e barra de gestos

O layout ficou perfeito no simulador. No iPhone do cliente, o título some atrás da Dynamic Island e o botão principal fica embaixo da barra de gestos. No Android, a barra de navegação cobre a última linha da lista. São as safe areas — e cada aparelho tem as suas.

O que são

Áreas da tela onde o conteúdo pode ser exibido sem ser coberto por recortes, cantos arredondados ou barras do sistema. Elas mudam por modelo, por orientação e se o teclado está aberto.

A biblioteca certa

react-native-safe-area-context é o padrão: informa os recuos exatos de cada aparelho.

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

function Rodape() {
  const insets = useSafeAreaInsets()
  return <View style={{ paddingBottom: Math.max(insets.bottom, 16) }}>{/* botões */}</View>
}

Boas práticas

• Fundos vão até a borda; conteúdo respeita a área segura. A cor do cabeçalho preenche atrás do notch, o texto começa abaixo.
• Listas: aplique o recuo inferior no conteúdo da lista, não no contêiner, para que a rolagem passe por trás da barra de forma natural.
• Botões fixos no rodapé: some o recuo inferior ao espaçamento normal.
• Modo paisagem: os recuos laterais também importam.
• Android com navegação por gestos: teste com e sem a barra de botões.

Faz parte das diretrizes

Respeitar a área segura é exigência das diretrizes da Apple e do Google — tema de Human Interface Guidelines e Material Design 3: um app, duas plataformas. Na web, o equivalente está em Safe areas do iPhone na web: notch, barra inferior e viewport-fit.

Acabamento nativo é padrão nos apps da We Codex. Fale com a gente.