Marker not showing image when using children property

[anis-18]

I'm trying to create a marker with an image and a text inisde a view . I've created a component BusIcon like this

<View style={styles.container}>
      <View style={styles.text_wrapper}>
        <Text style={styles.text}> 22 </Text>
      </View>
      <Image style={styles.image} source={require('../../assets/bus4.png')} />
</View>

and i'm using it inside marker as a children

 <Marker
        point={{
          lat: 55,
          lon: 49,
        }}
        children={<BusIcon />}
   />

these are styles

container: {
    position: 'relative',
    left: 50,
    top: 40,
    flexDirection: 'row',
    alignItems: 'center',
  },
  text_wrapper: {
    backgroundColor: 'white',
    width: 40,
    height: 20,
    borderRadius: 4,
    zIndex: 1,
    position: 'absolute',
    left: -30,
  },
  text: {
    color: '#FE715A',
  },
  image: {
    height: 42,
    width: 32,
    zIndex: 2,
  },

the image is not showing only the view with the text is showing!

[DenSakhon]

Такая же проблема в версиях 4.1.?[12/13/14]. Другие не смотрел. На версии 4.1.6 всё хорошо с изображениями, но у нас реализация через source.

` import { CAR_ICON } from '../../../../constants/Images';

getCarIcon() { return CAR_ICON; }

<Marker anchor={{ x: 0.5, y: 0.5 }} source={getCarIcon()} point={ lat: latitude, lon: longitude, } } />

[anis-18]

Такая же проблема в версиях 4.1.?[12/13/14]. Другие не смотрел. На версии 4.1.6 всё хорошо с изображениями, но у нас реализация через source.

` import { CAR_ICON } from '../../../../constants/Images';

getCarIcon() { return CAR_ICON; }

<Marker anchor={{ x: 0.5, y: 0.5 }} source={getCarIcon()} point={ lat: latitude, lon: longitude, } } />

А если наужен какой то View вместе с изображением ? текст например , непонятно иногда изображение отображается иногда нет Я еще заметил что когда добавить scale и поставить backgroundColor: transparent в container для View который хочу рендрить как Marker Все нормально работает, но при открытие приложение в самом начале изображение не отображается, а если что то меняется в state , изображение отображается

[ownikss]

Добрый день, проблема известная, пока не решили. "Костыль" предложен в этом issue https://github.com/volga-volga/react-native-yamap/issues/74

Действительно после onLoad не вызывается перерендер маркера. Приходится делать это принудительно через key

[ProSysYo]

У меня проблема: На ios с svg сначала стандартный маркер показывается потом svg. На андроид source не работает, если путь картинки прокидывать. Решил сделать так для ios показываю картинку png на андроид svg через чилдрен

const point2 = require('../shared/icons/point2.png');
const selectedPoint2 = require('../shared/icons/selected-point2.png');
import SelectedPointIco from '../shared/icons/selected-point.svg';
import PointIco from '../shared/icons/point.svg';
...
<Marker
  point={{lat: item.lat, lon: item.lon}}
  anchor={selectedMarker === item ? {x: 0.5, y: 0.8} : undefined}
  scale={2}
  onPress={() => handlePoint(item)}
  key={index}
  source={Platform.OS === 'ios' ? (selectedMarker === item ? selectedPoint2 : point2) : undefined}
  children={
    Platform.OS === 'android' ? (
      selectedMarker === item ? (
        <SelectedPointIco height={24} />
      ) : (
        <PointIco height={12} />
      )
    ) : undefined
  }
/>

[DenSakhon]

У меня проблема: На ios с svg сначала стандартный маркер показывается потом svg. На андроид source не работает, если путь картинки прокидывать. Решил сделать так для ios показываю картинку png на андроид svg через чилдрен

const point2 = require('../shared/icons/point2.png');
const selectedPoint2 = require('../shared/icons/selected-point2.png');
import SelectedPointIco from '../shared/icons/selected-point.svg';
import PointIco from '../shared/icons/point.svg';
...
<Marker
  point={{lat: item.lat, lon: item.lon}}
  anchor={selectedMarker === item ? {x: 0.5, y: 0.8} : undefined}
  scale={2}
  onPress={() => handlePoint(item)}
  key={index}
  source={Platform.OS === 'ios' ? (selectedMarker === item ? selectedPoint2 : point2) : undefined}
  children={
    Platform.OS === 'android' ? (
      selectedMarker === item ? (
        <SelectedPointIco height={24} />
      ) : (
        <PointIco height={12} />
      )
    ) : undefined
  }
/>

Попробуйте использовать вариант с изменением стейта при рендере внутри маркера, в моём случае с картинками вопрос решился на все 100. Пример кода:

const [key, setKey] = useState(99);
useEffect(() => {
  setzIndex(() =>100)
}, []);
<Marker
  style={{ zIndex: key}}
   point={{lat: item.lat, lon: item.lon}}/>

В таком варианте children не пробовал, но source отрабатывает отлично на обех платформах.

[ProSysYo]

Спасибо! Да так работает. zIndex уже есть пропс у маркера

<Marker
  point={{lat: item.lat, lon: item.lon}}
  zIndex={key}
  source={selectedMarker === item ? selectedPoint : point}
/>