title: React Native Maps: Markers image doesn't show using Custom Marker in react-native-maps
body: <p>I'm using <code>react-native-maps</code> but I faced a problem that after a lot of googling without answer makes me ask it here.
  I'm trying to use Custom Marker for the marker in the map  as the following picture </p>
  
  <p><img src="https://i.stack.imgur.com/ni5aj.jpg" alt="enter image description here"></p>
  
  <ul>
  <li><p>as I searched I found out that needed to use Custom Marker to accomplish the maker's design,  then I created a Custom Marker component </p>
  
  <pre><code>import React, { Component } from "react";
  import { View } from "react-native";
  import {
  Text,
  Left,
  Right,
  Thumbnail,
  } from "native-base";
  const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
  class CustomMarker extends Component {
  render() {
      return (
      &lt;View style={{ flexDirection: 'row', width: 140, height: 60, 
        borderRadius: 70, backgroundColor: 'orange' }}&gt;
          &lt;Left&gt;
              &lt;Thumbnail source={defaultEmployeeLogo} /&gt;
          &lt;/Left&gt;
          &lt;Right&gt;
              &lt;Text style={{
                  color: '#fef',
                  fontSize: 13,
                  paddingBottom: 2,
                  fontFamily: 'Roboto',
                  alignItems: 'center',
                  paddingRight: 10
              }}&gt;Mohammad&lt;/Text&gt;
          &lt;/Right&gt;&lt;/View &gt;);
     }
  }
  export default CustomMarker;
  </code></pre></li>
  </ul>
  
  <p>when I use CustomMarker.js class solely it works fine and it shows the image but when I use it as the marker custom view it doesn't show the image</p>
  
  <p><a href="https://i.stack.imgur.com/hxciq.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hxciq.jpg" alt="enter image description here"></a></p>
  
  <p>I don't know why it can't render the image with Custom Marker in android.
  and here is my code where I'm using map, markers and custom marker class </p>
  
  <pre><code>return (
    &lt;View style={styles.map_container}&gt;
      &lt;MapView
        style={styles.map}
        customMapStyle={customrMapStyle}
        region={{
          latitude: this.state.region.latitude,
          longitude: this.state.region.longitude,
          latitudeDelta: 0.4,
          longitudeDelta: 0.41,
        }} &gt;
        {
          coordinationData.map(function (marker, i) {
  
            let lat = marker.latLang.latitude;
            let lang = marker.latLang.longitude;
             &lt;MapView.Marker
              key={i}
              coordinate={
                {
                  latitude: lat,
                  longitude: lang,
                  latitudeDelta: 0.4,
                  longitudeDelta: 0.41
                }
              }
              title={marker.title}
              description={marker.description}
  
            &gt;
              &lt;CustomMarker /&gt;
            &lt;/MapView.Marker&gt;
          })}
      &lt;/MapView&gt;
    &lt;/View&gt;
  </code></pre>
  
  <p>any kind of help would be appreciated.</p>