Не отображается содержимое маркеров на IOS

В react-native использую rnmapbox с Mapbox.PointAnnotation, на Android маркеры отображаются корректно, на iOS нет

Отображение маркера на IOS

Код прилагаю:

import Mapbox from "@rnmapbox/maps"
import { StyleSheet, View } from "react-native"

import { Text } from "@/components/text"

export interface MarkerProps {
  lon: number
  lat: number
  isDraggable: boolean
  color?: string
  content?: string | number
}

export interface MarkerLayerProps {
  markers?: { [markerID: string]: MarkerProps }
  onMarkerDrag?: (id: string, lon: number, lat: number, content?: string | number) => void
}

/**
 * Слой с маркерами.
 */
export function MarkerLayer({ markers, onMarkerDrag }: MarkerLayerProps) {
  if (!markers) return

  /**
   * Обновить координаты маркера после перемещения.
   * @param markerID - ID маркера.
   * @param content - обновить контент маркера, без этого параметра контент маркера пропадет при перетаскивании.
   */
  const handleDragEnd = (e: any, markerID: string, content?: string | number) => {
    if (onMarkerDrag) {
      const [lon, lat] = e.geometry.coordinates
      onMarkerDrag(markerID, lon, lat, content)
    }
  }

  return (
    <>
      {Object.entries(markers).map(([markerID, props]) => (
        <Mapbox.PointAnnotation
          draggable={props.isDraggable}
          onDragEnd={props.isDraggable ? e => handleDragEnd(e, markerID, props.content) : undefined}
          key={markerID}
          id={markerID}
          coordinate={[props.lon, props.lat]}
        >
          <View style={[
            styles.Marker,
            { 
              backgroundColor: props.color || "#559df8",
              borderColor: props.color || "white",
              borderWidth: 1,
            }
          ]}>
            <Text numberOfLines={1} style={styles.MarkerText}>
              {props.content}
            </Text>
          </View>
        </Mapbox.PointAnnotation>
      ))}
    </>
  );
}

const styles = StyleSheet.create({
  Marker: {
    width: 25,
    height: 25,
    borderRadius: 25,
    justifyContent: "center",
    alignItems: "center",
    color: 'white'
  },
  MarkerText: {
    color: "white",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    textAlignVertical: "center",
    fontSize: 12,
  },
})

MarkerView использовать не могу, т.к. он не поддерживает перемещение.

Вот сама карта:

export const Map = ({ lines = [], markers = {}, onMarkerDrag, onSearchResult, radius, ...props }: MapProps) => {
  const initialLat = props.lat || 58.00219
  const initialLon = props.lon || 56.26117

  const [mapCenter, setMapCenter] = useState([initialLon, initialLat])

  const mapRef = useRef<Mapbox.MapView>(null)

  // Cостояние для текущего уровня зума.
  const [zoomLevel, setZoomLevel] = useState<number | undefined>(11)

  // Обработчик перемещения маркера (чтобы убрать зум при смене координат).
  const handleMarkerDrag = (id: string, lon: number, lat: number, content?: string | number) => {
    if (onMarkerDrag) {
      setZoomLevel(undefined)
      onMarkerDrag(id, lon, lat, content)
    }
  }

  return (
    <View style={styles.Container}>
      <View style={styles.MapContainer}>
        <Mapbox.MapView
          ref={mapRef}
          style={styles.Map}
          styleURL="mapbox://styles/mapbox/streets-v12"
          localizeLabels={{ locale: "ru" }}
        >
          <Mapbox.Camera zoomLevel={zoomLevel} centerCoordinate={mapCenter} animationMode="flyTo" />
          <MarkerLayer markers={markers} onMarkerDrag={handleMarkerDrag} />
        </Mapbox.MapView>
      </View>
    </View>
  )
}

вот как отображается на Android:

Отображение маркера на Android


Ответы (0 шт):