Criando Modal Superior React Native Modernos: Do Bottom Sheet ao Top Alert

No desenvolvimento mobile, a forma como comunicamos informações ao usuário define a qualidade da experiência (UX). Um dos componentes mais versáteis para isso é o Modal. Neste artigo, vamos evoluir de um simples alerta central para uma Modal Superior React Native moderna, ideal para apps de alta fidelidade.

📚 Baixar o Código Base

1. O Conceito: Por que sair do padrão?

O componente Modal nativo costuma aparecer centralizado. No entanto, o design moderno utiliza variações de posicionamento para diferentes intenções:

• Bottom Sheets (Rodapé): Ideais para formulários ou menus rápidos, pois ficam próximos ao polegar do usuário.
• Top Alerts (Cabeçalho): Excelentes para notificações rápidas e avisos de sucesso, pois não interrompem totalmente o fluxo de leitura central.

2. Anatomia de um Modal Profissional

Para alcançar um visual de mercado, focamos em três pilares técnicos:

A. O Overlay (Camada de Fundo)

Em vez de esconder o app, usamos um fundo semitransparente. Isso mantém o usuário no contexto da aplicação.

overlay: {
  flex: 1,
  backgroundColor: 'rgba(0,0,0,0.4)', // Escurece o fundo suavemente
  justifyContent: 'flex-start',       // "Gruda" o conteúdo no topo
  alignItems: 'center',
}

B. Posicionamento e Segurança

Ao usar justifyContent: 'flex-start', o modal fixa-se no topo. Aplicamos uma margem superior (marginTop) para evitar que o conteúdo fique sob o “Notch” (a câmera frontal) do celular.

C. Elevação e Sombras

Para que o modal pareça estar “flutuando”, usamos o elevation (Android) e propriedades de shadow (iOS). Isso cria uma hierarquia visual clara.

3. Mão na Massa: Implementação Prática

Aqui está o código refatorado e pronto para o laboratório:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native';

export default function App() {
  const [modalVisivel, setModalVisivel] = useState(false);

  return (
    <View style={estilos.container}>
      <TouchableOpacity 
        style={estilos.botaoPrincipal} 
        onPress={() => setModalVisivel(true)}
      >
        <Text style={estilos.textoBotao}>Ativar Notificação</Text>
      </TouchableOpacity>

      <Modal 
        animationType="slide" // Transição suave vindo de cima
        transparent={true} 
        visible={modalVisivel}
        onRequestClose={() => setModalVisivel(false)}
      >
        <View style={estilos.overlay}>
          <View style={estilos.modalSuperior}>
            <View style={estilos.textoContainer}>
              <Text style={estilos.titulo}>Sucesso!</Text>
              <Text style={estilos.subtitulo}>Ação concluída com êxito.</Text>
            </View>
            
            <TouchableOpacity 
              style={estilos.botaoFechar} 
              onPress={() => setModalVisivel(false)}
            >
              <Text style={estilos.textoFechar}>OK</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const estilos = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  botaoPrincipal: {
    backgroundColor: '#6200ee',
    padding: 15,
    borderRadius: 8,
  },
  textoBotao: { color: '#fff', fontWeight: 'bold' },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  modalSuperior: {
    width: '90%',
    marginTop: 50,
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    elevation: 10, // Sombra para Android
  },
  titulo: { fontWeight: 'bold', fontSize: 16, color: '#333' },
  subtitulo: { color: '#666', fontSize: 14 },
  botaoFechar: { marginLeft: 10 },
  textoFechar: { color: '#6200ee', fontWeight: 'bold' }
});

🧠 Pensamento Analítico: O que aprendemos?

1. Hierarquia: Títulos em negrito e mensagens claras guiam o olho do usuário.
2. Acessibilidade: O onRequestClose é vital para que o botão “voltar” do Android funcione corretamente.
3. Toque: Usar TouchableOpacity em vez do botão padrão permite um design muito mais elegante e flexível.

⬅️ Artigo Anterior: Hooks: Como fazer seu App “lembrar” das informações

➡️ Próximo Passo: Dominando Modais: O Padrão Bottom Sheet React Native