Criando um componente Modal com React Native

Neste artigo, vamos aprender a criar um componente Modal em React Native. O Modal é uma das formas mais comuns de exibir informações em um aplicativo, geralmente utilizado para exibir informações importantes ou para receber entrada do usuário.

 

Confira o blog DougDesign para e veja como conseguir seu primeiro emprego na área de proramação e tecnologia.

 

Pré-requisitos

Antes de começar a criar o componente Modal, você precisará ter o ambiente de desenvolvimento React Native configurado em seu sistema. Para isso, você precisará seguir as instruções de instalação em https://reactnative.dev/docs/environment-setup.

 

Confira o blog DougDesign para e veja como conseguir seu primeiro emprego na área de proramação e tecnologia.

Passo 1: Configurando o componente Modal

O primeiro passo para criar um componente Modal em React Native é importar o componente Modal da biblioteca React Native. 

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

Em seguida, crie um componente de função chamado ModalComponent e use o componente Modal importado anteriormente para exibir um modal.

const ModalComponent = () => {

  const [modalVisible, setModalVisible] = useState(false);

  return (

    <View>

      <Modal

        animationType="slide"

        transparent={true}

        visible={modalVisible}

        onRequestClose={() => {

          Alert.alert("Modal has been closed.");

          setModalVisible(!modalVisible);

        }}

      >

        <View>

          <Text>Modal Content</Text>

        </View>

      </Modal>

    </View>

  );

};

O código acima define um estado modalVisible para controlar a visibilidade do modal e exibe o componente Modal. O prop animationType especifica a animação a ser usada para exibir o modal, o prop transparent especifica se o modal deve ser transparente e o prop visible é usado para especificar a visibilidade do modal.

O prop onRequestClose é usado para especificar uma função que é chamada quando o usuário pressiona o botão voltar do dispositivo enquanto o modal está visível.

Passo 2: Exibindo e fechando o componente Modal

Para exibir o componente Modal, você pode usar o botão ou qualquer outro elemento para chamar a função que altera o estado modalVisible para true. Por exemplo:

<TouchableOpacity onPress={() => setModalVisible(true)}>
  <Text>Open Modal</Text>
</TouchableOpacity>

Para fechar o componente Modal, você pode usar o botão ou qualquer outro elemento para chamar a função que altera o estado modalVisible para false. Por exemplo:

<TouchableOpacity onPress={() => setModalVisible(false)}>
  <Text>Close Modal</Text>
</TouchableOpacity>

Passo 3: Personalizando o componente Modal

Agora que você sabe como criar um componente Modal em React Native, vamos personalizá-lo para atender às suas necessidades.

Definindo o estilo do componente Modal

Para definir o estilo do componente Modal, você pode adicionar uma folha de estilo dentro do componente ModalComponent.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
    }
    modalText: {
        marginBottom: 15,
        textAlign: 'center',
    },
});

O estilo acima define um contêiner com `flex: 1`, o que significa que o contêiner ocupa todo o espaço disponível na tela. O estilo do modal `modalView` define o estilo do modal em si e o estilo `modalText` define o estilo do texto dentro do modal.

Personalizando o conteúdo do componente Modal

Para personalizar o conteúdo do componente Modal, você pode adicionar seus próprios elementos ao componente Modal. Por exemplo, você pode adicionar um título e um botão de fechamento personalizado.

<Modal
  animationType="slide"
  transparent={true}
  visible={modalVisible}
  onRequestClose={() => {
    Alert.alert('Modal has been closed.');
    setModalVisible(!modalVisible);
  }}
>
  <View style={styles.container}>
    <View style={styles.modalView}>
      <Text style={styles.modalText}>Modal Title</Text>
      <TouchableOpacity
        style={{ ...styles.button, backgroundColor: '#2196F3' }}
        onPress={() => setModalVisible(!modalVisible)}
      >
        <Text style={styles.textStyle}>Fechar</Text>
      </TouchableOpacity>
    </View>
  </View>
</Modal>

O código acima adiciona um título ao modal e um botão de fechamento personalizado.

Usando o componente Modal em seu aplicativo

Para usar o componente Modal em seu aplicativo, basta importar o componente ModalComponent e adicioná-lo a qualquer tela que desejar.

import ModalComponent from './ModalComponent';

export default function App() {
  return (
    <View style={styles.container}>
      <ModalComponent />
      <TouchableOpacity onPress={() => setModalVisible(true)}>
        <Text>Open Modal</Text>
      </TouchableOpacity>
    </View>
  );
}

O código acima adiciona um botão que exibe o componente Modal quando pressionado.

Conclusão

Neste artigo, aprendemos como criar um componente Modal em React Native. Vimos como configurar o componente Modal, exibir e fechar o modal e personalizar o conteúdo e o estilo do modal. Esperamos que você tenha achado este artigo útil e que tenha aprendido como criar um componente Modal em seu aplicativo React Native.