|
@ -1,10 +1,11 @@ |
|
|
import React from "react"; |
|
|
|
|
|
|
|
|
import React, { useState } from "react"; |
|
|
import { |
|
|
import { |
|
|
Modal, |
|
|
Modal, |
|
|
StyleSheet, |
|
|
StyleSheet, |
|
|
Text, |
|
|
Text, |
|
|
TouchableHighlight, |
|
|
TouchableHighlight, |
|
|
View, |
|
|
View, |
|
|
|
|
|
TouchableOpacity, |
|
|
} from "react-native"; |
|
|
} from "react-native"; |
|
|
|
|
|
|
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons"; |
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons"; |
|
@ -12,10 +13,27 @@ import colors from "../config/colors"; |
|
|
import { dimensions, screen_height } from "../config/dimensions"; |
|
|
import { dimensions, screen_height } from "../config/dimensions"; |
|
|
|
|
|
|
|
|
export default function LoadingMarkersModal({ show }) { |
|
|
export default function LoadingMarkersModal({ show }) { |
|
|
if (show) { |
|
|
|
|
|
|
|
|
const [closed, setClosed] = useState(false); |
|
|
|
|
|
if (show && !closed) { |
|
|
return ( |
|
|
return ( |
|
|
|
|
|
// NOTE:
|
|
|
// 267 = (tabBar height = 49) + (data menu btn height = 48) + (this modal = 170/2)
|
|
|
// 267 = (tabBar height = 49) + (data menu btn height = 48) + (this modal = 170/2)
|
|
|
<View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}> |
|
|
<View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}> |
|
|
|
|
|
<View |
|
|
|
|
|
style={{ |
|
|
|
|
|
justifyContent: "flex-start", |
|
|
|
|
|
alignSelf: "flex-end", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<TouchableOpacity onPress={() => setClosed(true)}> |
|
|
|
|
|
<MaterialCommunityIcons |
|
|
|
|
|
name="close" |
|
|
|
|
|
size={20} |
|
|
|
|
|
color={colors.primary} |
|
|
|
|
|
alignItems="center" |
|
|
|
|
|
/> |
|
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
</View> |
|
|
<MaterialCommunityIcons |
|
|
<MaterialCommunityIcons |
|
|
name="sync" |
|
|
name="sync" |
|
|
size={48} |
|
|
size={48} |
|
@ -37,7 +55,7 @@ const styles = StyleSheet.create({ |
|
|
position: "absolute", |
|
|
position: "absolute", |
|
|
width: "80%", |
|
|
width: "80%", |
|
|
height: 170, |
|
|
height: 170, |
|
|
justifyContent: "center", |
|
|
|
|
|
|
|
|
// justifyContent: "center",
|
|
|
alignSelf: "center", |
|
|
alignSelf: "center", |
|
|
backgroundColor: colors.lightestGray, |
|
|
backgroundColor: colors.lightestGray, |
|
|
borderColor: colors.primary, |
|
|
borderColor: colors.primary, |
|
|