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

[winseyli]

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

Versions (please complete the following information):

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

[naftalibeder]

I'm having the same issue on Android, React Native 0.61.2, Mapbox 7.0.6. (It works fine on iOS.)

Note that the Image view is invisible as well, not just the source input. For example,

<Image style={{ width: 40, height: 40, backgroundColor: 'blue' }} />

is totally invisible, while

<View style={{ width: 40, height: 40, backgroundColor: 'blue' }} />

displays correctly.

[naftalibeder]

@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?

[winseyli]

My Android is a real device not simulator so I think it is not the case

[naftalibeder]

Ok, good point! Then yes, this is a bug, and I believe it's the same issue I'm experiencing.

[ethaqnix]

It's a known issue (issue 274), however, if you just want to display a png, you can use SymbolLayer :

<MapboxGL.SymbolLayer
          id="youId"
          style={{
            iconImage: yourImage,
            iconSize: 0.1,
            iconRotationAlignment: 'map',
            iconAllowOverlap: true,
          }}
        />

I can be wrong, but i remember that this way will be (or is) deprecated. New styles are something like that

<MapboxGL.Images images={{ example: marker, assets: ['pin'] }} />,
<MapboxGL.ShapeSource
    id="yourId"
    shape={yourFeatureCollection}
>
<MapboxGL.SymbolLayer
    id="exampleIconName"
    style={styles.icon}
 />
</MapboxGL.ShapeSource>

with this styles :

{
    iconImage: ['get', 'icon'],
    iconSize: [
      'match',
      ['get', 'icon'],
      'example',
      0.1,
      /* default */ 1,
    ],
  }

I don't think that it work with callout, maybe you can do something similar with onPress props on ShapeSource at least temporary.

[winseyli]

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

[subodhsri1]

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

[tholhubner]

I am experiencing a similar issue with Point Annotations, in that my annotations are appearing, but they are showing up behind my map and a shape source layer. Unsure what is happening.

[RichardLindhout]

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]

It's a strange bug since Vector or something else just work fine!

[RichardLindhout]

https://github.com/react-native-community/react-native-maps/issues/2083

[RichardLindhout]

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

[RobertSasak]

@RichardLindhout Do I understand it correctly that you just replaced <Image/> with <Svg/> inside of PointAnnotation? Can you please post a short example?

[RobertSasak]

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>

[momirkostic]

@RobertSasak Which version of mapbox do you have installed?

[RobertSasak]

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

[lrpinto]

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.

[mfazekas]

It seems to be caused by https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L124

https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/BitmapUtils.java#L96-L109

A workaround is using MarkerView. as that should render views as is

[lrpinto]

It seems to be caused by

https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L124

https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/BitmapUtils.java#L96-L109

A workaround is using MarkerView. as that should render views as is

Hi Thank you for looking into this. My point annotations are still rendering under the symbol layers. I was even thinking whether it would be possible to wrap the native component in a ViewGroup and bringToFront them... but I am certainly more keen with trying the MarkerView then adventuring on the native code :) keen to give it a go thanks again for awesome project

[nzrin]

Faced this issue too on android. My code:

<MapboxGL.PointAnnotation
          coordinate={this.state.location}
          title='Current'>

 <View style={{height:80,width:40, backgroundColor:'transparent',alignItems:'center'}}>
     <View style={{width:40, height:40, backgroundColor:'#000000', borderRadius:40/2}}>
          <Image
               style={{width:25,height:25}}
               source={require('@assets/image.png')}
           />
     </View>
     <View style={{width:2, height:20, backgroundColor:'#000000'}}/>
 </View>

</MapboxGL.PointAnnotation>

[shashank1501]

I am experiencing a similar issue with Point Annotations on Android, react Native 0.62.2,mapbox-gl 8.1.0-beta.1

<MapboxGL.MapView style={{flex: 1}}>

          <MapboxGL.Camera centerCoordinate={[77.56, 28.67]} zoomLevel={10} />

          <MapboxGL.PointAnnotation
            id="marker "

            coordinate={[77.56, 28.67]}
            title="hello"

            ref={(ref) => (this.annotationRef = ref)}>

            <View
              style={{
                width: ANNOTATION_SIZE,
                height: ANNOTATION_SIZE,
                alignItems: 'center',
                justifyContent: 'center',

                backgroundColor: 'white',
                borderRadius: ANNOTATION_SIZE / 2,
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: 'rgba(0, 0, 0, 0.45)',
                overflow: 'hidden',
              }}>
              <Image
                source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
                style={{width: ANNOTATION_SIZE, height: ANNOTATION_SIZE}}
                onLoad={() => this.annotationRef.refresh()}
              />
            </View>
            <MapboxGL.Callout title="This is a sample" />
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>

[RichardMathews]

<MapboxGL.PointAnnotation id={'your-id'} coordinate={[]}>
 <MapboxGL.Callout title='your-title'/> 
   <View style={yourStyle}>
      <Text  style={yourStyle}>
          {<Image source={{uri: 'https://api.adorable.io/avatars/400/abott@adorable.io.png'}} style={{width, height}}/>}
       </Text>
   </View>
</MapboxGL.PointAnnotation>

[filipef101]

Still happening indeed

[nathanael-anstett]

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

[ilyabreev]

8.4.0 and still getting this issue. BTW <Text> workaround worked for me.

[Preeternal]

if you just need onSelected method follow the scenario:

1. Instead PointAnnotation use MarkerView on android.
2. Use ImageBackGround instead Image inside the MarkerView.
3. Pass the button inside ImageBackground. export const MarkerButton = styled.TouchableOpacity' position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 999; ';

EDITED: don't work in release mode (

[vincent-odukwe]

Still happening This time its also happeing on iOS as well