Comunidade

A Maneira Limpa de Lidar com Modais em React Native (Sem Estado Inicial Requerido)

A biblioteca rn-lean-dialog simplifica a criação de modais em React Native, oferecendo uma experiência semelhante à do JavaScript padrão com funcionalidades imperativas e baseadas em promessas. Ela permite criar alertas, confirmações e action sheets de forma limpa e linear, além de garantir desempenho nativo e controle total sobre o estilo.

Compartilhar
Medium

A Maneira Limpa de Lidar com Modais em React Native (Sem Estado Inicial Requerido)

Traga comportamento semelhante ao window.confirm() do web e fluxos assíncronos limpos para seu aplicativo móvel, com zero boilerplate de estado inicial e controle absoluto de estilo.

Se você tem mais de uma semana construindo aplicativos React Native, já encontrou exatamente essa parede: você precisa mostrar um popup simples de confirmação antes que o usuário exclua sua conta ou descarte mudanças não salvas.

O que deveria levar uma única linha de código se torna um desafio frustrante:

  1. Criar variáveis de estado locais (const [isOpen, setIsOpen] = useState(false)).
  2. Lutar com caixas nativas não estilizáveis (alert()) que parecem completamente fora de lugar em iOS e Android.
  3. Gerenciar callbacks complexos, prop drilling ou gerenciadores globais pesados apenas para capturar um simples “Sim” ou “Não”.

Nos cansamos de escrever esse boilerplate em cada projeto. Então, construímos rn-lean-dialog—uma biblioteca ultra-leve, imperativa e baseada em promessas para diálogos e painéis de ação projetados para dar simplicidade web-like aos seus aplicativos React Native com desempenho nativo.

A Solução: Modais async/await Puros

rn-lean-dialog traz comportamento semelhante ao window.confirm() e prompt direto para React Native. Em vez de gerenciar o estado local aberto/fechado, seu código pausa a execução até que o usuário toque em uma opção, permitindo que você escreva lógica limpa e linear:

Por que os Desenvolvedores Estão Migrando

  • Imperativo e Baseado em Promessas: Disparar alertas, confirmações e action sheets inferiores (Dialog.select(...)) de qualquer lugar do seu código — mesmo fora dos componentes React como interceptores da rede Axios ou Redux thunks.
  • Tema Global e Sobrescritas Locais: Definir o modo escuro ou as cores da sua marca uma vez na raiz <DialogHost/>, mas facilmente sobrescrever ações específicas localmente (como tornar um botão de exclusão permanentemente vermelho).
  • Camada Modal Real: Embalado pelo componente nativo React Native <Modal> por baixo, garantindo que ele se livre de armadilhas de layout e renderize suavemente sobre abas inferiores, pilhas, gavetas e navegadores aninhados.
  • Sistema de Fila Inteligente: Se várias caixas de diálogo dispararem ao mesmo tempo, elas se enfileirarão graciosamente e serão executadas sequencialmente sem sobreposições visuais.
  • Física Suave de 60fps: Impulsionado inteiramente por animações nativas (useNativeDriver: true) para que o seu aplicativo nunca perca quadros.

Guia Rápido de Início

1. Instalação

Instale a biblioteca juntamente com sua dependência de pares:

npm install rn-lean-dialog react-native-safe-area-context
# ou
yarn add rn-lean-dialog react-native-safe-area-context

2. Monte o Host na Raiz do Seu Aplicativo

Coloque o <DialogHost/> uma vez na raiz do seu aplicativo, envolvido dentro do seu SafeAreaProvider:

3. Use-o em Qualquer Lugar

import { Dialog } from 'rn-lean-dialog';
// 1. Alerta Simples
await Dialog.alert({
title: 'Perfil Atualizado',
message: 'Suas alterações foram salvas com sucesso.',
});
// 2. Ficha de Ações Inferior
const selected = await Dialog.select({
title: 'Escolha a Foto do Perfil',
options: ['Tirar Foto', 'Escolher da Biblioteca', 'Remover Atual'],
});
Pressione enter ou clique para ver a imagem em tamanho completo

Comece Hoje

Pare de inchar seus componentes com variáveis de estado modal. Confira o código-fonte, dê um estrela no GitHub e torne seu repositório de código magro!

Fonte original

Conteúdo traduzido e adaptado pela redação do Notícias Mobile. Confira também a matéria na fonte original.

Leia a matéria completa