React-native-mapbox-gl: Local Images for Annotations

[digitaldavenyc]

I have been trying to use local images for annotations without any success. I've tried to follow the docs but every combination of calling a local image doesn't work.

annotationImage: {
    source: {{require('image!marker')},
    width: 15,
    height: 19
}

annotationImage: {
    source: {uri: require('../images/marker..png')},
    width: 15,
    height: 19
}

Using remote images causes a bit of a flicker and creates an unnecessary network dependency since the marker image is the same for our app

[dapetcu21]

require() on images doesn't work for now. use it as source: { uri: 'marker' }, then add marker.png as a resource in Xcode or place it in the drawable directory for Android, as explained here

[digitaldavenyc]

Thank you, that works.

For anyone who might find this on google, this is the exact syntax for using local markers.

annotationImage: {
    source: {uri: 'marker'},
    width: 15,
    height: 19
}

I think the documentation on this could be clearer.

[wilsonpage]

Found this work-around:

const resolveAssetSource = require('resolveAssetSource');

annotationImage: {
    source: resolveAssetSource(require('../images/marker.png')),
    width: 15,
    height: 19
}

[nolan-m]

resolveAssetSource is working for iOS, but not Android.