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

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;