Browse Source

Fixing bug in loading modal

master
GabrielTrettel 3 years ago
parent
commit
8a9c0f221e
  1. 48
      src/app/components/LoadingMarkersModal.js
  2. 4
      src/app/screens/MapFeedScreen.js

48
src/app/components/LoadingMarkersModal.js

@ -9,42 +9,32 @@ import {
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors"; import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { dimensions, screen_height } from "../config/dimensions";
export default function LoadingMarkersModal({ show }) { export default function LoadingMarkersModal({ show }) {
return (
<Modal
transparent={true}
animationType="slide"
visible={show}
supportedOrientations={["portrait"]}
>
<View
style={{
justifyContent: "center",
alignSelf: "center",
width: "100%",
height: "100%",
}}
>
<View style={styles.container}>
<MaterialCommunityIcons
name="sync"
size={48}
color={colors.primary}
style={{ alignSelf: "center", marginBottom: 12 }}
/>
<Text style={styles.text}>
Aguarde um momento enquanto os dados são carregados
</Text>
</View>
if (show) {
return (
// 267 = (tabBar height = 49) + (data menu btn height = 48) + (this modal = 170/2)
<View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
<MaterialCommunityIcons
name="sync"
size={48}
color={colors.primary}
style={{ alignSelf: "center", marginBottom: 12 }}
/>
<Text style={styles.text}>
Aguarde um momento enquanto os dados são carregados
</Text>
</View> </View>
</Modal>
);
);
} else {
return <></>;
}
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
position: "absolute",
width: "80%", width: "80%",
height: 170, height: 170,
justifyContent: "center", justifyContent: "center",

4
src/app/screens/MapFeedScreen.js

@ -29,14 +29,14 @@ export default function MapFeedScreen(props) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<LoadingMarkersModal
show={markers.markers.size <= 0}/>
<OpenStreetMap <OpenStreetMap
markers={markers} markers={markers}
centerUserLocation={true} centerUserLocation={true}
dataOptionsToShow={dataOptionsToShow} dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow} setDataOptionsToShow={setDataOptionsToShow}
/> />
<LoadingMarkersModal
show={markers.markers.size <= 0}/>
</View> </View>
); );
} }

Loading…
Cancel
Save