MapView.Marker Image tag not supported if from other component

[Elyx0]

Images in Custom Markers from a component don't seem to render in Android on latest RN.

      <MapView
        ref="myMap"
        style={styles.map}
        showsUserLocation={true}
        followsUserLocation={true}
      //  onRegionChange={this.onRegionChange}
        region={{
          latitude: 45.527499999999996,
          longitude: -73.59399833333333,
          latitudeDelta: 0.005,
          longitudeDelta: 0.0051,
        }}>
          <MapView.Marker coordinate={{latitude:45.527659922320694,longitude:-73.59428243747833}}>
            <View style={{width:25,height:25,borderWidth:0,alignItems:'center',justifyContent:'center',backgroundColor:'red'}}>
              <Image
                resizeMode={Image.resizeMode.cover}
                style={{
                  width: 25,
                  height: 25,
                  borderWidth:2,
                  borderRadius:25/2,
                  overflow:'hidden',
                  backgroundColor:'blue',
                }}
                source={{uri:"http://pokeapi.co/media/sprites/pokemon/1.png"}}
                />
            </View>
          </MapView.Marker>
        </MapView>

Render the image nicely but then declaring

import React, {Component} from 'react';
import { View, Text, Image } from 'react-native';

export default class Pmarker extends Component {
  render() {
    const imageSize = 25;
    return(
      <View style={{width:25,height:25,borderWidth:0,alignItems:'center',justifyContent:'center',backgroundColor:'red'}}>
        <Image
          resizeMode={Image.resizeMode.cover}
          style={{
            width: imageSize,
            height: imageSize,
            borderWidth:2,
            borderRadius:imageSize/2,
            overflow:'hidden',
            backgroundColor:'blue',
          }}
          source={{uri:"http://pokeapi.co/media/sprites/pokemon/1.png"}}
          />
      </View>
    );
  }
}

and trying to do

<MapView.Marker coordinate{{latitude:45.527659922320694,longitude:-73.59428243747833}}>
            <Pmarker />
</MapView.Marker>

doesn't render an image.

[Elyx0]

Actually it's worse, it seem random.

[VinceBT]

I don't get how you rendered the first example, it does not work at all for me.

[Elyx0]

I worked around this by using 2 markers for the same coordinates which is.. not pretty.

One using image prop on the MapView.marker and the second one using a custom MapView.Marker view to render the text part.

Fun fact is image gets scaled down on the simulator but the release apk has the images in full size.

        {mapInfo.markers.map((marker,i) => (
          <MapView.Marker
            key={i}
            coordinate={{latitude:marker.Latitude,longitude:marker.Longitude}}
            >
            <Pmarker {...marker} />
          </MapView.Marker>
        ))}

        {mapInfo.markers.map((marker,i) => (
          <MapView.Marker
            key={`img-${i}`}
            title={pokemonsNames[marker.PokedexTypeId-1]}
            coordinate={{latitude:marker.Latitude,longitude:marker.Longitude}}
            image={pokemonsImages[marker.PokedexTypeId]}
            />
        ))}

[alvelig]

Merge to #1870