React Native: How to use the Modal component in React Native?

1import { Modal, View, Text, Button, StyleSheet } from "react-native";
2
3function ModalExample() {
4  const [visible, setVisible] = useState(false);
5
6  return (
7    <View>
8      <Button onPress={() => setVisible(true)} title="Open Modal" />
9      <Modal
10        visible={visible}
11        transparent={true}
12        animationType="slide"
13        onRequestClose={() => setVisible(false)}
14      >
15        <View style={styles.modalContainer}>
16          <View style={styles.modalContent}>
17            <Text style={styles.modalTitle}>Modal Title</Text>
18            <Text>Modal content here</Text>
19            <Button
20              onPress={() => setVisible(false)}
21              title="Close"
22            />
23          </View>
24        </View>
25      </Modal>
26    </View>
27  );
28}
29
30const styles = StyleSheet.create({
31  modalContainer: {
32    flex: 1,
33    justifyContent: "center",
34    alignItems: "center",
35    backgroundColor: "rgba(0,0,0,0.5)",
36  },
37  modalContent: {
38    backgroundColor: "white",
39    padding: 20,
40    borderRadius: 10,
41    width: "80%",
42  },
43});