Не рендерится Image как children Marker ANDROID

[nikitabudkovskiy]

Здравствуйте, не рендерится Image как children Marker на Android. То есть если я убираю children у Marker, маркер показывается как синяя точка. Маркер не отображется в таком случае

<Marker>
<Image />
</Marker>

А если я внедряю Image внурь Marker то временами маркер есть, временами его нет. Версия 1.1.0-beta

[nmzgnv]

Та же самая проблема, не нашел, как с этим бороться :) https://github.com/volga-volga/react-native-yamap/issues/65

[messenja]

То же самое

[ownikss]

С какой версией работаете? а если передавать изображение в параметр source у маркера есть проблема?

[nmzgnv]

У изображений есть такая проблема, если передавать как children. Если передавать, как source, то нет кастомизации :( Версии: "react-native-yamap": "^1.1.0-beta", "react": "17.0.1", "react-native": "0.64.2",

[azesmway]

@nikitabudkovskiy Привет!

я сделал так

const [isImage, setIamge] = useState(null);
.....
return <Marker
    point={{
        lat: Number(lat),
        lon: Number(lon),
    }}
    key={index?.toString()}
    scale={1.5}
    zIndex={index}
    update={!!isImage}  
>
    <Image
        source={img}
        style={{
            width: 40,
            height: 40,
            borderRadius: 20,
            borderColor: getSectionColor(currentMarker?.sectionType),
            borderWidth: 2,
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        }}
        onLoadEnd={(event: any) => {
            setIamge(event)
        }}
        progressiveRenderingEnabled
        borderRadius={20}
    />
</Marker>

Проблема в том, что после того как маркеры добавлены на карту, они больше не рендерятся. Я добавил доп пропс "update" и после загрузки картинки его заставляю обновиться

[Splicer97]

Не рендерится локальное изображение через require. Ни через <Marker source={require(...)}/>, ни через <Marker><Image source={require(...)}/></Marker>. Проблема только на ios, на android все в порядке.

"react": "18.0.0", "react-native": "0.69.3", "react-native-yamap": "4.1.9",

[anis-18]

Не рендерится локальное изображение через require. Ни через <Marker source={require(...)}/>, ни через <Marker><Image source={require(...)}/></Marker>. Проблема только на ios, на android все в порядке.

"react": "18.0.0", "react-native": "0.69.3", "react-native-yamap": "4.1.9",

Решили проблему ?

[Splicer97]

Не рендерится локальное изображение через require. Ни через <Marker source={require(...)}/>, ни через <Marker><Image source={require(...)}/></Marker>. Проблема только на ios, на android все в порядке.

"react": "18.0.0", "react-native": "0.69.3", "react-native-yamap": "4.1.9",

Решили проблему ?

Использую svg иконки через react-native-svg.

[anis-18]

Не рендерится локальное изображение через require. Ни через <Marker source={require(...)}/>, ни через <Marker><Image source={require(...)}/></Marker>. Проблема только на ios, на android все в порядке. "react": "18.0.0", "react-native": "0.69.3", "react-native-yamap": "4.1.9",

Решили проблему ?

Использую svg иконки через react-native-svg.

Можете пожалуйста показать пример кода ?

[IslamRustamov]

К сожалению принудительный ререндер не решил для меня проблему, но вот что мне помогло:

1. Сконвертируйте вашу картинку в SVG (конкретно чтобы на выходе вы получили разметку свгшную)
2. Внутри Marker создайте View
3. Задайте ширину и высоту View
4. Вставьте внутри View ваш SVG (вам придется воспользоваться react-native-svg для этого)

Так как после этого я столкнулся с проблемой, что при нажатии на маркер у меня блинкается картинка, появляется дефолтный маркер на милисекунду или вообще все исчезает после первого нажатия - я сделал еще следующее:

1. Вынесите свой маркер в другой компонент и сделайте его чистым (memo, PureComponent).
2. Добавьте маркеру zIndex={какое нибудь число (у меня 10 например)} для того чтобы избавиться от блинкающего дефолтного маркера

Вот как примерно у меня выглядит рабочий вариант (@anisamirouche):

import React, {memo} from "react";
import {View} from "react-native";
import {Marker} from "react-native-yamap";
import Svg, {G, Path} from "react-native-svg";
import {styles} from "../styles";

function CustomMarker({onPress}: {onPress: () => void}) {
  return (
    <Marker
      point={<какая нибудь точка>}
      onPress={onPress}
      zIndex={10}
      <другие пропы>
    >
      <View style={styles.markerContainer}>
        <Svg width="60px" height="60px" viewBox="0 0 1024 1024" fill="#000000">
          <G id="SVGRepo_bgCarrier" stroke-width="0"/>
          <G id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
          <G id="SVGRepo_iconCarrier">
            <Path
              d="<какие нибудь данные, которые вы получили от конвертирования картинки в SVG>"
              fill="#FF3D00"/>
          </G>
        </Svg>
      </View>
    </Marker>
  )
}

export default memo(CustomMarker);

Все то что внутри компонента Svg и сам этот компонент - вам нужно подставить вашу картинку, которую вы получили после конвертации.

Очень жаль что яндексовская карта имеет такое большое количество багов (по крайней мере ее реализация на RN).