Browse Source

Extracting "SelfClosingModal" to custom component.

master
GabrielTrettel 4 years ago
parent
commit
0468fa8de9
  1. 55
      src/app/components/MapModal.js
  2. 66
      src/app/components/SelfClosingModal.js

55
src/app/components/MapModal.js

@ -8,6 +8,7 @@ import {
TouchableWithoutFeedback, TouchableWithoutFeedback,
} from "react-native"; } from "react-native";
import { screen_height, screen_width } from "../config/dimensions"; import { screen_height, screen_width } from "../config/dimensions";
import SelfClosingModal from "../components/SelfClosingModal";
function modalContent(isVisible, setIsVisible) { function modalContent(isVisible, setIsVisible) {
return ( return (
@ -32,62 +33,18 @@ function MapModal({
console.log(screen_width); console.log(screen_width);
return ( return (
<View style={styles.centeredView}> <View style={styles.centeredView}>
<Modal
<SelfClosingModal
animationType="slide" animationType="slide"
transparent={true} transparent={true}
visible={isVisible} visible={isVisible}
onRequestClose={() => {
alert("Modal has been closed.");
}}
setVisible={setIsVisible}
> >
<TouchableWithoutFeedback onPress={() => setIsVisible(!isVisible)}>
<View style={styles.modalOverlay} />
</TouchableWithoutFeedback>
<View style={styles.centeredView}>
<View style={styles.modalView}>
{modalContent(isVisible, setIsVisible)}
</View>
</View>
</Modal>
{modalContent(isVisible, setIsVisible)}
</SelfClosingModal>
</View> </View>
); );
} }
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
marginTop: 22,
},
modalView: {
margin: 20,
width: screen_width,
height: screen_height * 0.4,
backgroundColor: "white",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
padding: 35,
marginBottom: 0,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
modalOverlay: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0)",
},
});
const styles = StyleSheet.create({});
export default MapModal; export default MapModal;

66
src/app/components/SelfClosingModal.js

@ -0,0 +1,66 @@
import React from "react";
import {
Modal,
View,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import { screen_height, screen_width } from "../config/dimensions";
export default function SelfClosingModal(props) {
return (
<View style={styles.centeredView}>
<Modal
animationType={props.animationType}
transparent={props.transparent}
visible={props.visible}
>
<TouchableWithoutFeedback
onPress={() => props.setVisible(!props.visible)}
>
<View style={styles.modalOverlay} />
</TouchableWithoutFeedback>
<View style={styles.centeredView}>
<View style={styles.modalView}>{props.children}</View>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
marginTop: 22,
},
modalView: {
margin: 20,
width: screen_width,
height: screen_height * 0.4,
backgroundColor: "white",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
padding: 35,
marginBottom: 0,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
modalOverlay: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0)",
},
});
Loading…
Cancel
Save