Airbnb React Native Maps custom marker with centered text on top

Question

When I say React Native Maps I refer to this module: https://github.com/airbnb/react-native-maps

How can I center the text on top of this marker such that it works for any screen size on both ios and android? In the screenshot above the text appears to the top left of the marker. It's a 1.

Code included below. Thanks for any guidance!

 <MapView.Marker
  style ={{zIndex: this.state.selectedMarker === marker ? 1 : 0}}
  key={marker.id}
  image={require('../../assets/marker-with-label/marker-with-label.png')}
  coordinate={marker.coordinate}
  >
  <Text>1</Text>
</MapView.Marker>

Answer 1

I have done that before. It's basically that what I do when I want to customize a marker:

<MapView.Marker  coordinate={marker.latlang}>
  <View style={styles.circle}>
     <Text style={styles.pinText}>{marker.num}</Text>
   </View></MapView.Marker>

Styles

circle: {
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: 'red',
},
pinText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
    fontSize: 20,
    marginBottom: 10,
},

Example

Answer 2

To change the size of the circle whilst zooming in or out, you could adjust it in the onRegionChange and onRegionChangeComplete methods of the MapView, something like this:

onRegionChange={({longitudeDelta, latitudeDelta})=>{        
     let markerSize = Math.round(((longitudeDelta + latitudeDelta) / 2) * 2500); 
     this.setState({markerSize});
}}      

and then use the markersize as the height and width of the marker.

Note: modify the * 2500 to whatever size you need

Answer 3

This code should help. Worked for me

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;