Salut les Codeurs..!!

Dans le développement d'applications mobiles, tout ce que vous voulez, c'est une interface utilisateur attrayante. Une interface utilisateur qui attire l'attention de l'utilisateur et qui est appréciée de tous. Nous allons parler de ces fonctionnalités de React Native dans ce blog. Vous êtes-vous déjà demandé comment une boîte de message apparaît en haut de votre écran lorsque vous cliquez sur un bouton. Eh bien, c'est la fonctionnalité modale de React Native. Voyons comment créer une vue modale à l'aide de React Native. Prenez votre siège et prenez une tasse de café, commençons le hack.

Configuration et installation

1. Créez un répertoire et accédez-y.
2. Ouvrez l'invite de commande ou le terminal dans ce répertoire et exécutez la commande : expo init Modal
3. Choisissez le modèle vierge et procédez au téléchargement.

Code de Modal dans 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',
  },
});

C'est cool, non ? Changez maintenant le type d'animation de "slide" à "fade". Vous verrez quelque chose changer dans le comportement de l'animation. Nous en avons terminé avec la partie code ici. Si vous rencontrez des difficultés, faites-le moi savoir dans la section des commentaires.

Merci.