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:
- Criar variáveis de estado locais (
const [isOpen, setIsOpen] = useState(false)). - Lutar com caixas nativas não estilizáveis (
alert()) que parecem completamente fora de lugar em iOS e Android. - 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-context2. 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'],
});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!

