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 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 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"; import MapModal from "./MapModal";
const markerSize = 30; const markerSize = 30;
@ -12,34 +10,23 @@ export default function MapMarker(props) {
const [isModalVisible, setIsModalVisible] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false);
return ( return (
<MapView.Marker coordinate={props.coordinate}>
<MapView.Marker
coordinate={props.coordinate}
onPress={() => setIsModalVisible(!isModalVisible)}
>
<View> <View>
<Image <Image
style={styles.markerPoint} style={styles.markerPoint}
resizeMode="stretch" resizeMode="stretch"
source={props.image} source={props.image}
/> />
</View>
<MapModal <MapModal
isVisible={isModalVisible} isVisible={isModalVisible}
setIsVisible={setIsModalVisible} setIsVisible={setIsModalVisible}
{...props} {...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>
<View style={styles.arrow}></View>
</View>
</Callout>
</MapView.Marker> </MapView.Marker>
); );
} }
@ -84,21 +71,3 @@ const styles = StyleSheet.create({
width: markerSize, 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