React-native-mapbox-gl: Android annotationImage doesn't work

[KevinHu2014]

It seem that annotationImage doesn't work on Android.
By changing the image uri, it still display the same default red marker.

[dapetcu21]

annotationImage does indeed not work yet on Android if you use remote images. Have you tried with local images?

[KevinHu2014]

@dapetcu21
Thanks for the fast reply.
I'm not sure what's the correct format ?
annotationImage: { source: { require('./Img/item.png') }, height: 25, width: 25 },

[KevinHu2014]

After taking a brief look at RNMGLAnnotationOptionsFactory.java .
I'm still confuse with the format of using local images

[dapetcu21]

It's

annotationImage: {
  source: { uri: 'item' }
  height: 25,
  width: 25
}

Then, as the docs state, you put your image in android/app/src/main/res/drawable/item.png

[dapetcu21]

I have confirmed annotationImage to be working on both Android and iOS with local images. I'm actually using it in a production app. You must be doing something wrong. Check that you're using source: { uri: 'item' }, check that the image is in drawable at that exact location, check that the uri does not contain the .png extension.

[KevinHu2014]

@dapetcu21
Thanks for the guide.
It's working now.
By the way , thanks for you contribution on react-native-mapbox-gl.
It really helps a lot.

[dapetcu21]

I'll close this and open a new issue about remote images on android

[brookehurford]

If the marker is in the drawable location, will it also work for iOS? I have it now working for Android with a local image - but now the iOS marker isn't showing up. I am assuming because the file is in an android folder.

Where should the local image be placed for iOS, so that I can use the syntax, and have it work for both devices?

annotationImage: {
  source: { uri: 'marker' },
  height: 25,
  width: 25
}