Como Funciona o Modal em React Native? Entenda com um Exemplo Prático

Se você está começando com React Native e quer entender como criar uma interface mais interativa, o componente Modal é uma ferramenta essencial. Neste artigo, vamos mostrar como ele funciona na prática com um exemplo simples e direto, ideal para quem está no curso técnico em Desenvolvimento de Sistemas.

O que é um Modal?

Um modal é uma janela que aparece por cima da tela atual. Ele é muito usado para exibir mensagens, formulários, avisos ou qualquer conteúdo que exija a atenção do usuário sem mudar de tela.

Exemplo de código: Criando um Modal simples

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

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

  const entrar = () => {
    setModalVisivel(true);
  };

  const sair = () => {
    setModalVisivel(false);
  };

  return (
    <View style={estilos.container}>
      <Button title="Entrar" onPress={entrar} />

      <Modal animationType="slide" visible={modalVisivel} transparent={true}>
        <View style={estilos.modalInvisivel}>
          <View style={estilos.modalConteudo}>
            <Text style={estilos.textoModal}>Olá, eu sou um Modal</Text>
            <Button title="Sair" onPress={sair} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const estilos = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ddd',
  },
  modalInvisivel: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalConteudo: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 10,
    elevation: 10,
    alignItems: 'center',
  },
  textoModal: {
    fontSize: 18,
    marginBottom: 10,
  },
});

Entendendo o código

1. useState para controlar a visibilidade

const [modalVisivel, setModalVisivel] = useState(false);

Aqui usamos o React Hook useState para criar uma variável que controla se o modal está visível ou não. Quando modalVisivel for true, o modal aparece; quando for false, ele desaparece.

2. Funções entrar e sair

const entrar = () => {
  setModalVisivel(true);
};

const sair = () => {
  setModalVisivel(false);
};

Essas funções servem para abrir e fechar o modal.

3. O componente Modal

<Modal animationType="slide" visible={modalVisivel} transparent={true}>

Esse é o componente principal. Os principais atributos são:

• animationType=”slide”: o modal aparece com uma animação de deslizamento.
• visible={modalVisivel}: controla se o modal está visível.
• transparent={true}: permite que o fundo fique levemente escurecido, criando um efeito de sobreposição.

4. Estilização

Dentro do modal, usamos dois Views:

• O primeiro (modalInvisivel) serve como fundo semitransparente.
• O segundo (modalConteudo) é o conteúdo central do modal.

Resultado

Ao clicar no botão “Entrar”, o modal aparece com uma animação, mostrando a mensagem “Olá, eu sou um Modal” e um botão “Sair”. Quando clicamos em “Sair”, o modal desaparece.

Conclusão

O componente Modal do React Native é muito útil para criar interações rápidas com o usuário, sem sair da tela atual. Com o controle da visibilidade via useState, é fácil mostrar e esconder o conteúdo sempre que for necessário.

Esse tipo de recurso é excelente para aplicações móveis que precisam de confirmações, avisos ou formulários rápidos. Agora que você aprendeu o básico, que tal experimentar com outros conteúdos dentro do modal?

Se você curtiu esse conteúdo, compartilhe com seus colegas e continue explorando o universo do React Native!