Halo Coder..!!

Dalam pengembangan aplikasi seluler, yang Anda inginkan hanyalah UI yang menarik. UI yang mencari perhatian pengguna dan disukai semua orang. Kami akan berbicara tentang fitur-fitur React Native seperti itu di blog ini. Pernah bertanya-tanya bagaimana kotak pesan muncul di bagian atas layar Anda ketika Anda mengklik tombol. Nah, itulah fitur Modal dari React Native. Mari kita lihat cara membuat Modal View menggunakan React Native. Ambil tempat duduk Anda dan minum secangkir kopi mari kita mulai hack.

Pengaturan dan Instalasi

1. Buat direktori dan navigasikan ke sana.
2. Buka command prompt atau terminal di direktori ini dan jalankan perintah: expo init Modal
3. Pilih template kosong dan lanjutkan dengan unduhan.

Kode Modal di React Native Expo

aplikasi.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',
  },
});

Ini keren, kan? Sekarang ubah animationType dari "slide" menjadi "fade". Anda akan melihat sesuatu yang berubah dalam perilaku animasi. Kami selesai dengan bagian kode di sini. Jika Anda menghadapi kesulitan apa pun, beri tahu saya di bagian komentar.

Terima kasih.