wavelength_app/components/chat/CustomView.tsx

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,
  },
});