Overlay Text in the center of the SVG icon (React-Native)

Question

I am trying to implement something like this using react-native-maps where i need badges to be displayed on the Marker. Is there anyway i can do it?

I found out that I can use Callout which showers the tooltip outside the marker. But in my case i need the badge on the marker.

Can some one please help me with the solution?

Current Output :

Expected Output:

CustomMarker.js

import React from "react";
import { Badge } from "react-native-elements";
import { Marker, Callout } from "react-native-maps";

const CustomMarker = ({ coordinate }) => {
  return (
    <Marker coordinate={coordinate}>
      <Callout>
        <Badge value="2" status="error" />
      </Callout>
    </Marker>
  );
};

export default CustomMarker;

Answer 1

Finally I made it work with below code

import React from "react";
import { Marker } from "react-native-maps";
import { View, Text } from "react-native";
import Pin from "../assets/Map/Pin.svg";

const CustomMarker = ({ coordinate, pinColor, value }) => {
  return (
    <Marker coordinate={coordinate} pinColor={pinColor}>
      <View
        style={{
          alignItems: "center",
        }}
      >
        <Pin width={45} height={40}></Pin>
       
        <Text
          style={{
            position: "absolute",
            color: "white",
            fontWeight: "bold",
            textAlign: "center",
            fontSize: 20,
            marginBottom: 10,
          }}
        >
          {value}
        </Text>
      </View>
    </Marker>
  );
};

export default CustomMarker;