66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { StyleSheet } from 'react-native';
|
|
import Theme from '../../../../components/theme.style.js';
|
|
import Assets from '../../../../components/assets.manager.js';
|
|
|
|
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
|
|
import { Image } from 'react-native';
|
|
|
|
const styles = {
|
|
mapContainer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
flex: 1,
|
|
marginTop: 60,
|
|
height: Theme.screen.h - 15,
|
|
width: Theme.screen.w,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'center',
|
|
},
|
|
map: {
|
|
...StyleSheet.absoluteFillObject,
|
|
height: Theme.screen.h,
|
|
width: Theme.screen.w,
|
|
}
|
|
}
|
|
|
|
|
|
export default function RenderMap(props){
|
|
|
|
if(!props.region) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<MapView
|
|
ref={props.getRef}
|
|
// provider={PROVIDER_GOOGLE}
|
|
provider={null}
|
|
loadingEnabled={true}
|
|
style={styles.map}
|
|
showsUserLocation={true}
|
|
region={props.region}
|
|
onMapReady={props.onMapReady}
|
|
>
|
|
{props.markers.map((marker, i) => (
|
|
<Marker
|
|
key={i}
|
|
coordinate={marker.latlng}
|
|
title={marker.name}
|
|
description={marker.address}
|
|
// image={Assets.icons.stationMapPin}
|
|
// style={{backgroundColor: 'red'}}
|
|
onPress={e => {
|
|
props.onMarkerClick ? props.onMarkerClick(marker) : console.log('marker is pressed', marker)
|
|
}}
|
|
>
|
|
<Image
|
|
style={{height: 40, width: 40}}
|
|
source={Assets.icons.stationMapPin}
|
|
resizeMode='contain'
|
|
/>
|
|
</Marker>
|
|
))}
|
|
</MapView>
|
|
)
|
|
}
|