Ciao programmatori..!!

Nello sviluppo di app mobili, tutto ciò che desideri è un'interfaccia utente attraente. Un'interfaccia utente che cerca l'attenzione dell'utente ed è amata da tutti. Parleremo di tali caratteristiche di React Native in questo blog. Ti sei mai chiesto come appare una finestra di messaggio nella parte superiore dello schermo quando fai clic su un pulsante. Bene, questa è la caratteristica modale di React Native. Vediamo come creare una vista modale usando React Native. Prendi posto e prendi una tazza di caffè, iniziamo l'hack.

Installazione e installazione

1. Crea una directory e vai ad essa.
2. Aprire il prompt dei comandi o il terminale in questa directory ed eseguire il comando: expo init Modal
3. Scegliere il modello vuoto e procedere con il download.

Codice modale in 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',
  },
});

È bello, vero? Ora cambia il tipo di animazione da "slide" a "fade". Vedrai qualcosa cambiare nel comportamento dell'animazione. Abbiamo finito con la parte del codice qui. Se incontri qualsiasi tipo di difficoltà, faccelo sapere nella sezione commenti.

Grazie.