Busque em todas as páginas da documentação
Guia de decisão classificada para quando iOS e Android diferem intencionalmente em aplicativos Expo SDK 57 - escolha a melhor abordagem por cenário, documente a chamada e evite desvios silenciosos que confundem usuários e QA.
Cenário: Checkout em várias etapas dentro de uma pilha; os usuários esperam voltar sem perder o estado do carrinho.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Volta nativa da plataforma | Swipe-da-borda do iOS + voltar no cabeçalho; volta de hardware/gesto do Android via pilha do Expo Router |
| 2ª | Volta personalizada no cabeçalho com lógica compartilhada | Um manipulador onBack; ícones de plataforma do sistema de design |
| 3ª | Botão de voltar universal flutuante | FAB no canto inferior esquerdo - aceitável apenas em jogos ou mídia imersiva |
Escolha errada: Desabilitar o botão voltar do sistema Android para forçar um botão de texto "Voltar" centralizado - os usuários desistem quando o gesto de voltar sai inesperadamente do aplicativo.
Por que o melhor é o melhor: A memória muscular dos usuários navega pelo SO. O router.back() do Router, conectado ao cabeçalho e ao BackHandler do Android, preserva o estado sem lutar contra a plataforma.
Cenário: Formulário de inscrição longo; o CTA principal deve ser óbvio em ambas as plataformas.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | CTA fixo no rodapé (compartilhado) | Botão de largura total acima da área segura; teste de esquiva de teclado em ambos os SOs |
| 2ª | Ação de texto no canto superior direito do iOS + FAB do Android | Divergência documentada para aplicativos de power-user |
| 3ª | Envio inline após o último campo apenas | Aceitável para fluxos de 2 campos |
Escolha errada: "Concluído" em texto no canto superior direito apenas para iOS, sem equivalente no Android escondido no menu de overflow - usuários Android nunca encontram o envio.
Por que o melhor é o melhor: O rodapé fixo sobrevive ao teclado e à digitação dinâmica; uma matriz de QA de layout. O posicionamento específico da plataforma dobra o custo de design e teste para ganho de UX marginal.
Cenário: Agendar consulta; escolher data + hora com validação.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Seletores de plataforma | @react-native-community/datetimepicker - spinner no iOS, calendário/diálogo no Android |
| 2ª | Seletor personalizado unificado em planilha inferior | Aplicativos de agendamento críticos para a marca com orçamento de movimento |
| 3ª | Calendário inline estilo web sempre visível | Apenas em layouts de tablet |
Escolha errada: Forçar a estilização do seletor de roda do iOS no Android - parece estranho e falha nas expectativas do TalkBack/VoiceOver.
Por que o melhor é o melhor: Seletores nativos são rápidos, respeitam o idioma e passam pela verificação de acessibilidade da loja. Seletores personalizados precisam de picos - Trabalhando com Design e Movimento.
Cenário: Usuário compartilha link de referência ou exporta PDF de uma tela de detalhes.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | expo-sharing + folha de compartilhamento do sistema | Destinos nativos do SO (Mensagens, Drive, etc.) |
| 2ª | Destinos de compartilhamento personalizados no aplicativo | Quando a análise requer rastreamento de canal por toque |
| 3ª | Copiar apenas o link | MVP aceitável; expandir antes das campanhas de crescimento |
Escolha errada: Recriar toda a folha de compartilhamento do SO em RN - pesadelo de manutenção; nunca corresponde aos aplicativos instalados.
Por que o melhor é o melhor: Folhas do sistema são atualizadas com o SO - novos destinos aparecem sem lançamentos de aplicativos. UI personalizada é diferenciação de produto, não padrão.
Cenário: O aplicativo tem 4–5 destinos de nível superior; o PM quer "o mesmo que a barra lateral da web".
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Abas inferiores (telefone) | Expo Router (tabs) - alcançável pelo polegar; convenções de barra de abas Material/iOS |
| 2ª | Gaveta no Android + abas no iOS | Divergência documentada; raro, exceto em aplicativos de administração corporativa |
| 3ª | Apenas navegação com hambúrguer | Aceitável para 6+ destinos com IA clara |
Escolha errada: Barra lateral esquerda permanente em retrato de telefone - desperdiça espaço horizontal; luta contra o uso com uma mão.
Por que o melhor é o melhor: IA móvel centraliza abas inferiores; tablets podem usar visualização dividida mais tarde. O modelo mental da barra lateral da web não se transfere para uma largura de 390px.
Cenário: Confirmar exclusão destrutiva; precisa de atenção do usuário sem perder o contexto.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Alerta de plataforma / folha de ação | Alert.alert simples; @expo/react-native-action-sheet para 3+ ações |
| 2ª | Folha inferior (compartilhada) | @gorhom/bottom-sheet - corresponde à folha moderna do iOS + diálogo inferior do Android |
| 3ª | Modal centrado estilo web | Apenas para tablets de desktop |
Escolha errada: Modal de tela cheia bloqueante sem gesto de descarte no Android - viola as expectativas de volta do Material.
Por que o melhor é o melhor: Confirmações destrutivas mapeiam claramente para diálogos de plataforma. Folhas escalam para conteúdo rico; modais centralizados parecem importados da web em telefones.
Cenário: Atualização da lista de feed; a marca tem uma animação de carregamento personalizada.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Controle de atualização da plataforma | RefreshControl com token de cor de destaque da marca |
| 2ª | Cabeçalho Lottie personalizado | Aplicativos com forte foco em marketing; orçamento Reanimated + sincronização de rolagem |
| 3ª | Apenas botão de atualização manual | Listas offline-first onde o gesto de puxar entra em conflito com o swipe da linha |
Escolha errada: Desabilitar puxar para atualizar apenas no iOS porque a animação personalizada era apenas para Android - os usuários relatam "quebrado" nas avaliações da App Store.
Por que o melhor é o melhor: RefreshControl é uma propriedade; o destaque alinha a marca sem física de rolagem personalizada. Atualização personalizada requer Resolução de Conflitos de Gestos.
Cenário: A marca usa fonte personalizada; o texto do corpo deve parecer nativo.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Fonte de marca personalizada + pilha de fallback do sistema | Carregamento expo-font; fallback SF Pro / Roboto para CJK e glifos ausentes |
| 2ª | Fonte do sistema da plataforma para corpo, marca para exibição | Reduz o pacote; ritmo ligeiramente diferente entre plataformas |
| 3ª | Arquivos de fonte web idênticos em ambas as plataformas | Aceitável quando o marketing exige paridade de pixels |
Escolha errada: Assumir que os arquivos web do Google Fonts renderizam identicamente no iOS sem testar diacríticos e números tabulares.
Por que o melhor é o melhor: Legibilidade móvel e tamanho do pacote são importantes. Tipografia tokenizada de Noções Básicas de Sistemas de Design documenta quais funções usam marca vs. sistema.
Cenário: Acesso à câmera para foto de perfil; a loja exige strings de propósito claras.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Tela de educação no aplicativo → prompt do sistema | Mesma cópia em ambas as plataformas; strings de Info.plist + AndroidManifest localizadas |
| 2ª | Apenas pré-prompt do iOS (Android vai direto para o sistema) | Aceitável - Android não tem padrão oficial de pré-prompt |
| 3ª | UI personalizada de "permissão" falsa que não é diálogo do sistema | Enganoso; risco de rejeição pela loja |
Escolha errada: Texto de justificativa de permissão diferente por plataforma sem revisão legal - falha de conformidade em contratos corporativos.
Por que o melhor é o melhor: Um fluxo de educação; o diálogo nativo ainda é controlado pelo SO. Documente o caminho "não perguntar novamente" do Android em macros de suporte.
Cenário: Pagamento bem-sucedido, erro de formulário, alternar favorito - especificação de design inclui feedback háptico.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | expo-haptics do iOS + fallback de vibração curta do Android | Mapear eventos semânticos: sucesso → notificação de sucesso; erro → padrão de erro |
| 2ª | Apenas haptics do iOS; Android silencioso | Divergência documentada para deleite de baixa prioridade |
| 3ª | Vibração longa idêntica em ambas as plataformas | Parece agressivo no iPhone; evitar |
Escolha errada: Chamar haptics em cada tick de rolagem da lista - dreno de bateria e reclamações de "feedback excessivo" na App Store.
Por que o melhor é o melhor: O mapeamento semântico preserva a intenção sem fingir que o hardware é idêntico. A amplitude de vibração do Android varia por OEM - mantenha os padrões curtos.
Cenário: O aplicativo suporta modo escuro; o Android Material You puxa cores do papel de parede.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Tokens semânticos compartilhados + provedor de tema de plataforma | useColorScheme + Temas e Sabores de Marca |
| 2ª | Paleta hexadecimal idêntica em ambos os modos | Sem cor dinâmica no Android 12+ |
| 3ª | Apenas modo claro | Aceitável a curto prazo; documentar débito técnico |
Escolha errada: Fundos com #FFFFFF codificados - o modo escuro do Android e a inversão inteligente do iOS quebram layouts.
Por que o melhor é o melhor: Tokens semânticos surface, textPrimary absorvem o tema da plataforma sem redesenhar cada tela no Figma.
Cenário: Marketing quer opt-in push no primeiro lançamento; engenharia prefere prompt contextual.
| Classificação | Escolha | Abordagem |
|---|---|---|
| Melhor | Prompt contextual após o primeiro momento de valor | por exemplo, após o primeiro pedido - maior opt-in, mesma API em ambas as plataformas |
| 2ª | Provisório do iOS / Canais de notificação do Android | APIs específicas da plataforma com documento de tempo de produto compartilhado |
| 3ª | Modal no dia do lançamento | Apenas se a conformidade exigir; espere menor opt-in |
Escolha errada: Prompt do sistema iOS no início frio antes do login - as Diretrizes de Interface Humana da Apple desaconselham; os usuários tocam em Não Permitir permanentemente.
Por que o melhor é o melhor: O tempo é política de produto; a implementação usa expo-notifications uma vez. A divergência é quando, não se, perguntar.
Não - eles devem parecer coerentes. IA, tokens e cópia compartilhados; navegação nativa e componentes do sistema podem diferir. Documente deltas intencionais em ADRs.
PM + líder de design + líder de engenharia. O QA recebe uma matriz de paridade listando telas que diferem - não uma única captura de tela dourada.
O modelo de PR exige capturas de tela do iOS + Android para alterações de UI. Builds de pré-visualização de CI em ambas as plataformas. Desvio não intencional é um bug; intencional é documentado.
Trate como decisões separadas - paridade de telefone primeiro. Dobráveis podem seguir as diretrizes adaptativas do Material do Android, enquanto o iPad usa navegação dividida.
A estrutura de arquivos do Router é compartilhada; opções de apresentação (presentation: "modal") podem divergir por plataforma com Platform.select - ainda documente a escolha.
Versões da pilha: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026