Image component inside Custom Markers and Callouts in Android

Image component inside Custom Markers and Callouts in Android not appearing or rendering.
Merging all issues to this.
Please, clone https://github.com/alvelig/react-native-maps-example and try if you can reproduce.
Mention your lib version, react-native version, Android version, and is it a device or emulator.

Tested with:

react-native 0.50.4
react-native-maps 0.18.3
play-services-maps 10.2.4/11.0.4
compileSdkVersion 26
buildToolsVersion "26.0.3"
device

A: Sony XZ Premium (Android 8.0.0, Google Play Service 11.9.51)
B: Android emulator (7.1.1 Google APIs Intel x86, Google Play Service 11.7.43)
C: Android emulator (6.0.0 Google APIs Intel x86, Google Play Service 11.7.43)

Result:

targetSdkVersion 23, A/B
targetSdkVersion 24, A/B

Debug, First Run
No
No

Debug, Ctrl-m/Reload
Yes
No

Release
No
No

targetSdkVersion 23, C
targetSdkVersion 24, C

Debug, First Run
No
No

Debug, Ctrl-m/Reload
Yes
Yes

Release
No
No

As a work around, you can try setting targetSdkVersion to a number no more than 23, then
constructor(props) {
	super(props);
	this.state = {
		imagemarker_workaround_cnt: 0
	};
}

componentDidMount() {
	let self = this;
	setTimeout(() => {
		self.setState({imagemarker_workaround_cnt: 1});
		setTimeout(() => {
			self.setState({imagemarker_workaround_cnt: 2});
		}, 10);
	}, 10);
}

render() {
	if (this.state.imagemarker_workaround_cnt == 1) return <View></View>;
	return <MapView>
		{this.state.imagemarker_workaround_cnt == 0 &&
		<MapView.Marker coordinate={{latitude: 0, longitude: 0}}>
			<View><Image source={require('./icon.png')} style={{width: 1, height: 1}} /></View>
		</MapView.Marker>}
	</MapView>;
}

In my case images disappear on marker addition. I'm moving the map and adding only those which fall into the viewport. So they consistently disappear. If I put other elements in the custom view, they are shown. So there's a huge problem with Image rendering.

I tried to fix this few months ago but failed to succeed, I guess i've done some messy code.
My idea was actually to implement here https://github.com/react-community/react-native-maps/blob/master/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapMarker.java#L291 a  bitmap caching system (https://developer.android.com/topic/performance/graphics/cache-bitmap.html) which would use the marker key as a key of our cache map, and the Bitmap as a value. Maybe this is a wrong idea, just proposing this if someone has time to try and all that stuff

Can someone fix this issue ?
It is really annoying that we can't have images on markers. I don't know if someone found a workaround ?

For now use Marker's image prop. That is working ok. Having Image in custom view may not be resolved recently.

@foyarash The problem is not the caching system, the problem is that every time it creates a bitmap of the view, and sometimes it does not happen or I don't know what happens, but it does not draw.

Yeah that's what I noticed.
I actually tried some solution and particularly invalidating the MapView after the image has been loaded, but that didn't work.
That's really a weird behavior and I'm curious about what is wrong with this

Yep, I hope someday someone reviews and refactors that, by now if you need a picture use image prop (it works ok along with the custom view if you need text). Don't forget to use @2x and @3x otherwise the images will be of different sizes.

My first thought was that fresco was causing a problem, with the error 'DraweeHolder not attached' something like that, but the thing is that it's actually almost the same code that you can see in the fresco doc

actually in custom view there's no direct call to Fresco. It's done through View.draw(Canvas). But it also looks suspicious having those warnings in log.

I'll try to refacto all that stuff maybe one day with the few knowledge i have

Thank you @foyarash and @alvelig for taking seriously this bug.
For some reasons, I won't be able to use the image prop way to fix my issue. I hope someone could fix this soon !
When I'll have the time - because it is not the case for now - I may submit a PR (with the few knowledge I've too).

@elieteyssedou Why not? Image prop can go along with text in custom view, so it should do in most cases.

@alvelig Because :

My image source is an url
I apply style on my image
I use a custom component for my image
My pin is made with react-native-svg

Still no update on this one?

@dashracer It would be nice if we could at least specify image size. Currently if I provide a small image its blurred. If I provide a high def one it just fills up the map :(

I tried to work on this, tried every solution that came into my mind even invalidating the child view of the marker, forceUpdate the component when the image has loaded, but nothing is working correctly. The only thing I could get is an almost transparent view (wtf ???) and only for a few amount of markers.
So I'm giving up on this

@gilbertKaradja use @2x and @3x sizes
@foyarash that is the problem. GoogleMaps are using only images, images are made by drawing canvas on the fly. So it does not always work.

@alvelig i saw that, so i tried to draw the child view within the canvas here https://github.com/react-community/react-native-maps/blob/master/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapMarker.java#L353
But no success

@alvelig Im not sure that will change anything. I need a way to provide the size for the image i want to use. If i provide width and height as, lets say, 25x25 , and provide an image of 24x4 it looks blurry. I would like to provide a higher res image, like 64x64, so when it scales down its still sharp. IF I do as you advised I just get a bigger image

@gilbertKaradja You must provide a 25x25 (the size you originally want the image), 50x50 (@2x) and 75x75(@3x) image as you would do for native platform development. See https://facebook.github.io/react-native/docs/images.html.

Reading through this thread, it looks like there are two issues being discussed. There is a lot of discussion around using an image for <MapView.Marker>, but not a lot of discussion around nesting and  inside of a <MapView.Callout> component on Android, which is the issue me and my team are currently trying to fix.
@alvelig would it make more sense to split the thread into two different discussions?

I've investigated this issue for a couple of hours.
Because of I'm not an expert on react-native-maps and the structure of react-native I could just review the code.
I guess addView method adds the custom markers into parent view. So, after this method the control belongs to react-native code base.
By using the same custom marker method, I can use a text as custom marker. Also I can color a view's backgorund as a custom marker. Both of them can appear on the map as a marker. But <Image /> image component can not.
It may be there but I could not find any specific condition code for API >= 25 in react-native code.
Also I tried to find any deperecation message on Android classes that are used by related java files of react-native. However I found nothing if I didn't overlooked something...
It render custom markers on Android 24 and cannot render on Android 25.
This page shows us differents:
https://developer.android.com/sdk/api_diff/25/changes.html
I wonder that a custom marker can appear on an iOS? Is this an android-specific issue?

@efkan it works on iOS if i remember well

@arronhunt Actually they have the same origin. Images sometimes don't render in Android because View.draw() does not render the image in time (that's where I came to in my investigation)
@efkan yes, it's android specific

Given that the custom view markers are not rendering, is there any way to style/resize the image prop supplied to Marker?

I fixed this problem by follow this solution https://github.com/wkh237/react-native-fetch-blob/issues/574
you can pass image to  and place it in  or  like this
<Callout tooltip={true}>            <View style={{flex: 1,}}>                     <WebView source={{                               baseUrl: RNFetchBlob.fs.dirs.DocumentDir,                               html,}}                                style={{                                        width:50,height:50,                                }} />             </View> </Callout>

@Afalook Is there a way to feed the WebView an image without more html? Also, in my case the image might be both local and a url, if that matters.

@Afalook Have you found a chance to check its performance?
For example: How many Marker could you use at the same time without any screen lag?
(I had also tried WebView with base64 but I could not achive your result)

@Afalook that's dirty man. But that's valid! Better that not having any solution.

For some reason the webview solution doesn't work for me. It works outside of a map/marker, but once I put it in a marker it renders only the background.
That bug is super annoying, I hope there exists (even if no one knows it yet) a real solution for it.

The same result here. Just like as @Doychev 's.

The reason of this issue is this -> https://github.com/facebook/fresco/issues/1445#issuecomment-362551065

@efkan dont think so, fresco is only used to load the markers from the image prop, but when adding child to the Marker, fresco wont be used

@foyarash I've updated my comment above. You might check it out..

@efkan Can you show what's done in step 4 in a bit more detail / by example? Also, is it possible to share the .aar files generated by step 3? Thanks!

@Doychev , I've needed to change some of build.gradle files that belong to some other project in my main build.gradle file.
Sample theProject/android/app/build.gradle changes after putting *.aar file into libs folder:
...
dependencies {
    compile project(':my_custom_modules')
    ...
    compile (name:'drawee-debug', ext:'aar')
}
...
allprojects {
    repositories {
        flatDir {
            dirs 'libs', './libs'
        }
    }
...
}
...

(This step was necessary in my project. Do not apply if it is not necessary in your project)
Sample theProject/my_custom_modules/build.gradle changes after putting *.aar file into libs folder:
...
dependencies {
    ...
    compile (name:'drawee-debug', ext:'aar')
}
...
allprojects {
    repositories {
        flatDir {
            dirs 'libs', './libs'
        }
    }
...
}
...

Last night I build Fresco again and I have a built drawee-debug.aar file.
Becaus of building takes long time I'm sharing the built file:
https://drive.google.com/open?id=1c71C9D1bCuUTixCvtkhNNTwq8Jb88N6C
(I have never tested it but it must be work)
In fact I've been searching if I can apply another workaround into MainActivity.java file

BTW, @Doychev keep in mind, react-native compile Fresco packages in its own dependencies section. So drawee module must be excluded in build.gradle file.
Otherwise it throws an exception..

For reference for anyone else, that's the additional change:
android {
...
    configurations {
        ...
        all*.exclude  module: 'drawee'
    }
...
}

@Doychev , your solution also works within allprojects section. it's a good practice for to provide unity .
allprojects {
    repositories {
        flatDir {
            dirs 'libs', './libs'
        }
    }
    configurations {
        all*.exclude  module: 'drawee'  // Doychev's suggested solution can be found over here
    }
...
}

@efkan could you post a tree of the project structure to make sure I'm not pointing to wrong location for the libs directory
Many thanks for posting a solution for this infuriating bug.

This fix doesnt work for me on Android Moto 4

dependencies {
    ...
    compile (name:'drawee-debug', ext:'aar')
}

After a few more iterations, I found out something peculiar in my project.
I have multiple marker styles, using different images. Some of them are a bit larger than the others (basic marker - 15.2KB, 15x15 pixels; special marker - 18.5KB, 60x81 pixels).
In my project, I gather the information about all markers simultaneously and I try to display them at once, whenever they are ready.
After the fix proposed by @efkan markers started appearing but I noticed another, probably unrelated bug - the bigger markers didn't appear unless I reload the marker data or reload the whole app (through the 'Reload' feature of RN).
Currently I found out that by delaying the display of all markers by 0.5 seconds this problem is fixed (or rather worked-around). In my case, I am displaying the markers by mapping a property from this.state, so I just delay the this.setState({markers}) execution.
It might be just a problem with my project but it might help someone :)

TL;DR - Try artificially delaying the showing of markers by ~0.5-1 second and see if there is any difference.

Noticed similar issue as you, will try your fix right away.

@MarkOSullivan94  I get "Could not find :drawee-debug:." when trying to run the app.

@Doychev  can you share the code you use for delaying the markers?

@hugoh1995 did you download the aar file provided by @efkan?

No because I'm not sure where to put the file 🤔

Icon images only show after I reload the map a few times, sometimes it works on the second time, sometimes doesn't.

    setTimeout( () => {
      this.setState({
        markers : currentMarkers,
      });
    }, 500);

Also, the .aar file should be located in: YourProjectDir\android\app\libs

@Doychev thanks! doesn't seem to change anthing for me tho.

@hugoh1995 , you might also try this code

@efkan thanks! just tried without luck 😅

@hugoh1995 after adding it in that directory you still need to carry out all the changes to your gradle files to get it to work

Recently, I found the sample solution for this problem without convert image to base64, just pass the image URL to html property then place it in <img/> tag like this

By the way, I'm using cloudinary to store my image that's work fine.
Hope this help.

So the only ways around this right now are the WebView and drawee-debug workarounds? Is this a problem react-native or react-native-maps? Is there any hope for a complete solution to this in the foreseeable future?

@wbattel4607 it's a problem with the Android Fresco library which is breaking it for API 25+. @efkan has posted a workaround which will mean should work for now.
Have a read from here and below: https://github.com/react-community/react-native-maps/issues/1870#issuecomment-370601097

Can someone give a more indepth example of what the build files is supposed to look like and which one? Tried to follow along but I'm still having issues viewing custom callout images.

When I was using com.google.android.gms:play-services-maps:10.0.1, custom marker views were rendering well. But since I am using com.google.android.gms:play-services-maps:11+, it doesn't work. Any idea?

@bdavid68 I think I've been using 10.2.4 the entire time

@MarkOSullivan94 Actually, it's working with 10.0.1.
I need to use react-native-geolocation-service library and It requires 11.+.
But I can't use different google service versions.

@bdavid68 I haven't done extensive testing with the different versions, have you raised an issue about it?

I added the .aar file in the comments above, and changed the gradle files, but the callout images still don't seem to load. Weirdly, after the callouts are opened, on the 3rd time the image loads

@MarkOSullivan94 It doesn't look like an issue of plugin version.
Last night, I upgraded my android device to 8.0 and I can't see markers now. Google map marker is working well on Android 7.0, but not working on android > 7.0. It might be an issue of google service plugins for new android OS versions.

@MeganKurz if you could share a public project, someone here could hopefully point out what you need to do to fix your problem.
@bdavid68 it's API 25 and above so you'll have no issue with 7.0 or below, it's when you use 7.1 and above.

<Marker
                coordinate={marker.latlng}
                key={index}
                onPress={this.onMarkerPress}
                identifier={marker.id.toString()}
              >
                <Image
                source={marker.image}
                style={{ width: 50, height: 50 }}
              />
              </Marker>

works on Moto X Style (7.0), not on S8 Note (7.1)

Looks like React Native might finally be updating their Fresco dependency. Whenever this gets packed into an RN version we might see the end of this bug...
https://github.com/facebook/react-native/commit/8e065baad43a124a999d4f3c253b1081a3045a1a
I'm trying to determine if Fresco has fixed this problem internally. This RN commit would bump the version to 1.8.1, with RN currently way behind on 1.3.0.

Has anyone been able to test RN-Maps with it being bumped to 1.8.1? Don't want to get my hopes up and think this will be a fix to our issues only to find out it's still broken.

@MarkOSullivan94 they haven't packaged it yet.

<ImageBackground source={busMarker} style={{ width: 50, height: 50 }} onLoad={() => this.forceUpdate()}>                                         <Text style={{ width: 0, height: 0 }}>{Math.random()}</Text>                                     </ImageBackground> works for me

Still not working for me, even if Fresco seems to have been updated in the latest version.
I'm using Expo, and I still have the same issue being :
Everytime I open the app and display the map for the first time, some Images in some custom Markers don't appear for no reason, like one Image appears in one marker but not in another one...
And when I go to another view, and then come back to the view with the map, this time every Markers are displayed correctly...

Tested, and not working.

Actually I had specified the real reason before.
I guess that nothing will change as long as the visibility issue of fresco is not solved.
Two steps must be taken to solve this issue:

The visibility issue of Fresco should be solved
The newest Fresco library -that has not any visiblity issue- should be added into ReactAdroid dependencies block.

Can we use the temporary fix in release @efkan  ?
It's look like working in debug compile but not in release.
Please I need a fix on react 0.53.3 for release build.

@z4qx

Can we use the temporary fix in release @efkan ? In release compile too ?
I hope so. There is no any difference I remember between release and development compilations.

Is it possible to remove the bugged drawee from react and use the good one recompiled localy ?
IMHO this is not a good practice than changing drawee module.

Also I had checked to see if this solution can be implemented my MainActivity.java file. I could not find any way.

@efkan
Thanks for your return. Your solution seem's to work on release but randomly. Sometime the images are loaded and sometime not.
It can be awsome if you can implement the solution in the MainActivity.java !
Let me know. Do you have any other possible solution to solve the problem ?

It could be another issue. I recommend checking this out.

I'd just tried this solution on a couple of phones.
hugoh1995 has encountered the same issue too.
The issue may be continuing.
The issue I remember was that when calling a view (object) second time android library returns its visibility value as false.
Someone who good at Fresco, React-Native and Android libraries can find it easily, but I had tracked clues for days.
However we know the real problem now. Maybe someone who encountered this entry and handles this solution again and finds a more stable solution.
Hopefully Fresco developers handle this issue. The real medicine is this..

It's very weard, some images never have the issue and some randomly...
Do you have any idea where is the problem in Fresco ? Maybe we can fix it ?

@z4qx I mentioned this before and it might have relation - in my case, before implementing a workaround, bigger images were not showing while smaller images were fine. I think it's a matter of a thread finishing in time for something dependent on it to work. Check my comment on the same thread from the 8th March here - https://github.com/react-community/react-native-maps/issues/1870#issuecomment-371544597

@Doychev Interesting !
It's seems to be the same problem. The marker is on the map, it's just not rendering.
Where do you do the setState ?

@z4qx I can't recall exactly what my implementation was, but I remember that if the map features a way to reload the search, everything appeared fine. Anyway, the solution / workaround proposed by efkan worked for me and until the fresco issues are resolved in a more permanent way, I'll be sticking with it.

            <Image
                    source={require('../listings/marker.png')}
                    style={{ height: 32, width: 20 }}
                    onLoad={() => this.forceUpdate()}/>

@hegelstad Doesn't works in my case. Always the same picture dont show normaly. It's very strange because will i'm clicking on the marker, the image showing, most of the time. It can be an other issue ?

I have run across this issue as well, I have tried several of the workarounds on this thread, however none of them appear to have worked.
I am hopeful that a fix comes out soon, but will continue to test things here and there. Thanks to everyone here who has put a heap of effort into trying to find the problem and a fix for them.

@redisean Same for me. Only the trick of @efkan improve it a bit, by intermittence. All other trick (onLoad => refresh, timer doesn't works).
Currently what is saw is that, the same image always have this issue. BUT, only when it's rendered in the map. I have the same image on a normal screen and it's works perfectly.
So I guess if we can do the diff between normal image render and marker image render used by the map, we will find the issue.
Anyone have try to change some code into the react java code ?
Following this comment
we can find the possible change

I'm having the same issue. Image component inside Marker does not render. It does not even fire the onLoadEnd. But when Image is outside the Marker it is working fine.

Isn't it possible to add "style" prop to a marker? This might be a suitable workaround while Fresco library get fixed

@mapalagama93 same problem for me. Even onLoad and onLoadEnd are not called. Tried all the hack proposed their but nothing work in my case. I really need to fix it to release my app...

Hi, I found something working in my case :
1 - Preload and do a render of your images
let preload = null;     if(!this.loaded && Platform.OS == 'android') {       preload = (<View style={{height:0, width:0}}>          {Object.keys(constants.emoji).map(marker => (              <Image key={marker} style={{opacity:0, width:0, height:0}} source={constants.emoji[marker]} />          ))}         </View>)       this.loaded = true;     }     return (     	     <View>              {preload} 	    <MapView> ...
2- Force to image to reRender while loaded 👍
render() {     return (         <View style={style.container}>           <View style={style.imageContainer}>             <Image style={style.markImageStyle} source={this.image} onLoadEnd={() => {this.setState({iconLoaded: true});}} /> ...

Hello everyone,
Any news on a potential fix? Tried every workaround but no success so far.
Is it possible that the new RN version 0.55.4 comes with a fix for that?
Thanks.

In my case, it not showing on Android, working on iOS.

That is the case for everyone. This is an Android issue. iOS is not affected.

Was facing the same issue, managed to fix it based on what @nerdyzia proposed.
The structure of my marker component was:
const CustomMarker = () => (
  <Marker>
    <View>
      <View><Text /></View>
      <Image />
    </View>
  </Marker>
)

That worked fine on iOS, but for android the Image rendered blank. So adjusting the above to the following, displays the Image correctly:
const CustomMarker = () => (
  <Marker>
    <View>
      <View><Text /></View>
      <View><ImageBackground /></View>
    </View>
  </Marker>
)

Hey Guys, so I had this problem today, and this worked for me :
import React, { Component } from 'react';
import { AppRegistry, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import IDGenerator  from '../../utils/IDGenerator'
import MapView from 'react-native-maps';
const CAR_IMAGE = require ('../../../assets/Car.imageset/car.png')
const Callout = MapView.Callout
export default class MapCallout extends Component {
static callouts = []

constructor (props) {
    super (props);
    this.id = IDGenerator.ID ()
    MapCallout.callouts.push (
        {
            id     : this.id,
            loaded : false
        }
    )
}

static checkLoaded () {
    return MapCallout.callouts.filter ( (img) => !img.loaded ).length == 0
}

render () {

    return (
        <Callout>
            <Text style = { styles.headerText } >{ this.props.title }</Text>
            <TouchableOpacity onPress = { () => {
                console.log ("PRESSED")
             } }>
                <Image
                    source = {
                        CAR_IMAGE
                    }
                    onLoadEnd = {
                        () => {
                            this.forceUpdate ()

                            index = MapCallout.callouts.findIndex (obj => obj.id === this.id)

                            MapCallout.callouts [index].loaded = true

                            if (MapCallout.checkLoaded ()) {
                                console.log ("FINISHED LOADING")
                            }
                        }
                    }
                />
            </TouchableOpacity>
        </Callout>
    );
}

}
My logic is basically, have something listen where you use the callouts by using the function that checks if all the markers are fully loaded and if are not, load a spinner.

I'm having some issues when rendering markers (and callouts too). The marker's image is always the same. Just a blue pin.
When I open the map for the first time, there are some points that didn't render the image, but if it's the second time that I open the map, every marker is rendered.
I render the markers like some people said here:
<Marker>
 <View>
  <ImageBackground source={require("../../assets/images/marker_food.png")} style={{height: 30, width: 22, resizeMode: 'cover'}}>
   <Text style={{position:'absolute', top: 3, fontSize: 10, fontWeight: '900', fontFamily: 'Avenir', zIndex: 99, width:22, textAlign: 'center'}}>number</Text>
  </ImageBackground>
 </View>
</Marker>

I also tried to wrap text in  tags and also  but it's not working. Any clues?

None of the hacks work for me with the latest version of React native.

this comment https://github.com/react-community/react-native-maps/issues/1870#issuecomment-372018414 fixed my problem with images inside callouts

Sure @Bobobrien92,
"react-native": "0.54.2",
"react-native-maps": "^0.19.0",

Loading the image with height and width of 0 and then again later works for some devices. from what I can see they stop working at around API level 26.

@Fr1kki3 yep, it's already been reported to cause issues with API 25+

Yeah I solved mine now by pre-loading the image with height and width of zero. This seems like it might be unreliable but I haven't had any known issues yet. Still hoping for a fix though.

Use Image with resizeMode: "cover" or use ImageBackground . Both are working for me on android.
I used Image like this
import { createImageProgress } from 'react-native-image-progress'
const Image = createImageProgress(FastImage)```
and then I called it like this
`<Image resizeMode={FastImage.resizeMode.cover} source={Images.simple} style={{width: 17, height: 25}} />`
 while `ImageBackground` like this
`<ImageBackground source={Images.simple} style={{width: 35, height: 50}} />`

`"react-native": "^0.49.3",`
`"react-native-maps": "0.17.0"`

I am using this only for marker.
Calling forceUpdate will crash your application if you have may markers. So don't use it.

Hope this is useful.

what android version?, the error happens from version 7.1 (API level 25)

Unfortunately, I am not getting any devices with Android version 7.1.
But I checked on OnePlus 6.0.1/ Samsung 7.0.1/ Sony 8.0.0
It is working there.

(in my case) only happens 7.1 or higher (from API level 25)

@outaTiME I really don't have any idea Why it's not working for you...

For me, it's working fine even on android 8.
I can just show you my example.
This is my function to render pins.
renderMapPin (Pin) {
    switch (Pin) {
      case 'simple':
        return <Image resizeMode={FastImage.resizeMode.cover} source={Images.simple} style={{width: 17, height: 25}} />
      ..... other cases...
      default:
        return <Image resizeMode={FastImage.resizeMode.cover} source={Images.default} style={{width: 17, height: 25}} />
    }
  }

And then I called this function outside callout and inside the marker.
<MapView
            provider={this.props.provider}
            ref={ref => { this.map = ref }}
            style={styles.map}
            initialRegion={{
              latitude: LATITUDE,
              longitude: LONGITUDE,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA
            }}
          >
            { data.map((Url, index) => {
              const a = {
                latitude: Url.latitude,
                longitude: Url.longitude
              }

              return <MapView.Marker style={{zIndex: 5}}
                identifier={Url.target}
                key={Url._id}
                coordinate={a}
                onCalloutPress={() => this.onPressItem(Url)}
              >
                { this.renderMapPin(Url.pin_icon) }
                <MapView.Callout style={{width: 300, height: 60, paddingHorizontal: 2, justifyContent: 'center', alignContent: 'center', alignItems: 'center', backgroundColor: '#' + Url.color[1].substring(2), borderRadius: 10}} tooltip>
                  <Text style={{color: 'white', fontWeight: 'bold', textAlign: 'center'}}>{Url.titres[0]}</Text>
                  <Text style={{color: 'white', textAlign: 'center'}}>{Url.titres[1]}</Text>
                </MapView.Callout>
              </MapView.Marker>
            }) }
          </MapView>

Can you try to pass zIndex for your marker? Let me know if it is still not working. If possible then share your code.

@SandeshVakale Im using this with Expo (SDK 27) that brings react-native-maps 0.21 and with android 7.1 or higher does not show the images inside of custom components ... this is why this incident is open 😢
I see you use FastImage, what happens if you use a Image from react-native?
Marker component:
import React from 'react';
import PropTypes from 'prop-types';
import { MapView } from 'expo';
import { Image } from 'react-native';

export default class DeviceMarker extends React.PureComponent {

  static propTypes = {
    coordinate: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      initialRender: true
    };
  }

  render() {
    const {
      coordinate,
    } = this.props;
    return (
      <MapView.Marker.Animated
        coordinate={coordinate}
        centerOffset={{ x: 0, y: -18 }}
      >
        <Image
          source={return require('./assets/images/marker-car-exceeded.png')}
          onLayout={() => this.setState({ initialRender: false })}
          key={`${this.state.initialRender}`}
        />
      </MapView.Marker.Animated>
    );
  }
}

Component usage:
<MapView
  ref={ref => (this._mapRef = ref)}
  style={styles.map}
  initialRegion={initialRegion}
>
  <DeviceMarker
    coordinate={animatedRegion}
  />
</MapView>

This code works as expected on iOS / Android (until API 24)

svg works fine on android

@rheilgm Can you go into a little more depth than that?
"Mention your lib version, react-native version, Android version, and is it a device or emulator."
This issue has been open forever and plagued with well-intentitoned/useless recommendations with context to the GitHub issue.
There hasn't been any milestones set/accomplished that I know to fix this.

Same problem, whether it be an emulator or a phone, from 7.1 upwards Images as custom markers do not show in maps. Seems the image property of markers is the only way to go, just so little control over the size etc.
@outaTiME  Your solution and other forceupdate solutions simply don't work.

yeah since im out of options, converted the image to an svg then used https://github.com/necinc/msvgc to convert it to a react component
note that the react component generated by such lib is using react-native-svg
was lucky since the image we used is just some simple icon, easily converted it to an svg

@TitanKing Yup you are right, my solution only works until Android 7.0 (API 24), for higher version i use the following workaround in marker component:
import React from 'react';
import PropTypes from 'prop-types';
import { MapView } from 'expo';
import { Image } from 'react-native';

export default class DeviceMarker extends React.PureComponent {

  static propTypes = {
    coordinate: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      initialRender: true
    };
  }

  render() {
    const {
      coordinate,
    } = this.props;
    // https://github.com/react-community/react-native-maps/issues/1870
    if (Platform.OS === 'android' && Platform.Version >= 25) {
      // bad image pixel ratio using the following way
      return (
        <MapView.Marker.Animated
          coordinate={coordinate}
          centerOffset={{ x: 0, y: -18 }}
          image={return require('./assets/images/marker-car-exceeded.png')}
        />
      );
    };
    return (
      <MapView.Marker.Animated
        coordinate={coordinate}
        centerOffset={{ x: 0, y: -18 }}
      >
        <Image
          source={return require('./assets/images/marker-car-exceeded.png')}
          // hack to first render on android
          // https://github.com/react-community/react-native-maps/issues/924#issuecomment-311648778
          onLayout={() => this.setState({ initialRender: false })}
          key={`${this.state.initialRender}`}
        />
      </MapView.Marker.Animated>
    );
  }
}

@outaTiME
React Native's Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you'll generally get the sort of built-in caching behavior you'd have in a browser. Even so many people have noticed:

Flickering.
Cache misses.
Low-performance loading from cache.
Low performance in general.

FastImage is an image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).
Features

Aggressively cache images.
Add authorization headers.
Prioritize images.
Preload images.  $$$
GIF support.
Border radius.

Find More information here https://github.com/DylanVann/react-native-fast-image
Probably using Image from this library fixed my problem. I am not using any forceUpdate neither converting Image to SVG. Working fine on all devices and both OS.
Question: @outaTiME Can you please try my solution once and let me know if it is working for you or not? I never used expo before, so, don't know much about it.

@SandeshVakale I know the adventages of FastImage but unfortunately Expo uses its own asset manager for preloading and catching.

https://docs.expo.io/versions/latest/guides/assets
https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets

This is why I'm trying to use react native maps in the basic way.
Sorry but im unable to try your solution, by the moment my best effort was the example that I published, thanks !!!

@SandeshVakale since the library your are linking requires detaching from expo, I have used
react-native-expo-image-cache
which is working perfectly at my app. (@SandeshVakale maybe it fits for your development)
However, even using this component, the images are not displaying at Android callouts (it does at iOS).
Thank you for your point anyway.

Added my personal summary in https://stackoverflow.com/questions/49978119/react-native-android-markers-with-custom-images/50632024#50632024

@rahamin1 my snippet works in all iOS / Android versions and the marker behaviour is the same for all versions.
The custom components inside of markers work until version 7 of android (API 24), for higher versions I need to make special handling using the Marker image property.
I didn't try the @adlondon idea, I don't know if it works in all iOS / Android versions.

@outaTiME Thanks. Can you explain the solution for advanced android versions? I see that you are not changing the key and thus not forcing re-rendering... why is that? And I don't see any other difference from older versions...
Also, btw, why don't you use android version but expo version? Won't android version be better if in the future detach your app?

@rahamin1
Like he said, he's using image property, which work fine on later versions of Android. The downside of this solution is that you cannot manipulate image width/height using styles.
As for FastImage library it doesn't support local images from assets:
https://github.com/DylanVann/react-native-fast-image/issues/160#issuecomment-372157050

@jczerniakiev Thanks. I see now. Then it is not useful for me...

Inspired by @rheilgm's suggestion using svg, I took a bit different approach, which seems to be working for Android 7.1+. I've installed react-native-svg and produced this (Image and Text components inside Svg are imported also from svg library):
<MapView.Marker>
   <View>
       <Svg height='65' width='65'>
          <Image width='65' height='65' href={ClusterImage} />
          <Text x='51%' y='60%' textAnchor="middle" fontWeight="bold" fontSize="16"  fill="white">
               Random text
          </Text>
      </Svg>
   </View>
</MapView.Marker>

I'm experiencing the same issue with custom marker images not rendering on Android -- they work fine on iOS.  Using FastImage as noted above and seeing performance improvement on iOS but NO JOY on Android.  Simple console.log debugging on the onLoad callbacks shows shows "success" response on iOS
.
On Android though, there is no "success" response after the request to load

Any thoughts or suggestions as to why this might be this case or next steps to debug?  Feels like if I can get a "success" response on Android it may solve the image rendering.

What's happening with react-native-maps? As I see something has changed in Android 7.1 and higher, at least it's a bit different experience, some stuff doesn't work with react-native-maps.

I cannot get Image to render in custom Callout on Android higher 7.1 (API 25) ... I have the same thing as @YankeeSoccerNut, on 7.0 onLoad, onProgress, onLayout fires but in 7.1 and higher only onStartLoad and then nothing happens... the space where image is supposed to be is just empty

What I've tried:

using FastImage, ImageBackground and SVG
removing all styles from map
setting zIndexes
using local image from folder instead of url
downgrading, tried 24-28 compile tools (7.0-8.1 Android) with appropriate gradle tools and plugins, tried all major versions of react-native from 0.49-0.55, with appropriate react versions

absolutely nothing worked with 8.0 and 8.1, couldn't display an image in the Callout, of course it worked if i set image instead of marker, even with url ...  but every solution worked fine on 7.0... I'm mostly out of ideas at this point
Unrelated to this original issue, I've actually stumbled upon another bug using maps with react-native-gifted-chat... because of react-native-maps can't share position in chat on android higher then 7.1 android, location request times-out, totally frustrating since these two bugs are last major bugs left in my app...
I've got only a few ideas left, like will it be possible to make a clickable overlay-Callout a bit above the marker?
And those who got a working Image in Custom Callout on Android 8.1 what react-native/gradle/buildToolsV/compileSdkV did you use? @jczerniakiev for me it didn't work for some reason, I think it worked on 7.0 android but idk, maybe versions of tools and packages are different

It seems just had to ask and everything got resolved itself somehow... idk maybe some modules or some stuff in caches didn't clean properly or didn't properly install or apply or whatevs, but after a couple of hours after I've asked image started working in my custom callout on map... haven't changed anything in code, just tried different versions but in the end returned to those I started with ...
-react-native-maps 0.21.0

react-native 0.54.4
gradle wraper 4.4
compileSdk 25/buildTools 25.0.3

@FishButt can you please point out which workarounds/techniques helped you to resolve "image not showing" issue please. It would be very helpful for other users and also for us to find the cause of the bug.

hey @alvelig I fixed the "not showing image" on Callouts by this way (just using Webview instead of Image)
var url ='https://.....';
var html = '<img src="'+url+'" width="122" height="75" style="position:absolute; top:0; left:0;"/>';
<Callout>
<TouchableOpacity>
<View style={{height: 75, width:'100%'}}>
	<WebView source={{html: html}} style={{flex:1}} />
</View>
</TouchableOpacity>
</Callout>

I've made something simple like
render(){
  return(
    <MapView
      style={styles.map}
      region={this.state.mapRegion}
      showsUserLocation={true}
      onPress={this.onMapPress.bind(this)}
      >
        {this.renderMapMarkers()}
    </MapView>
  )}

renderMapMarkers() {
  return(
    this.props.activities.map(marker => (
      <MapView.Marker
         key={marker.id}
         style={styles.customMap}
         coordinate={ {
           latitude: marker.location.latitude,
           longitude: marker.location.longitude
         } }
         image={this.getMarker(marker.category)}
      >
// -- Callout --
        <MapView.Callout tooltip={true}>
          <TouchableOpacity
            onPress={() => Actions.viewActivity(marker.id)}
          <ImageBackground
            style={styles.image}
            source={{
              uri: image,
            }}
          />
        </MapView.Callout>
// --
      </MapView.Marker>
    ))
  )
}

Also worked with FastImage, but ImageBackground worked much better on Android 8.0

I wonder if ImageBackground also works for Marker not only for Callout.
That's very interesting. Soon I'll have some time to investigate this effect. Hope we get it solved.

I had absolutely no trouble with marker images on all androids, I'm setting them here
image={this.getMarker(marker.category)}
but it's just a switch that returns require('../dir_to_images/image.png')... If it doesn't work you could try this, worked on some androids, like on 7.0 and 7.1 i think
// -- Callout --
  <ImageBackground
    source={this.getMarker(marker.category)}
    style={{ width: 40, height: 40 }} />
  <MapView.Callout tooltip={true}>

...
  </MapView.Callout>
// --

I've actually tried passing url to marker, it rendered an image from internet and it always loaded images, on the map as marker, seemingly with no problems, but not in callout ... I've only had problems with images in callouts... actually still, even now ImageBackground is not always getting images before the first click on the callout, sometimes it takes a couple of clicks, map, callout, map, callout... and I'm pretty sure, that while I was using FastImage or ImageBackground, when images didn't load, I didn't catch any onError or onProgress events  ...  and it's also the best I could get out of 7.0 android or any higher, for now. Only way I've got images to load from "first marker click" is after a couple of app restarts

Thank you very much for this info.

FastImage not working on Android API 27

Fresco finally updated on RN 56, here:
https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#056

@outaTiME Fresco still has not fixed the problem, so unfortunately that update will not solve it.

Yeah I still can't get this to work. I've tried everything, including the drawee-debug aar, but I can't get my Marker images to load.

@wbattel4607 can you try this PR (was merged today, so try master)
https://github.com/react-community/react-native-maps/pull/2320?

@alvelig just tried it, no luck.

no lock either !

@efkan @alvelig just for the sake of providing more information, I am trying this on <Marker>, not <Callout>. The only somewhat working solution was the drawee-debug aar replacement suggested by efkan.
<ImageBackground> acted the same as <Image>, not rendering the image at all.
<Webview> just showed a white box in place of the image, no matter what URL or style options provided.
Adding the custom drawee-debug module caused the images to appear in the markers after re-rendering the markers in-app. In other words, the images are missing when the map appears for the first time, but when the markers are programmatically removed and re-added to the map, the images appear.
I also tried using the latest code on master, including the PR #2320, but while that may have resolved other problems, this was not one of them.
Beyond this I have no idea what to do, and it's really a major problem for us, as our whole app relies on the images in these markers. At this point we're likely just going to switch to MapBox for better or worse- as we're out of options. I've taken a look through the Fresco code but am still a ways away from even understanding the mechanics of that library- much less finding the solution.

No luck on any of those suggestions.

@ewein @wbattel4607 Did you try @outaTiME  solution? Seemed to work for me (although it is not ideal, not being able to set width/height for the images, and positioning the images seemed difficult).

I'm also seeing this issue.

Mention your lib version, react-native version, Android version, and is it a device or emulator.

library = https://github.com/expo/react-native-maps/archive/0.20.1-exp.0.tar.gz#81d607e2d77481c0441aecfdbc303389a34084c0
react-native = https://registry.yarnpkg.com/react-native/-/react-native-0.54.0.tgz#1582cc2b2a639d46e39c44bcc50e051d0061820a
Android = 8.0.0 on the One Plus 3 (1 May 2018 patch level)
It's a real device.

@efkan @wbattel4607 trying to follow the drawee-debug/fresco source approach but getting "A problem occurred starting process 'command 'ndk-build.cmd'" when trying to build it on Windows. Any ideas? Probably something to do with my ndk path but I've followed the instructions and seem to have set things up correctly.

@dancherb yeah I couldn't get it to build either so I used the one pre-compiled by efkan.
https://github.com/react-community/react-native-maps/issues/1870#issuecomment-370751929

Worked for me, thanks a bunch!!

thank god @efkan 's solution worked for me too!

I've found I'm still getting some markers not showing up when there's a lot on the map at once (over 15) - are any of you guys getting this as well? @mursang @efkan @wbattel4607

@wbattel4607 i add that fix, but only work in some android devices.

@luisfuertes yeah, read my previous remark: https://github.com/react-community/react-native-maps/issues/1870#issuecomment-397397682

Wrapping it inside a view works fine:
<Marker>
  <View>
    <Image src={...} />
  </View>
</Marker>

Anyone managed to use both a custom image marker and a custom callout component?
You can't have both as children to Marker...

After reading through the comments here and trying @efkan 's solution, I'm a little confused as to where to put the .aar file. I don't have a libs folder in projectDir/android/app. Do I have to create it, or is it automatically generated? If I do create it, what else needs to go in it?
Definitely hoping this works. Super annoying bug.

@pianoman730 , I hope this answer helps you...

@jczerniakiev Solution works fine for me
....

 import * as svg from 'react-native-svg';
......

renderMarker = pin => {
    return (
      <Marker
        key={pin.id}
        coordinate={pin.location}
        onPress={() => this.showModel(pin)}
        //image={Icons.location}// This is working but large size of image in release apk
      >
        {/* Cause of the new map not loading images issue */}
        {/* <Image style={styles.markerImage} source={Icons.location} /> */}

        {/* import * as svg from 'react-native-svg';
            This is working fine */}
        <View>
          <svg.Svg width="40" height="50">
            <svg.Image width="40" height="50" href={Icons.location} />
          </svg.Svg>
        </View>
      </Marker>
    );
  };

renderCluster = (cluster, onPress) => {
    const pointCount = cluster.pointCount,
      coordinate = cluster.coordinate,
      clusterId = cluster.clusterId;

    const clusterEngine = this.map.getClusteringEngine(),
      clusteredPoints = clusterEngine.getLeaves(clusterId, 100);

    return (
      <Marker
        onPress={onPress}
        coordinate={coordinate}
        key={cluster.clusterId}
        //image={this.state.icon}
        //anchor={{ x: 0.2, y: 0.5 }}
      >
        <CustomMarker
          amount={pointCount}
          icon={this.state.icon}
          text={this.state.name}
        />
      </Marker>
    );
  };

class Marker extends React.Component {
  render() {
    const { fontSize, amount, icon, text } = this.props;
    return (
      <View style={styles.container}>
        {/* <View style={styles.markerImage}/> */}
        <svg.Svg width="50" height="60">
          <svg.Image width="50" height="60" href={icon} />
          {/* <Image style={styles.markerImage} source={icon} /> */}
        </svg.Svg>
        <View style={styles.bottomBubble}>
          <PlainText style={[styles.amount, { fontSize }]}>
            {amount} {text}
          </PlainText>
        </View>
      </View>
    );
  }
}

@Danushka50 @jczerniakiev not ideal for me as I want to load images from a URL - do you know if react-native-svg supports this?

@dancherb Yes, it does.
https://github.com/react-native-community/react-native-svg/issues/612#issuecomment-368845486

by setting zIndex of Marker more than MapView, solve my issue..

So after trying @efkan's solution, when I try to render an image in 2 different ways, it either errors out, or crashes. I don't have any styling on the marker or anything, just a plain attempt to render. The error I'm getting is
Error while updating property 'image' of a view managed by: AIRMapMarker

null

abstract method "com.facebook.drawee.controller.AbstractDraweeControllerbuilder com.facebook.drawee.controller.AbstractDraweeControllerBuilder.getThis()"

import React, { Component } from 'react';
import { View, Image } from 'react-native'
import styles from '../styles'
import { Button } from 'react-native-elements';
import CVTDPin from '../assets/cvtdpin.png'

class MapScreen extends Component {
  render() {
    const { navigation, color, initialRegion } = this.props
    return (
      <View style={styles.container}>
        <MapView
          initialRegion={initialRegion}
          region={initialRegion}
          style={styles.map}
          showsUserLocation={true}
        >
          <Marker
            coordinate={initialRegion}
            onPress={() => navigation.navigate('Details')}
            pinColor={color}
            image={CVTDPin} //This way gives the error above.
          >
            <Image source={CVTDPin}/> //Trying this way crashes the app with no errors
          </Marker>

        </MapView>

      </View>
    )
  }
}

export default MapScreen

I have tried literally all proposed solutions.
Declaring  images before map load, svg, keys, image property, image background child, tracksViewChanges etc. None work.
I use maps 0.20.1 and RN 52.1
In my case when I load map marker is not visible.
If I move map markers become visible and then work. And markers are not rendered only initially first time once in about 10 times (when I refresh data on map).
If user see map he doesn't know that if he drag map markers will appear.
Are there any news on this problem?

@pianoman730 I'm also seeing that same error when using the debug-drawee method on RN 0.56
This is absolutely gating our upgrade to 0.56 so it is very frustrating... is it possible that the .aar that was posted on Google Drive is out of date with the version of Fresco shipped with RN 0.56?

@bbil We'd have to hear from @efkan on that one.

@bbil @pianoman730
It does appear to be the case that the .aar uploaded by @efkan was for an older version of Fresco. React Native 0.56 uses Fresco 1.9.0, so I just built this version from source (he's right, this does take a while), commenting out the same lines, and it seems to fix the issue for my app.
Here's the .aar, if anyone else on RN 0.56 wants to try this fix:
https://drive.google.com/open?id=1Pde3G3Ms9BR4jYSR26GNJ68LUu6LWbez

@iak0 Yeah, that looks like it is working for me. First time in a long time that the image has been able to appear on the marker! We'll see if it disappears after a while.

Goliath

@pianoman730 sorry far late.
Actually I had share over here the steps how to build drawee.aar in case of need.
However @iak0 had already overcome this job. Thanx Kai Si.
Alexander Oprisnik had reported the visibility issue to Google (issue tracking link)
I guess, we'll need to build drawee file until Google correct or advising something and react-native upgrade Fresco version. Then we'll need to build the file as a workaround for a while to make compatible with problem APIs. This is really a time-consuming problem!

Having the same issue , here how i structure my code :
<Marker>
  <Image/>
  <Callout>
    <View>
       ...
    </View>
  </Callout>
</Marker>

I also notice the following things :
My app uses multiple routes. In my case images are always showing except the first time I visit the map route. I can't figure out why it always work except the first time I open the map 😕

@dopey2  Seems like it is related to the time it takes for the image to be downloaded : when I open my app, I load a list where logos are displayed, I then open the map and only the images which have been previously loaded on my list can be displayed in the Callout.
Will try to fix this.

I got the same issue with local asset. My component containing it is displayed elsewhere in the app without any glitch. But on map (only Android, targeting API 26), i got a blank area. Tried to used ImageBackground, setting width and height, using few resize modes, anyway.
react-native-maps: 0.20.1
react-native: 0.52.2

thanks Kai
Goliath
On Tue, 24 Jul 2018 03:58 Kai Si<EMAIL_ADDRESS>wrote:

@bbil https://github.com/bbil @pianoman730
https://github.com/pianoman730
It does appear to be the case that the .aar uploaded by @efkan
https://github.com/efkan was for an older version of Fresco. React
Native 0.56 uses Fresco 1.9.0, so I just built this version from source
(he's right, this does take a while), commenting out the same lines, and it
seems to fix the issue for my app.
Here's the .aar, if anyone else on RN 0.56 wants to try this fix:
https://drive.google.com/open?id=1Pde3G3Ms9BR4jYSR26GNJ68LUu6LWbez
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/react-community/react-native-maps/issues/1870#issuecomment-407255340,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATj5b8xnbXNTluy45lxkJCDYZ12jD9Qmks5uJn9igaJpZM4Q-Nkv
.

@goliath45 where should we put this file?

Hi all, I'm using local images (JPG's from an assets directory) inside the marker component with Expo SDK 29  (RN 0.55.4).
The marker images load most of the time, however when they don't load there is no action that will cause them to render (moving the screen doesn't fix this, for example). I have to reload the app to see the images render.
<MapView.Marker key={title} coordinate={coordinates} title={title}>
    <Image source={images.card} style={{ width: 60, height: 60, borderRadius: 50, borderWidth: 3, borderColor: "#fff" }} />
</MapView.Marker>

Is anybody else on Expo experiencing this?

I tried all the workaround (webview, drawee, preload marker before map) nothing work. Do you have other ideas ?
React native : 0.54
React native maps : 0.21
Android : 8.1.0

For the drawee, there are two files posted here. One is for RN .55.4 and
the other for .56. You'll need to use those versions to try that aar file
fix.
On Mon, Jul 30, 2018, 15:52 zarnifoulette<EMAIL_ADDRESS>wrote:

I tried all the workaround (webview, drawee, preload marker before map)
nothing work. Do you have other ideas ?
React native : 0.54
React native maps : 0.21
Android : 8.1.0
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-community/react-native-maps/issues/1870#issuecomment-409023718,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ah7_MZS4FKJh06NSIINHqj7RkOsM0OCFks5uL4AEgaJpZM4Q-Nkv
.

For the drawee, there are two files posted here. One is for RN .55.4 and the other for .56. You'll need to use those versions to try that aar file fix.

my maps is working now... thank you
Goliath
On Mon, 30 Jul 2018 23:55 pianoman730<EMAIL_ADDRESS>wrote:

For the drawee, there are two files posted here. One is for RN .55.4 and
the other for .56. You'll need to use those versions to try that aar file
fix.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-community/react-native-maps/issues/1870#issuecomment-409024659,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATj5b7kC8MCWF3KxTYg2D_XZQV-Tjh70ks5uL4DhgaJpZM4Q-Nkv
.

It still won't work for remote urls.

+1

I have had to give up on this due to it's unreliability and revert to the Marker image prop.
https://github.com/react-community/react-native-maps/blob/master/docs/marker.md#marker--component-api

I'm using the drawee fix and my icons disappeared this morning. It just shows the classic red marker now. Going to have to try something else.

@pianoman730 I couldn't find a fix for this that worked, the Image component only intermittently rendered.

@SKempin Right, I had tried that a while back unsuccessfully. Mine is currently using the Marker image prop and it renders ok and everything, but it's the same issue I've had for about 6 months now, where after a while (maybe a day, maybe a few days) the images don't render anymore and only the markers will show up correctly. I know for a fact that the markers are always rendered, but the images inside the markers for some reason are not guaranteed.

Maybe we could hear from @alvelig to see if there is anything in the works or if we are just left to our own devices.

@efkan Is your drawee fix working for you?

@Danushka50  works!
with react native svg

@pianoman730 , I use drawee on RN v53 and rarely images can not appear on the markers.
However I could not find better solution and this is just a workaround.
I've tried on Genymotion and AVD emulators, several Samsung devices and Xperia Z. drawee works on the all Android OSes.

try this one
Michael le Grange
On Wed, 1 Aug 2018 22:10 pianoman730<EMAIL_ADDRESS>wrote:

@efkan https://github.com/efkan Is your drawee fix working for you?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-community/react-native-maps/issues/1870#issuecomment-409705791,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATj5b-eit_uTk5A3uaelWuCnkBlUqNQRks5uMgtAgaJpZM4Q-Nkv
.

This solution worked for me:
<MapView.Marker
key={this.state.iconLoaded ? key : ${key}_loading}>
<Image source={MY_ICON} onLoadEnd={() => {
if (!this.state.iconLoaded && Platform.OS === "android") {
this.setState({iconLoaded: true});
}
}}/>
</MapView.Marker>

@shameemz How thoroughly has that solution been tested? Are there any performance issues? Thanks

now Is there anyone else experiencing this problem? how you fix it?
I plz stay with it for 5 hours.
how to plz.
===================
คึมายากคักแท้ละห่วย โพ้ดโพ บักโมบักแตง.

@SKempin Its works with a light flickering! I understood there might be a performance issue because of unnecessarily changing the state. But I couldn't find any other solution for this.

There are two ways I test by recommendation.
Good work.
Thx. @elieteyssedou
1. Use a custom component for my image with react-native-svg
Thx.  @Afalook
2. Use Webview render html.
ex.

    <Callout tooltip={false} >
            <View style={{ width: 250, height: 250 }}>
                       <WebView
                               source={{
                                        html: `<img src="http://cuve-stockage-process-eta.com/wp-content/uploads/2018/05/test.png" width="250" height="250"/>`,
                                }}
                        />
              </View>
   </Callout>

It work!!
I used the first solution to this problem.

Nothing works for me, i think we need to wait news from facebook/fresco team 😞

@ccoeder I've started using the image prop on the marker itself.
https://github.com/react-community/react-native-maps/issues/1870#issuecomment-409598283

@SKempin I need to use custom markers, so its not working for me 😢

Just as an FYI, I've been dealing with this issue for about 6 months now and haven't found anything to be a permanent solution until now. Using the image prop, the image would disappear after a while leaving just the normal pin marker. I couldn't get embedding an Image in a View in <Marker></Marker> to work for whatever reason. So this solution, granted, it's a workaround, but it's turning out to be the best solution for me.
I edited my images in gimp and saved them out as .svg's and then followed this tutorial. It covers everything you need to get this to work, but if there are questions I'm happy to answer them. In my code, I used it as
<Marker
   //other marker props
>
   <View>
      <Icon name='iconName' size={40} color={color} />
    </View>
</Marker>

and it's worked like a charm. I can use the same icon but change the color and I haven't really noticed a performance issue at all either. Hope this helps.
p.s. I did try @efkan's solution with building fresco from source as well. So combining that with this may have made a difference, but I don't think so because it's not using the image prop from Marker nor using Image in Marker. This should be a standalone solution.

@SKempin The image prop would always render for like a day or two. But in reopening the app again it would permanently fall back to the regular marker and would not render an image again until I reinstalled. I never had it where it didn't render anything. The default marker pin always shows up for me, just not the image.

@pianoman730 thanks, was this on Android or iOS, or both? Cheers

@SKempin It was just on Android as far as I know. I think generally, this is an android bug.

@SKempin Yes, this is only an Android bug, as it is caused by a problem in https://github.com/facebook/fresco, (https://github.com/facebook/fresco/issues/1445)

Thanks. So where is this original issue at with being fixed?

@SKempin it has been in limbo for a while. Nobody knows how to fix it, and for all intents and purposes the Fresco team have given up on it until somebody submits a PR.

@wbattel4607 Thanks for the update. This is obviously very frustrating as it is a big issue affecting RN maps. Is there any course of action we can undertake to highlight the demand for a fix?

@SKempin the best thing we can do at the moment is "star" the issue on Google's issue tracker so they know to give it higher priority. Go to the issue here https://issuetracker.google.com/issues/111293868 and press the little ✩ to the left of the title.

Got blocked on this upgrading to RN 57 (0.57.0-rc.3), went ahead and rebuilt Fresco following @efkan 's steps and this seems to have worked.
Here's the latest aar build<EMAIL_ADDRESS>with that patch: https://github.com/FLGMwt/react-native-map-image-issue/blob/9a85d729a26a6525ba2f5a5c1fe7ed347b0e5c7d/android/app/libs/drawee-debug.aar

Hey guys Anyone still facing this issue I have a workaround.. Not sure if its a good one..
Use react-native-svg to render the image inside and Svg component.
`import React from "react";
import Svg, { Image } from "react-native-svg";
const Redmarker = props => (

<Image
x="0%"
y="0%"
width="45"
height="70"
preserveAspectRatio="xMidYMid slice"
opacity="1"
href={require('../../../assets/icons/marker.png')}
/>

);
export default Redmarker;
`
and then use this component instead of Image element

Any update?

@decodez Thanks. So far I haven't experienced any issues when using the image prop on the marker element, but I know this is reported to be unreliable too. Will try your approach if I start experiencing issues.

Using the image prop make icon sizes unpredictable, especially when using code-push. But the Svg trick seems to work:
import * as React from 'react'
import Svg, { Image } from 'react-native-svg'

const MapMarkerImage = props => (
  <Svg width={props.width} height={props.height}>
    <Image href={props.src} width={props.width} height={props.height} />
    {props.children}
  </Svg>
)

MapMarkerImage.defaultProps = {
  children: null,
}

export default MapMarkerImage

@davidhellsing Thanks, I can work with this until the fix. One small bug in the example you've provided, just correct the prop source/src in the parent and the child.

Good new guys. I have investigated the problem, and found out that it is based actually on two separate problems. And I've created two separated PRs which fix the problem.
No need for SVG or other hacks anymore. Just wait for them to be merged in, and for a new version to come out.

In the meantime, you could point your package.json to my branch, which includes my other pending PRs also (#2445, #2390, regarding coordinate<->point conversion).
"react-native-maps": "git+https://github.com/danielgindi/react-native-maps.git#merged",

Merged to master. Please, everybody to whom may concern pull master and test if it resolves the issue.

Will you release new version?

@ccoeder Only after tests confirm ok

I've left some feedback on the PR (https://github.com/react-community/react-native-maps/pull/2478#pullrequestreview-153587452), should we continue conversation there or here?

\react-native-maps\lib\android\src\main\java\com\airbnb\android\react\maps\AirMapView.java:192: error: cannot find symbol
    attacherGroup.setOverflow(ViewProps.HIDDEN);
                                       ^
  symbol:   variable HIDDEN
  location: class ViewProps

I got this error.

Until we wait for a real fix, here is a workaround that worked for me.
just create CustomMarker.js like below:
import React, { Component } from 'react';
import { View, ImageBackground, Text } from 'react-native';
import { Marker } from 'react-native-maps';

export default class CustomMarker extends Component {
  state = {
    initialRender: true
  }

  render() {
    return (
      <Marker
        coordinate={{
          // latitude: 34.3529, longitude: 62.2040,
          longitude: -68.23, latitude: -33.23,
          latitudeDelta: 0.4,
          longitudeDelta: 0.41,
        }}
      >
      <View style={{
                flexDirection: 'row', width: 140, height: 60,
                borderRadius: 70, backgroundColor: 'orange' }}>
        <ImageBackground
          source={require('./assets/marker.png')}
          style={{
            borderRadius: 100,
            borderColor: "#ff0000",
            width: 50,
            borderWidth: 1,
            height: 50,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          //onLoad={() => this.forceUpdate()}

          // ***** BELOW IS THE WORKAROUND *****
          key={`${this.state.initialRender}`}
          onLayout={() => this.setState({ initialRender: false })}
        >
          <Text style={{ width: 0, height: 0 }}>{Math.random()}</Text>
          <Text>Marker</Text>
        </ImageBackground>
        </View>
      </Marker>
    );
  }
}

and use it like below:
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  View,
  Text,
  Image, ImageBackground,
  StyleSheet
} from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import image from './images/flag-pink.png';

import CustomMarker from './CustomMarker';

export default class App extends Component<{}> {
  render() {
    return (
      <MapView
        renderMarker={renderMarker}
        initialRegion={{
          longitude: -70.23,
          latitude: -33.23,
          latitudeDelta: 9.22,
          longitudeDelta: 4.21,
        }}
        style={StyleSheet.absoluteFillObject}>

        <MapView.Marker
            image={image}
            coordinate={{
              longitude: -70.23,
              latitude: -33.23
            }}
        />

        <CustomMarker />
      </MapView>
    );
  }
}

unfortunately above work-around did just work on Android 6 using react-native-svg library which can handle images like *.png did fix the problem on all versions.

@zagoa and other experiencing problems with the last PR pull master again please. It was fixed in https://github.com/react-community/react-native-maps/commit/710dca49a515f0f781f51fcc6997af43da9923cc

i am having this problem too.android

@lastpeony which problem? Did you pin your react-native-maps to master?

trying this out right now, just to confirm (because I have never done this before) I just have to run npm install git+https://github.com/react-community/react-native-maps.git from my project and compile+run it as usual right?

I'm not sure how npm install will treat it, as it won't know to name it react-native-maps. Just go to your good old react-native-maps reference in package.json, and replace the version with a git url. Then run npm install

@danielgindi npm installing it the way I mentioned results in changes to package.json too just like the way you suggested. my way is just doing it backwards i guess:
"dependencies": {
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-maps": "git+https://github.com/react-community/react-native-maps.git"
}

Got it to work on Android simulator Nexus 5X API 24!!
Thanks man!
When should I expect a release so that I can update my project dependencies?

So relieving to see the markers finally working on Android right? It's so frustrating developing on Android, and with React Native specifically. As they have so many challenges implementing simple stuff on Android that is just basics with iOS.

A big thank you to @danielgindi and all people who helped with the fresco workaround, a big issue seems to be finally resolved 🙏

So I believe we can FINALLY close this issue!

@alvelig @danielgindi the PR solves the android custom marker problem but i notice i'm noticing a constant increase of memory usage (Android Studio Simulator: 188% CPU and my PC fan going crazy. Real Device: the garbage collector logs memory allocation warnings one time per second).

@leolusoli You should set tracksViewChanges to false after the image is loaded/rendered, like you do in iOS. It has the same behavior now. You could do it in the onLoadEnd or onLoad/onError callbacks of the Image.
For markers that do not have images inside them, set tracksViewChanges to false in the componentDidUpdate method of the Component.

I am still having a problem with this.  I deleted node_modules and ran npm install
<MapView
      style={{
          position: 'absolute',
          top: this.props.screenProps.state.searchFilter.length === 0 && Object.keys(this.props.screenProps.state.filter).length === 0 && this.props.screenProps.state.filter.constructor === Object ? 100 : 150,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      initialRegion={{
        latitude: global.lat,
        longitude: global.lon,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      showsUserLocation={true}
      followsUserLocation={false}
      showsMyLocationButton={true}
      loadingEnabled={true}
      onLongPress={()=>this.setState({deals:[]})}
      >
      {this.props.screenProps.state.filteredDeals.map(marker => (
        <Marker
          key={marker.key}
          coordinate={{
            latitude: marker.lat,
            longitude: marker.lon,
          }}
          onPress={() => this.showAllDeals(marker.business_id)}
        >
          <Image
            style={{height: 40, width:40}}
            source={{uri: marker.icon}}
          />
        </Marker>
        ))}
      </MapView>

"dependencies": {
    "fbjs": "^0.8.16",
    "geolib": "^2.0.24",
    "moment": "^2.22.2",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-moment": "^0.7.9",
    "react-native": "^0.55.3",
    "react-native-actionsheet": "^2.4.2",
    "react-native-elements": "^0.19.1",
    "react-native-fbsdk": "^0.7.0",
    "react-native-firebase": "^4.0.7",
    "react-native-google-signin": "git+https://github.com/invertase/react-native-google-signin.git#v0.12.2",
    "react-native-maps": "git+https://github.com/react-community/react-native-maps.git",
    "react-native-modal-overlay": "^1.2.3",
    "react-native-phone-call": "^1.0.8",
    "react-native-root-toast": "^3.0.1",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^1.5.11",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-form": "^7.3.0",
    "rn-sliding-up-panel": "^1.2.1",
    "update": "^0.7.4",
    "validator": "^9.4.1"
  }

Run yarn cache clean

Still no.
Could it be because I'm using an external image?

Maybe. Try it with a local one.

Still no.  Ugh.  I guess thats a good thing though, as I really need external.
<MapView       style={{           //display:'none',           //Object.keys(this.props.screenProps.state.filter).length === 0 && this.props.screenProps.state.filter.constructor === Object           position: 'absolute',           top: this.props.screenProps.state.searchFilter.length === 0 && Object.keys(this.props.screenProps.state.filter).length === 0 && this.props.screenProps.state.filter.constructor === Object ? 100 : 150,           left: 0,           right: 0,           bottom: 0,         }}       initialRegion={{         latitude: global.lat,         longitude: global.lon,         latitudeDelta: 0.0922,         longitudeDelta: 0.0421,       }}       showsUserLocation={true}       followsUserLocation={false}       showsMyLocationButton={true}       loadingEnabled={true}       onLongPress={()=>this.setState({deals:[]})}       >       {this.props.screenProps.state.filteredDeals.map(marker => (         <Marker           key={marker.key}           coordinate={{             latitude: marker.lat,             longitude: marker.lon,           }}           onPress={() => this.showAllDeals(marker.business_id)}         >           <Image             style={{height: 40, width:40}}             source={require('../../../assets/whatelse_icon.png')}           />         </Marker>         ))}       </MapView>

Still no.  But i guess that's a good thing as I really need external images to work.
<MapView
      style={{
          position: 'absolute',
          top: this.props.screenProps.state.searchFilter.length === 0 && Object.keys(this.props.screenProps.state.filter).length === 0 && this.props.screenProps.state.filter.constructor === Object ? 100 : 150,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      initialRegion={{
        latitude: global.lat,
        longitude: global.lon,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      showsUserLocation={true}
      followsUserLocation={false}
      showsMyLocationButton={true}
      loadingEnabled={true}
      onLongPress={()=>this.setState({deals:[]})}
      >
      {this.props.screenProps.state.filteredDeals.map(marker => (
        <Marker
          key={marker.key}
          coordinate={{
            latitude: marker.lat,
            longitude: marker.lon,
          }}
          onPress={() => this.showAllDeals(marker.business_id)}
        >
          <Image
            style={{height: 40, width:40}}
            source={require('../../../assets/whatelse_icon.png')}
          />
        </Marker>
        ))}
      </MapView>

The image is for sure there, as its clickable.  It's just invisible.

@bmkopp10
It does work with external images too, no problem.
Try with "react-native-maps": "git+https://github.com/danielgindi/react-native-maps.git#merged",, as it has some performance improvements, and has a new redraw() method on the marker to manually tell it to redraw, which gives complete control over performance.
You should set onLoad event on your Image, and do two things with that:

Validate that the event is actually called (before this PR it was not!)
If/when onLoad kicks in - call redraw() on the Marker and let's see what happens. (You will have to keep the ref to the marker)

@bmkopp10 Have you considered checking the styling? maybe add resizeMode: 'contain' or something like that? if you said image is clickable but just not visible it might be that the image was cropped weirdly?
@danielgindi thanks again for making it work AND making PR for performance improvement as well! :D

@danielgindi thanks for the advice. I tried to solve this morning but the performance issue still present.
My package.json dep is:
"react-native-maps": "git+https://github.com/react-community/react-native-maps.git"
Here's my custom marker codebase:
class BubbleMarker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      tracksViewChanges: true
    }

    this.onPress = this.onPress.bind(this)
    this.stopTracksViewChanges = this.stopTrackViewChanges.bind(this)
    this.startTracksViewChanges = this.startTrackViewChanges.bind(this)
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (this.state.tracksViewChanges && !nextState.tracksViewChanges)
  }

  onPress() {
    this.props.onPress(this.props.data.objectId)
  }

  stopTracksViewChanges = () => this.setState({ tracksViewChanges: false })

  startTracksViewChanges = () => this.setState({ tracksViewChanges: true })

  render() {
    const { data, profileImage } = this.props,
          image = profileImage || ENUMERATOR_BUBBLES_TYPE[data.type].image

    return (
      <Marker identifier={this.props.identifier} coordinate={this.props.coordinate} tracksViewChanges={this.state.tracksViewChanges}>
        <View style={styles.bubbleMarkerContainer}>
          <ProgressCircle
            radius={20}
            borderWidth={4}
            percent={Number(this.props.perc)}
            color={ENUMERATOR_BUBBLES_TYPE[data.type].color}
            shadowColor={ENUMERATOR_BUBBLES_TYPE[data.type].backgroundColor}>
            <View style={styles.bubbleImageContainer}>
              <Image
                source={image}
                resizeMode={'cover'}
                style={styles.markerIcon}
                onLoadEnd={this.stopTracksViewChanges}
                onLoadStart={this.startTracksViewChanges} />
            </View>
          </ProgressCircle>
        </View>
      </Marker>
    )
  }
}

@luisfuertes nada
@danielgindi I also try to use git+https://github.com/danielgindi/react-native-maps.git#merged. The CPU load is correct but the markers with external images aren't visible (but tappable).

@leolusoli weird, this could be a case of a race condition (which I haven't met actually). I imagine that if the tracksViewChanges is actually set to false before the next drawing frame is called - it wouldn't draw. You could eliminate this either with a timeout - which is a hack and won't be stable, or with a redraw call along with the setState.
I'm considering now that maybe when setting tracksViewChanges: false - it should always let it render one more time to account for this.

@leolusoli Try to delete node_modules and npm i again. Then test it without the timeout hack. I've added a "last render" frame, that only happens if tracksViewChanges was true and toggled to false.

@danielgindi it works without setInterval now

onLoad isn't even being called ... I also tried onLoadStart, still nothing.  Images work perfect on iOS.

{this.props.screenProps.state.filteredDeals.map(marker => (
        <Marker
          key={marker.key}
          coordinate={{
            latitude: marker.lat,
            longitude: marker.lon,
          }}
          onPress={() => this.showAllDeals(marker.business_id)}
        >
          <Image
            style={{height: 40, width:40}}
            source={{uri: marker.icon}}
            onLoadStart={()=>alert('test')}
          />
        </Marker>
        ))}

Maybe this will help?  I tried using react-native-elements  instead of react-native
{this.props.screenProps.state.filteredDeals.map(marker => (
        <Marker
          key={marker.key}
          coordinate={{
            latitude: marker.lat,
            longitude: marker.lon,
          }}
          onPress={() => this.showAllDeals(marker.business_id)}
        >
          <Avatar
            small
            rounded
            source={{uri: marker.icon}}
            //onPress={() => console.log("Works!")}
            activeOpacity={0.7}
          />
        </Marker>
))}

And I get this...

Seems like it just hates the url?  I noticed I'm the only one who's maping my markers.  Could that be the problem?

To further clarify, I have other components in the app that map images the same way.  Those images work perfectly fine. So it's not a problem with the url.  I also tried using a  local image in the mapped marker.


feat: sigstore - download keys and certs from TUF repo

Leverage the TUF integration offered by sigstore-rs to download Fulcio and Rekor data from the official TUF repository of sigstore.
Users are still allowed to provide custom Fulcio and Rekor data by loading it from the local filesystem.
This fixes https://github.com/kubewarden/kwctl/issues/177
Note well: this builds on top of https://github.com/kubewarden/policy-fetcher/pull/67 - I'll rebase the code once it gets merged

I've changed the Cargo.toml to reference policy-fetcher from the main branch

Updated to build against the freshly tagged release of policy-fetcher and policy-evaluator


[Specs] Adds expectation syntax that does not depend on Object

Following RSpec's lead, I believe we should not need to monkey patch
every object in order to test them. This way everything is controlled by
the specs, instead of augmenting an object's API.
I also propose a deprecation for the should methods. Right now a
deprecation is just printing to STDIN, we should probably have a logger
and print the message through that.

I vow to change all the core specs if this gets through, so that we don't get nasty deprecation messages. :guardsman:

The PR looks OK, thanks :-)
But... why would one define a should or should_not method in another context? What was the real conflict in RSpec besides the philosophy behind it? People would not about spec, they won't add a should method to their objects.
I find foo.bar.should eq(2) easier to write than expect(foo.bar).to eq(2) because less parenthesis are involved (so shift has to be pressed more types). Also, the should version is a bit shorter. But, a point in favor is that by looking at the parenthesis you can see both sides more clearly, so maybe it's more readable.
I'm not sure I like the expect syntax better than should.
What are others' opinions on this?

Here's some rationale behind switching from should and should_not to expect(..), from the current rspec maintainer: http://myronmars.to/n/dev-blog/2012/06/rspecs-new-expectation-syntax
Personally I prefer expect(..), because in ruby it can be context-dependent (only available in an 'it' block), so it avoids the monkey-patching Object, and the special cases it doesn't cover like BasicObject. I don't know how well this logic applies to crystal, but I was against using rspec until it introduced expect().

Worth nothing though, besides the logical reasons for the switch, I prefer expect(1).to eq(1) over 1.should == 1, as far as readability goes :-)

Other than all the reason Myron points out in that article, it's my personal opinion that monkey patching should be a last resort. Therefore, I seize any opportunity to use composition, delegation or other techniques that allow me to remove it.
We could have both syntaxes for a while and toy with it, but this being a language that has little adoption (yet) and is in a very embryonic stage, I believe we should only have one. Be that the should or the expect syntax.

@r20 thanks for the link!
I read it, and the reasons to use expect vs. should are under a title "Delegation issues", which have to do with BasicObject, proxies and other things we don't have in Crystal (Object is the root of all, that's all). The word "monkeypatch" only appears in the comments below (in that post), which makes me think that monkeypatching was not the main reason they changed the syntax (I never saw anyone complaining "I have a method should in my codebase and it conflicts with RSpec's should). You can also see some comments like "Oh, I liked the 'should' syntax, the new syntax looks less readable with those many parenthesis" (and of course other comments saying "I love the new syntax").
I'd say we leave "should" instead of "expect". If later we find a real problem that affects us (and not just Ruby), we change it.

@asterite I'm cool with that, but what about supporting both syntaxes? Just throwing it out there for discussion...


Add performance documentation

It's not complete because other PRs must be merged first. However, you can validate the concept.

@lorban @chrisdennis I'm interested in your feedback. In particular, do you think some figures for slower and faster would be interesting? (which means having a benchmark testing each case)
However,   #2455 and #2449 are required to get the final performance.

@henri-tremblay Build failed with a tets compilation failure. Will merge once once u fix it.


Adapt to .NET Core

First steps

Requires adding '.dll' in IsXLSXFile also. I will make changes in master after merge.


lots of fixes & cleanups & extras

While working on a small project I needed you API and I made the following improvements:

log.warn is deprecated
All docstrings adjusted to PyDoc
All functions/cmds return data/results
Fixed alerts api calls
Improved/cleaned up API version & url mangling
Consistify usage of internal api functions
Optimized backup downloading
Add firmware & tag api calls

Wow!  Lots of great changes!  Will start looking them over soon.

Looks good.  Did you implement your changes on a utilized platform?

Well actually I'm building a new unifi toolie w/it; I'm still considering whether that will be be another example here or a separate tool w/a shoutout to this api, but when it's online you'll know ;)
Currently the changes receive minimal testing on 2 separate unifi deployments, one pretty much uptodate stable and one bleeding-edge-latest-beta


Error with GitHub Pages page

jQuery is not being loaded on https://joequery.github.io/Stupid-Table-Plugin/, which is preventing any of the demos from working.

It appears to be due to jQuery trying to load over HTTP when the page is HTTPS. Visiting http://joequery.github.io/Stupid-Table-Plugin/ works.

Visiting http://joequery.github.io/Stupid-Table-Plugin/ automatically redirects to the https:// version, at least for me.

Strange, that doesn't happen for me.
Anyway I've just updated it to use protocol-relative links so it should all be working fine :)

Thanks for the issue @PhantomWatson and thanks for cleaning it up @svivian :)

And thanks to you and the other contributors for your work on this project.


HTTP server implementation is vulnerable to DNS rebinding attacks

OpenRefine has endpoints with intentional remote code execution without authentication (like running Python or Clojure transformations). While the lack of authentication would not be an issue with normal desktop use when OpenRefine is bound to a loopback interface like <IP_ADDRESS>, the current implementation still exposes users to Remote Code Execution via DNS rebinding attacks.
To Reproduce
I did not prepare a full Proof of Concept exploit, but the general steps would be:

Run OpenRefine
Visit rebindable.com, which loads a malicious script in the browser
Attacker rebinds rebindable.com to <IP_ADDRESS>
Malicious script calls OpenRefine endpoints as if they were under rebindable.com

Current Results
The calls will succeed and an attacker can use them to run arbitrary code on the user's computer. This works because after the domain has been rebound, the script can now call OpenRefine endpoints as if they were same-origin.
Expected Behavior
The calls should be rejected.
Additional context
I have sent a pull request (#3212) to address this problem by validating the Host header. See implementation details in the thread associated with the PR. This issue was opened at the request of @tfmorris.

Thanks for creating the issue so that we can track this.


Update - App data not getting deleted!

Hello,
I am building an ionic hybrid app for Android and iOS, but facing a problem while updating the older version app with the new version.
When we try to update, the iOS update progress indicator is showing as app installing and after I open the updated app, I still see the older version with old data and old views, not getting updated with the new changes.  :frowning: Same happens with Android too.
But, once I clear data from settings > storage, I am able to see the new changes. I am using file-rev tasks in gulp and files getting revised, still the issue is there.
Help is appreciated :slightly_smiling_face:

Hello! Thanks for opening an issue with us! As this seems like more of a support question i will urge that you ask this question on our forum. Thanks for using Ionic!

Yup. Thanks! I did that too :)


fix(solid-query): fix disappearing data key during fetching state

#4288 uncovered a bug in createBaseQuery.tsx, this PR aims to solve this.
The issue
createBaseQuery uses a SolidJS store to persist the queryObserver result and exposes it when createQuery is called. Scenarios when a query is reset or when a new query key is mounted on the same observer, The queryObserver result initially updates into this state -> { data: undefined, isLoading: true; }.  Updating the store with setStore when data is undefined removes the data property from the store. ref: Updating Stores in SolidJS
This is why this fix uses an empty Symbol in place of undefined data to prevent SolidJS from deleting the data key and keeps the state consistent between updates.

@allcontributors please add @ardeora for code, maintenance


Helm incorrectly shows upgrade failed status

When using helm install/upgrade in some percentage of the time I get this failure:
Failed to install app MyApp. Error: UPGRADE FAILED: timed out waiting for the condition
This is because the app sometimes needs a bit more time to be up and running.
When I get this message helm doesn't stop the install/upgrade, but still works on it, which will be succeed by the end. And my whole cluster will be fully functional.
However helm still shows this failed status for the release.
On one hand it is pretty annoying, on the other hand it can mess up a correctly installed release.
How to remove this false error and get into a 'deployed' state(without a new install/upgrade)?
(kubernetes 1.17,  helm2, helm3 both have this behaviour)

Hi, @hatharom - does using --wait help? See https://helm.sh/docs/intro/using_helm/#helpful-options-for-installupgraderollback for more details.

Hi, @hatharom - does using --wait help? See https://helm.sh/docs/intro/using_helm/#helpful-options-for-installupgraderollback for more details.

It doesn't, same issue.
Even if I set the timeout to a big amount like 2hour , the app still gets deployed in ~15min. Every kubernetes resource is running but the erro message is there.
kubectl get events shows only normal events.
The worst of it when I try an upgrade(without any changes to the catalog) after the installation,  the expected behaviour would be to do nothing. Because nothing has been changed. However helm starts to delete every kubernetes resource and reinstall it from the scratch.

@hatharom Can you share some detail about the Kubernetes resources (group/version/kind included) that take a long time to come up and are affecting this.

ping.

Closing as inactive after asking for more details. Please re-open when more details are available. Thanks.


[CELEBORN-128] Bump Log4j2 to 2.17.2

What changes were proposed in this pull request?
Bump Log4j2 from 2.17.1 to 2.17.2
Why are the changes needed?
2.17.1 is a rushed version, and we'd better to use the latest patched version of 2.17
https://logging.apache.org/log4j/2.x/changes-report.html#a2.17.2
What are the items that need reviewer attention?
Related issues.
Related pull requests.
How was this patch tested?
/cc @related-reviewer
/assign @main-reviewer

This PR is supposed to be cherry-picked to branch-0.2

Will do


Work with Microsoft.Xrm.Sdk.Data.Expressions

Hello guys, could you provide few examples , how we can use class FilterExpressionTransform for transforming FilterExpression or for other classes?
Thanks for attention!

@AndrewTheWild I have never used that API. What are you trying to do?

@phecke  According to this article ,this library helps with transformation QuerryExpression. I am working with Virual Entity.
https://github.com/MicrosoftDocs/powerapps-docs/blob/main/powerapps-docs/developer/data-platform/virtual-entities/custom-ve-data-providers.md

@AndrewTheWild - I have never used this library before, but I found a blog post that explains how to use this https://gaborg.dev/dataverse-virtual-entities-queryexpressions-to-linq-expressions/

@AndrewTheWild I can pass your request for documentation/code on to the PM.

@AndrewTheWild I sent an email to the PM including your request for sample code and the online article. If I do get any info on the API, I can work on getting it published.


Switch SQL query composer to masterminds/squirrel

Replace inline SQL strings with Masterminds/squirrel for fluent SQL composition.

This library doesn't cover the requirements we have in our SQL query construction.


move run above and below

to position 1 instead of 0, this allows run by line to be the first menu item

This PR fixes https://github.com/microsoft/vscode-jupyter/issues/6910

Hi @roblourens . Is merging of failed PR's expected in VScode? I'm totally new!

I checked that the errors were not related to these changes


sidekick offline?

It was working earlier and it is currently offline for me.

I was just coming here to report the same.

Lately we see a pattern of a) Discord services being temporarily disrupted at night; b) our failover kicking in; c) Discord resetting our bot token due to attempts of the failover shards to connect.
BTW, Discord says "It appears your bot, Sidekick, has connected to Discord more than 1000 times within a short time period. Since this kind of behavior is usually a result of a bug we have gone ahead and reset your bot's token" and there's no way to verify that message, because the "short time period" is unspecified, but our log shows only about 10 re-connection attempts, not 1000, so the message is most likely simply false.
    dice:3094 ˢ38] 00:03:32] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ10] 00:03:34] run_disco_shard] Shard 10 is starting failover.
    dice:3621 ˢ50] 00:03:39] run_disco_shard] Shard 50 is starting failover.
    dice:3094 ˢ40] 00:03:41] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ6] 00:03:44] run_disco_shard] Shard 6 is starting failover.
    dice:3621 ˢ52] 00:03:49] run_disco_shard] Shard 52 is starting failover.
    dice:3094 ˢ55] 00:03:50] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ33] 00:03:54] run_disco_shard] Shard 33 is starting failover.
    dice:3094 ˢ17] 00:03:59] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ43] 00:04:00] run_disco_shard] Shard 43 is starting failover.
    dice:3621 ˢ41] 00:04:00] run_disco_shard] Shard 41 is starting failover.
    dice:3621 ˢ58] 00:04:05] run_disco_shard] Shard 58 is starting failover.
    dice:3094 ˢ23] 00:04:08] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ2] 00:04:10] run_disco_shard] Shard 2 is starting failover.
    dice:3621 ˢ5] 00:04:15] run_disco_shard] Shard 5 is starting failover.
    dice:3094 ˢ16] 00:04:17] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ13] 00:04:20] run_disco_shard] Shard 13 is starting failover.
    dice:3621 ˢ60] 00:04:25] run_disco_shard] Shard 60 is starting failover.
    dice:3094 ˢ40] 00:04:26] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ34] 00:04:30] run_disco_shard] Shard 34 is starting failover.
    dice:3094 ˢ11] 00:04:35] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ61] 00:04:35] run_disco_shard] Shard 61 is starting failover.
    dice:3621 ˢ49] 00:04:41] run_disco_shard] Shard 49 is starting failover.
    dice:3094 ˢ17] 00:04:44] Got an ack from <IP_ADDRESS>:9999
    dice:3621 ˢ59] 00:04:46] run_disco_shard] Shard 59 is starting failover.
    dice:3621 ˢ3] 00:04:51] run_disco_shard] Shard 3 is starting failover.
    dice:3621 ˢ7] 00:04:51] run_disco_shard] Shard 7 is starting failover.
    dice:3621 ˢ63] 00:04:51] run_disco_shard] Shard 63 is starting failover.
    dice:3621 ˢ25] 00:04:51] run_disco_shard] Shard 25 is starting failover.
    dice:3621 ˢ14] 00:04:51] run_disco_shard] Shard 14 is starting failover.
    dice:3094 ˢ23] 00:04:53] Got an ack from <IP_ADDRESS>:9999
    thread 'main' panicked at '!connect: Connection closed', src/dice.rs:3165:20

Refactoring of high availability failover is tracked at #232.


PurchaseManager == null after switching from openIAB to the new googleplay jar (0.9.2)

My code has been in production for many months using libgdx 1.6.1 and gdx-pay 0.4.0, I updated to gdx 1.9.1 and gdx-pay 0.9.2 without touching the purchases code(which is almost identical to the samples provided here). I add the jars manually as specified in the readme(not using gradle). I run my tests on device, exporting via eclipse a signed apk.
Everything works fine if I put gdx-pay-android-openiab-0.9.2-library.jar file in my android/libs folder, but when I try to switch to the gdx-pay-android-googleplay-0.9.2.jar, reflection stops working, and I get a null purchasemanager. No errors, nothing, just a null PurchaseManager
Is there anything additional I should modify to correctly initialize the new googleplay purchase manager?

In the end I figured it out... it is no issue with gdx-pay, it was my oversight related to ProGuard.
Previously I was doing:
-keep public class com.badlogic.gdx.pay.android.openiab.PurchaseManagerAndroidOpenIAB {
  public protected *;
}

And the problem went away when I changed it to
-keep public class com.badlogic.gdx.pay.android.googleplay.AndroidGooglePlayPurchaseManager {
  public protected *;
}

Sorry!


"Switch for all climate damage" replaced by sector-specific switches.…

… Also added a data table for key variable diagnostics

.