Проблема с отображением <Image /> в children у маркера

[MinskLeo]

trafficstars

Привет! На связи небольшой начинающий стартапчик для помощи животным. Сейчас занимаемся написанием основного функционала системы, построенного вокруг Яндекс карт - ваш SDK крайне важная часть приложений. Без фикса этого бага идея под угрозой, так как требуются хорошо поддерживаемые в СНГ карты... А из вариантов только Яндекс...

Описание

Проблема с отображением <Image /> в children у маркера, как на IOS так и на Android. Проблемы как с родным Image из react-native пакета, так и из пакета react-native-fast-image. По сути сам контейнер изображения отрисовывается (граница контейнера, закругление), но само изображение не отображается. Ниже прикреплю изображение.

Изучил все Github Issues что есть тут, нашел несколько похожих проблем, но решений там не обнаружил...

• https://github.com/volga-volga/react-native-yamap/issues/65
• https://github.com/volga-volga/react-native-yamap/issues/74

Отдаленно похожие проблемы:

• https://github.com/volga-volga/react-native-yamap/issues/202
• https://github.com/volga-volga/react-native-yamap/issues/100
• https://github.com/volga-volga/react-native-yamap/issues/67

Окружение

{
   "react-native-yamap": "^4.6.0", (
   "react-native": "0.74.2",
   "react": "18.2.0",
}

IOS и Android симуляторы (IOS 17.4 и Android 14), личные девайсы так же имеют проблему. Отпишу точные модели устройств и ОС если будет нужно, но сомневаюсь что баг специфический для определенных устройств.

Пример кода:

Представляю пример части компонента, который отрисовывает маркеры на карте:

import {Image} from 'react-native';

// ...

const CustomMarker = () => {
  // ...
   return (
      <Marker point={{lat: latitude, lon: longitude}}>
        {pictureUri ? (
          <Image
            style={{
              width: 50,
              borderRadius: 1000,
              height: 50,
              borderWidth: 1,
              borderColor: '#000',
            }}
            source={{
              uri: 'http://.../img/image.png',
              headers: {
                Authorization: '...'
              },
            }}
          />
        ) : undefined}
      </Marker>
   );
};

Скриншот

Если что то еще для диагностики будет нужно - предоставлю!

[MinskLeo]

@sirotkin-vvdev @ownikss ребята, гляньте пж, как будет время. Я попробовал сделать фикс самостоятельно, разобраться с нативной стороны, но знаний не хватило...

[ownikss]

children для маркеров deprecated в библиотеке. Мы добавляли его с целью соответствовать react-native-maps, но yandex mapkit значительно отличается идеологически, поэтому не можем качественно поддерживать эту функциональность.

Если правильно помню, в качестве костыля можно использовать onLoadEnd у компонента Image и пересоздать маркер через key.

Суть текущей реализации в том, что для маркера берется "скриншот" текущего состояния и загружается как изображение в маркер. Если в момент "скриншота" изображение еще не загружено, то используется пустой контент.

Сразу подсвечу, что подобная реализация может тормозить на большом количестве маркеров из-за отрисовки разных маркеров (даже если каждый маркер использует одну и ту же картинку)

[Bolikus]

https://github.com/volga-volga/react-native-yamap/issues/319

если забирать изображение по УРЛу - то изображение загружается:

children={ <Image style={styles.avatarOnMap} source={{ uri: ${GLOBAL_VARS.LAPTA_URL}${ava}, }} /> }