maps: [Android] Image in PointAnnotation can't be shown on Android

To Reproduce Should be starting from 7.0.5 Release

            <View style={{height: 30, width: 21, backgroundColor: '#000'}}>
              <Image source={require('../../images/map/school.png')} />
            </View>
            <MapboxGL.Callout title='xxx' />
          </MapboxGL.PointAnnotation>

Screenshots Screen Shot 2019-10-14 at 10 42 44 AM

Versions (please complete the following information):

Platfrom: Android
Device: Asus Zenfone 5
OS: Android 6
SDK Version 28
React Native Version 0.59

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 27 (8 by maintainers)

Most upvoted comments

Workaround is to wrap <Image/> with <Text/>. Or as @RichardLindhout wrote to use SVG instead. Source: https://github.com/react-native-community/react-native-maps/issues/431#issuecomment-524321467

const HackMarker = ({ children }) =>
    Platform.select({
        ios: children,
        android: (
            <Text
                style={{
                    lineHeight: 88, // there is some weird gap, add 40+ pixels
                    backgroundColor: '#dcdcde',
                }}>
                {children}
            </Text>
        ),
    })

Use like this

<MapboxGL.PointAnnotation
    coordinate={[0,0]}
    id="marker">
    <HackMarker>
        <Image source={marker} />
    </HackMarker>
</MapboxGL.PointAnnotation>

+24

RobertSasak on Dec 19, 2019

Guys did you find the solution on it? if YES please guide.

subodhsri1 on Oct 30, 2019

Still getting this issue with 8.1.0 of @react-native-mapbox-gl/maps

nathanael-anstett on Jan 26, 2021

Workaround is to wrap <Image/> with <Text/>. Or as @RichardLindhout wrote to use SVG instead. Source: react-native-community/react-native-maps#431 (comment)

const HackMarker = ({ children }) =>
    Platform.select({
        ios: children,
        android: (
            <Text
                style={{
                    lineHeight: 88, // there is some weird gap, add 40+ pixels
                    backgroundColor: '#dcdcde',
                }}>
                {children}
            </Text>
        ),
    })

Use like this

<MapboxGL.PointAnnotation
    coordinate={[0,0]}
    id="marker">
    <HackMarker>
        <Image source={marker} />
    </HackMarker>
</MapboxGL.PointAnnotation>

Ty. Having this issue too. Will try this solution.

lrpinto on Jan 30, 2020

Still happening indeed

filipef101 on Jul 28, 2020

I use this fork https://github.com/RichardLindhout/maps

RobertSasak on Dec 24, 2019

For me this does not work on Android while it does work on iOS

<Mapbox.PointAnnotation
      coordinate={toCoordinates({ longitude, latitude })}
      anchor={{ y: 1, x: 0.5 }}
      id={id}
      pointerEvents="none"
    >
      <Image
        id={id}
        source={source}
        style={{ width, height }}
        pointerEvents="none"
      />
    </Mapbox.PointAnnotation>

RichardLindhout on Nov 14, 2019

Can SymbolLayer work with callout after PointAnnotation deprecated? Callout is needed!!

winseyli on Oct 22, 2019

Ok, I think I will use react-native-svg instead of an image for now. That does work!

RichardLindhout on Nov 15, 2019

@winseyli I realized this might be a different issue - for me icons aren’t black boxes, they’re completely invisible.

On your Android emulator, go to the three-dots menu, and navigate to Settings > Advanced > OpenGL ES Renderer. Choose SwiftShader and restart the emulator. Does that work?

naftalibeder on Oct 14, 2019