ShapeSource and SymbolLayer as PointAnnotation.

Problem: As the docs say PointAnnotation is deprecated and shouldn’t be used so I’m trying to switch to ShapeLayer and SymbolLayer. What I’m trying to do is something like this: And the number should change dynamically, according to props. Any tips? I managed to make the chat icon appear but I have no idea how to add the number. What I have so far:

const feature = {
type: 'Feature',
id: marker.id,
      geometry: {
        type: 'Point',
        coordinates: [marker.lat, marker.lng],
      },
};
return (
<MapboxGL.MapView style={sheet.matchParent}>
     <MapboxGL.Camera
          zoomLevel={17}
          centerCoordinate={[loc.lat, loc.lng]}
        />
     <MapboxGL.ShapeSource
         id="exampleShapeSource"
         shape={feature}
       >
        <MapboxGL.SymbolLayer id={markerOne + 1} style={{ iconImage: image, iconSize: 1 }} />
    </MapboxGL.ShapeSource>
</MapboxGL.MapView>);

Thanks in advance.

[horva]

Here is full example we can include to repository.

import React, { Component } from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";
import sheet from '../examples/styles/sheet';
import exampleIcon from '../examples/assets/example.png';

const point = {
  id: "1",
  lat: 40.723279,
  lng: -73.970895
}

const featureCollection = {
  "type": "FeatureCollection",
  "features": [
    {
      type: "Feature",
      id: point.id,
      properties: {
        id: point.id
      },
      geometry: {
        type: "Point",
        coordinates: [point.lng, point.lat],
      },
    }
  ]
}

export default class App extends Component {

  state = {
    count: 0
  }

  onPress = async () => {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <MapboxGL.MapView
        style={sheet.matchParent}
      >
        <MapboxGL.Camera
          zoomLevel={10}
          centerCoordinate={[point.lng, point.lat]}
        />
        <MapboxGL.ShapeSource
          id="symbolLocationSource"
          hitbox={{ width: 30, height: 30 }}
          onPress={this.onPress}
          shape={featureCollection}
        >
          <MapboxGL.CircleLayer
            id="pointCircles"
            style={{
              circleStrokeColor: "#0000FF",
              circleStrokeWidth: 2,
              circleRadius: 30,
              circleColor: "#FFFFFF"
            }}
          />
          <MapboxGL.SymbolLayer
            id="teaCup"
            aboveLayerID="pointCircles"
            style={{
              iconImage: exampleIcon,
              iconSize: 1
            }}
          />
          <MapboxGL.CircleLayer
            id="notificationCircle"
            style={{
              circleColor: "#F00",
              circleRadius: 14,
              circleTranslate: [22, -22]
            }}
          />
          <MapboxGL.SymbolLayer
            id="notificationCount"
            style={{
              iconOptional: true,
              textIgnorePlacement: true,
              textField: this.state.count.toString(),
              textSize: 15,
              textMaxWidth: 50,
              textColor: '#FFF',
              textAnchor: 'center',
              textTranslate: [22, -22],
              textAllowOverlap: true
            }}
          />
        </MapboxGL.ShapeSource>
      </MapboxGL.MapView>
    );
  }
}

Usage looks like this - count is updated on icon press

[dancherb]

@arnaudambro @tomasamado97

Are there any docs or examples for adding custom component children (Views) to SymbolLayers? This is a revelation for me but I can’t get it working (maybe because of the same Android issue…)