How to apply a translate property to a PointAnnotation on Android

[todor-a]

In order to apply a translate to a PointAnnotation, a background property must be set.

So this will not work:

import React from 'react';
import MapboxGL from "@react-native-mapbox-gl/maps";

const Annotation = () => {
  return (
    <MapboxGL.PointAnnotation
      id={v.id}
      key={v.id}
      style={{ flex: 1 }}
      selected={isSelected}
      coordinate={coordinate}
      onSelected={feature => this.onAnnotationSelected(v)}
      >
        <View style={[style.annotationContainer]} />
      </MapboxGL.PointAnnotation>
   );
}

const styles = StyleSheets.create({
  annotationContainer: {
    width: 20,
    height: 20,
    alignItems: "center",
    justifyContent: "center",
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 50,
    position: "relative",
    transform: [{ rotate: "45deg" }]
  }
});

But this will:

import React from 'react';
import MapboxGL from "@react-native-mapbox-gl/maps";

const Annotation = () => {
  return (
    <MapboxGL.PointAnnotation
      id={v.id}
      key={v.id}
      style={{ flex: 1 }}
      selected={isSelected}
      coordinate={coordinate}
      onSelected={feature => this.onAnnotationSelected(v)}
      >
+       <View style={{backgroundColor:'red'}}>
            <View style={[style.annotationContainer]} />
+       </View>
      </MapboxGL.PointAnnotation>
   );
}

const styles = StyleSheets.create({
  annotationContainer: {
    width: 20,
    height: 20,
    alignItems: "center",
    justifyContent: "center",
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 50,
    position: "relative",
    transform: [{ rotate: "45deg" }]
  }
});

This seems to be caused by the fact that on Android, the view is rendered to a bitmap.

Credit goes to @mfazekas.

[ferdicus]

thanks @tdranv 🙇🏿