82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { colors } from '@/assets/styles/colors';
|
|
import styles from '@/styles/screens/tabs/contactos.styles';
|
|
import { AppleMaps, GoogleMaps } from 'expo-maps';
|
|
import { useMemo } from 'react';
|
|
import { Platform, Pressable, View } from 'react-native';
|
|
|
|
const MAP_ZOOM = 15;
|
|
|
|
const disabledGoogleUi = {
|
|
scrollGesturesEnabled: false,
|
|
zoomGesturesEnabled: false,
|
|
rotationGesturesEnabled: false,
|
|
tiltGesturesEnabled: false,
|
|
zoomControlsEnabled: false,
|
|
mapToolbarEnabled: false,
|
|
compassEnabled: false,
|
|
scaleBarEnabled: false,
|
|
};
|
|
|
|
const disabledAppleUi = {
|
|
compassEnabled: false,
|
|
scaleBarEnabled: false,
|
|
myLocationButtonEnabled: false,
|
|
togglePitchEnabled: false,
|
|
};
|
|
|
|
type Props = {
|
|
lat: number;
|
|
lng: number;
|
|
title?: string;
|
|
onPress: () => void;
|
|
};
|
|
|
|
export default function ContactMapPreviewNative({ lat, lng, title, onPress }: Props) {
|
|
const cameraPosition = useMemo(
|
|
() => ({
|
|
coordinates: { latitude: lat, longitude: lng },
|
|
zoom: MAP_ZOOM,
|
|
}),
|
|
[lat, lng]
|
|
);
|
|
|
|
const marker = useMemo(
|
|
() => ({
|
|
id: 'agency',
|
|
coordinates: { latitude: lat, longitude: lng },
|
|
title,
|
|
}),
|
|
[lat, lng, title]
|
|
);
|
|
|
|
return (
|
|
<Pressable onPress={onPress} style={styles.mapImageWrap}>
|
|
<View style={styles.mapImage} pointerEvents="none">
|
|
{Platform.OS === 'ios' ? (
|
|
<AppleMaps.View
|
|
style={styles.mapImage}
|
|
cameraPosition={cameraPosition}
|
|
markers={[
|
|
{
|
|
...marker,
|
|
systemImage: 'mappin',
|
|
tintColor: colors.vermelho,
|
|
},
|
|
]}
|
|
properties={{ selectionEnabled: false }}
|
|
uiSettings={disabledAppleUi}
|
|
/>
|
|
) : (
|
|
<GoogleMaps.View
|
|
style={styles.mapImage}
|
|
cameraPosition={cameraPosition}
|
|
markers={[marker]}
|
|
properties={{ selectionEnabled: false }}
|
|
uiSettings={disabledGoogleUi}
|
|
/>
|
|
)}
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|