84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import * as Linking from 'expo-linking';
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
StyleProp,
|
|
ViewStyle
|
|
} from 'react-native';
|
|
import { ThemedText, ThemedView } from '@/components/theme/Theme';
|
|
import MapView from 'react-native-maps';
|
|
|
|
type Props = {
|
|
currentMessage: any;
|
|
containerStyle?: StyleProp<ViewStyle>;
|
|
mapViewStyle?: StyleProp<ViewStyle>;
|
|
};
|
|
|
|
const CustomView = ({ currentMessage, containerStyle, mapViewStyle }: Props) => {
|
|
const openMapAsync = useCallback(async () => {
|
|
if (Platform.OS === 'web') {
|
|
alert('Opening the map is not supported.');
|
|
return;
|
|
}
|
|
const {location = {} } = currentMessage;
|
|
const url = Platform.select({
|
|
ios: `http://maps.apple.com/?ll=${location.latitude},${location.longitude}`,
|
|
default: `http://maps.google.com/?q=${location.latitude},${location.longitude}`,
|
|
});
|
|
try {
|
|
const supported = await Linking.canOpenURL(url);
|
|
if (supported) return Linking.openURL(url);
|
|
else alert('Opening the map is not supported.');
|
|
} catch (error) {
|
|
console.log('Could not open link!', error.message);
|
|
alert(error.message);
|
|
}
|
|
}, [currentMessage]);
|
|
|
|
if (currentMessage.location) {
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.container, containerStyle]}
|
|
onPress={openMapAsync}
|
|
>
|
|
{Platform.OS !== 'web'
|
|
? (
|
|
<MapView
|
|
style={[styles.mapView, mapViewStyle]}
|
|
region={{
|
|
latitude: currentMessage.location.latitude,
|
|
longitude: currentMessage.location.longitude,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
}}
|
|
scrollEnabled={false}
|
|
zoomEnabled={false}
|
|
/>
|
|
)
|
|
: (
|
|
<ThemedView style={{ padding: 15 }}>
|
|
<ThemedText style={{ color: 'tomato', fontWeight: 'bold' }}>
|
|
Map not in web yet, sorry!
|
|
</ThemedText>
|
|
</ThemedView>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
export default CustomView;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
},
|
|
mapView: {
|
|
width: 150,
|
|
height: 100,
|
|
borderRadius: 13,
|
|
margin: 3,
|
|
},
|
|
});
|