Browse Source

Switching MapMarker ballon to bottom sheet.

master
GabrielTrettel 4 years ago
parent
commit
dcd5c3ecc7
  1. 45
      src/app/components/MapMarker.js

45
src/app/components/MapMarker.js

@ -1,10 +1,8 @@
import React, { useState } from "react";
import { View, StyleSheet, Image, Text } from "react-native";
import MapView, { Callout } from "react-native-maps";
import { View, StyleSheet, Image } from "react-native";
import MapView from "react-native-maps";
import colors from "../config/colors";
import assets from "../config/assets";
import { dimensions, screen_height, screen_width } from "../config/dimensions";
import { Svg, Image as ImageSvg } from "react-native-svg";
import { dimensions } from "../config/dimensions";
import MapModal from "./MapModal";
const markerSize = 30;
@ -12,34 +10,23 @@ export default function MapMarker(props) {
const [isModalVisible, setIsModalVisible] = useState(false);
return (
<MapView.Marker coordinate={props.coordinate}>
<MapView.Marker
coordinate={props.coordinate}
onPress={() => setIsModalVisible(!isModalVisible)}
>
<View>
<Image
style={styles.markerPoint}
resizeMode="stretch"
source={props.image}
/>
</View>
<MapModal
isVisible={isModalVisible}
setIsVisible={setIsModalVisible}
{...props}
/>
<Callout
tooltip
style={{ width: 250 }}
onPress={() => setIsModalVisible(!isModalVisible)}
>
<View>
<View style={styles.container}>
<Text style={styles.title}>{props.title}</Text>
<Text style={styles.description}>{props.description}</Text>
</View>
<View style={styles.arrow}></View>
</View>
</Callout>
</MapView.Marker>
);
}
@ -84,21 +71,3 @@ const styles = StyleSheet.create({
width: markerSize,
},
});
/*
* NOTE: Code for displaying images inside MapMarker. Leaved here for possible
* future needs
*
*
* {pictures_s.length > 0 && (
* <Svg width={240} height={120}>
* <ImageSvg
* width={"100%"}
* height={"100%"}
* preserveAspectRatio="xMidYMid stretch"
* href={{ uri: pictures_s[0] }}
* />
* </Svg>
* )}
*
*/
Loading…
Cancel
Save