EnhancedMapComponent.js

import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
import { View, StyleSheet, UIManager, findNodeHandle, Alert } from 'react-native';
import { requireNativeComponent } from 'react-native';
import EventEmitterModule from './EventEmitterModule'; // Assuming this module is properly imported

const RNMapView = requireNativeComponent('RNMapView');

/**
 * EnhancedMapComponent - A React Native component that wraps a native map view
 * 
 * @param {Object} props - Component props
 * @param {Object} props.style - Additional styles to apply to the map view
 * @param {Function} props.onImagePress - Callback when an image on the map is pressed
 * @param {boolean} props.showImageActions - Whether to show default image actions on press (move/delete)
 * @param {number} props.imageDiameter - Default diameter for images placed on the map
 * @param {React.RefObject} ref - Reference to access map methods imperatively
 */
const EnhancedMapComponent = forwardRef((props, ref) => {
  const { 
    style, 
    onImagePress, 
    showImageActions = true,
    imageDiameter,
    ...restProps
  } = props;
  
  const mapRef = useRef(null);

  useEffect(() => {
    // Set initial image diameter if provided
    if (imageDiameter && mapRef.current) {
      setImageDiameter(imageDiameter);
    }
  }, [imageDiameter]);

  useEffect(() => {
    // Listen for image press events from the native map
    const eventListener = EventEmitterModule.addListener('MyCustomEvent', (event) => {
      console.log('Map image clicked', event.imageId);
      
      // Call custom handler if provided
      if (onImagePress) {
        onImagePress(event.imageId, event);
      }
      
      // Show default actions if enabled
      if (showImageActions) {
        Alert.alert(
          'Image Options',
          `Selected image: ${event.imageId}`,
          [
            {
              text: 'Move',
              onPress: () => {
                updateImageLocation(event.imageId, 100, 100);
              },
              style: 'default'
            },
            {
              text: 'Delete',
              onPress: () => {
                removeImageOnMap(event.imageId);
              },
              style: 'destructive'
            },
            {
              text: 'Cancel',
              style: 'cancel'
            }
          ]
        );
      }
    });
    
    return () => {
      eventListener.remove();
    };
  }, [onImagePress, showImageActions]);

  // Map manipulation methods
  const appendPoint = (longitude, latitude) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.appendPoint,
      [longitude, latitude]
    );
  };

  const clearMap = () => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.clearMap,
      []
    );
  };

  const setColor = (r, g, b) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.setColor,
      [r, g, b]
    );
  };

  const addImageOnMap = (url, id, longitude, latitude) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.addImageOnMap,
      [url, id, longitude, latitude]
    );
  };

  const updateImageLocation = (id, longitude, latitude) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.updateImageLocation,
      [id, longitude, latitude]
    );
  };

  const removeImageOnMap = (id) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.removeImageOnMap,
      [id]
    );
  };

  const setImageDiameter = (diameter) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.setImageDiameter,
      [diameter]
    );
  };

  // Expose methods to parent component through ref
  useImperativeHandle(ref, () => ({
    appendPoint,
    clearMap,
    setColor,
    addImageOnMap,
    updateImageLocation,
    removeImageOnMap,
    setImageDiameter,
    // Access to the native map view reference
    getNativeMapRef: () => mapRef.current
  }));

  return (
    <View style={[styles.container, style]}>
      <RNMapView 
        ref={mapRef}
        style={styles.map}
        {...restProps}
      />
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default EnhancedMapComponent;