Olá codificadores..!!

No desenvolvimento de aplicativos móveis, tudo o que você deseja é uma interface do usuário atraente. Uma UI que busca a atenção do usuário e é amada por todos. Vamos falar sobre esses recursos do React Native neste blog. Você já se perguntou como uma caixa de mensagem aparece na parte superior da tela quando você clica em um botão. Bem, esse é o recurso Modal do React Native. Vamos ver como fazer uma Visualização Modal usando React Native. Pegue seu assento e tome uma xícara de café, vamos começar o hack.

Configuração e instalação

1. Crie um diretório e navegue até ele.
2. Abra o prompt de comando ou terminal neste diretório e execute o comando: expo init Modal
3. Escolha o modelo em branco e prossiga com o download.

Código de Modal em React Native Expo

App.js

import React, { useState } from 'react';
import { Alert, Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello Coders..!!</Text>
<TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
<TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text style={styles.textStyle}>Show My Modal</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

É legal, certo? Agora mude o tipo de animação de “slide” para “fade”. Você verá algo mudar no comportamento da animação. Nós terminamos com a parte do código aqui. Se você enfrentar qualquer tipo de dificuldade, deixe-me saber na seção de comentários.

Obrigada.