Browse Source

Closing MapModal when user clicks outside modal component.

master
GabrielTrettel 4 years ago
parent
commit
37288fcbd2
  1. 54
      src/app/components/MapModal.js

54
src/app/components/MapModal.js

@ -1,8 +1,34 @@
import React, { Component } from "react";
import { Modal, Text, TouchableOpacity, View, StyleSheet } from "react-native";
import {
Modal,
Text,
TouchableOpacity,
View,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import { screen_height, screen_width } from "../config/dimensions";
function MapModal({ isVisible, setIsVisible }) {
function modalContent(isVisible, setIsVisible) {
return (
<TouchableOpacity
onPress={() => {
setIsVisible(!isVisible);
}}
>
<Text>Hide Modal</Text>
</TouchableOpacity>
);
}
function MapModal({
isVisible,
setIsVisible,
title,
description,
icon,
pictures,
}) {
console.log(screen_width);
return (
<View style={styles.centeredView}>
@ -14,19 +40,13 @@ function MapModal({ isVisible, setIsVisible }) {
alert("Modal has been closed.");
}}
>
<TouchableWithoutFeedback onPress={() => setIsVisible(!isVisible)}>
<View style={styles.modalOverlay} />
</TouchableWithoutFeedback>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<View>
<Text>Hello World!</Text>
<TouchableOpacity
onPress={() => {
setIsVisible(!isVisible);
}}
>
<Text>Hide Modal</Text>
</TouchableOpacity>
</View>
{modalContent(isVisible, setIsVisible)}
</View>
</View>
</Modal>
@ -60,6 +80,14 @@ const styles = StyleSheet.create({
shadowRadius: 4,
elevation: 5,
},
modalOverlay: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0)",
},
});
export default MapModal;
Loading…
Cancel
Save