javascript

React Native Modal

import React, {useState} from 'react';
import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
 
 
const Modal = () => {
 const [modalVisible, setModalVisible] = useState(true);
 return (
   <Modal
     animationType="slide"
     transparent={true}
     visible={modalVisible}
     onRequestClose={() => {
       Alert.alert('Modal has been closed.');
     }}>
     <View style={styles.centeredView}>
       <View style={styles.modalView} onStartShouldSetResponder={() => true}
>
         <Text style={styles.modalText}>Hello World!</Text>
       </View>
     </View>
</Modal>
 );
};
 
const styles = StyleSheet.create({
 centeredView: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   marginTop: 22,
   backgroundColor: 'rgba(0,0,0,0.3)',
 },
 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',
 },
});
 
export default Modal;
Was this helpful?