Airbnb React Native Maps custom marker with center

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