use remote image uri in react-native-maps MapView

Question

I'm using react-native-maps for my react-native application. I need to post image on the MapView on the map. But, I get image from web. Whereas, as I know only local images can be added to Mapview in react-native-maps. Do you know any way to post image from uri in the react-native-maps MapView?

I tried with

<MapView style={{flex: 1}}
                loadingEnabled={true}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete}>

               <MapView.Marker
                    coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
                    title={this.props.user_name}
                    description={this.props.user_desc}>
                   <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
               </MapView.Marker>

            </MapView>

and the result is

And then I just deleted the <Image/> with

<MapView style={{flex: 1}}
                loadingEnabled={true}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete}>

               <MapView.Marker
                    coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
                    title={this.props.user_name}
                    description={this.props.user_desc}>
               </MapView.Marker>

            </MapView>

and the result is

Answer 1

you can try custom marker view

<MapView.Marker coordinate={marker.latlng}>
  <Image source={{uri: 'http://someCustomImageURL' }} />
</MapView.Marker>

Answer 2

I find out the way.

Actually, I used Native-Base in my application. So, component Thumbnail is imported from Native-base.

My code is like

<MapView style={{flex: 1, justifyContent: 'space-between'}}
                loadingEnabled={true}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete}>

               <MapView.Marker
                    coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
                    title={this.props.user_name}
                    description={this.props.user_desc}>
                    <View>
                        <Thumbnail source={{uri: this.props.user_photo}} />
                    </View>
               </MapView.Marker>

            </MapView>