nomadmania-app/src/screens/InAppScreens/MessagesScreen/Components/MessageLocation.tsx

import React, { useRef } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import * as MapLibreRN from '@maplibre/maplibre-react-native';
import { useNavigation } from '@react-navigation/native';
import { Colors } from 'src/theme';
import { VECTOR_MAP_HOST } from 'src/constants';
import { NAVIGATION_PAGES } from 'src/types';

const MessageLocation = ({
  props,
  lat,
  lng,
  onLongPress
}: {
  props: any;
  lat: number;
  lng: number;
  onLongPress: (currentMessage: any, props: any) => void;
}) => {
  const navigation = useNavigation();
  const mapRef = useRef<MapLibreRN.MapRef>(null);
  const cameraRef = useRef<MapLibreRN.CameraRef>(null);

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() =>
        navigation.navigate(...([NAVIGATION_PAGES.FULL_MAP_VIEW, { lat, lng }] as never))
      }
      onLongPress={() => onLongPress(props.currentMessage, props)}
    >
      <MapLibreRN.Map
        ref={mapRef}
        style={styles.map}
        mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps2025.json'}
        touchRotate={false}
        attribution={false}
        dragPan={false}
        touchZoom={false}
        doubleTapZoom={false}
        doubleTapHoldZoom={false}
        touchPitch={false}
      >
        <MapLibreRN.Camera
          ref={cameraRef}
          initialViewState={{ center: [lng, lat], zoom: 10 }}
        />
        <MapLibreRN.Marker lngLat={[lng, lat]}>
          <View
            style={{
              width: 20,
              height: 20,
              borderRadius: 10,
              backgroundColor: Colors.ORANGE,
              borderWidth: 2,
              borderColor: Colors.WHITE
            }}
          />
        </MapLibreRN.Marker>
      </MapLibreRN.Map>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 150,
    borderRadius: 10,
    overflow: 'hidden'
  },
  map: {
    flex: 1
  }
});

export default MessageLocation;