unioil-loyalty-rn-app/app/screens/payatpump/fragments/map.js

48 lines
1.1 KiB
JavaScript

import React from 'react';
import { StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import Theme from '../../../components/theme.style.js';
import Assets from '../../../components/assets.manager.js';
const styles = {
map: {
flex: 1
}
}
export default function RenderMap(props){
const defaultRegion = {
latitude: 14.599512,
longitude: 120.984222,
latitudeDelta: 12,
longitudeDelta: 6,
}
return (
<MapView
ref={props.getRef}
provider={null}
loadingEnabled={true}
style={styles.map}
showsUserLocation={true}
region={props.region || defaultRegion}
onMapReady={props.onMapReady}>
{props.markers.map((marker, i) => {
return (
<Marker
key={i}
coordinate={marker.latlng}
title={marker.name}
description={marker.address}
image={Assets.icons.stationMapPin}
onPress={e => {
props.onMarkerClick ? props.onMarkerClick(marker) : console.log('marker is pressed', marker)
}}
/>
)
})}
</MapView>
)
}