React Native Maps, Keep Custom Marker in Center

Question

So I have a MapView with a Custom Marker

               <MapView
                    ref={mapRef}
                    provider={PROVIDER_GOOGLE}
                    style={{
                        width: '100%',
                        height: '100%',
                        borderRadius: 10,
                    }}
                    initialRegion={{
                        latitude: location?.coords.latitude || 1.290270,
                        longitude: location?.coords.longitude || 103.851959,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}
                    zoomEnabled={true}
                    minZoomLevel={16}
                    maxZoomLevel={18}
                    mapType={'standard'}
                    showsBuildings={false}
                    showsTraffic={false}
                    showsIndoors={false}
                    showsPointsOfInterest={false}
                    showsIndoorLevelPicker={false}
                    customMapStyle={Theme.maps.lightMode}
                >
                    <>
                        {isEnabled && (
                            <Marker
                                key={'currentUserLocation'}
                                coordinate={{
                                    latitude: location?.coords.latitude || 1.290270,
                                    longitude: location?.coords.longitude || 103.851959,
                                }}
                                style={{zIndex: 9999}}
                            >
                                <MyProfileMarker/>
                            </Marker>
                        )}
                    </>
                </MapView>

And a Profile Marker which has a custom Design:

export default function MyProfileMarker() {
    return (
        <View style={styles.container}>
            <Icon name="map-marker-outline" size={wp('9%')} color={theme.colors.danger['600']}/>
        </View>
    );
}

But the Marker is not properly placed in the location coordinates:

const styles = StyleSheet.create({
    container: {
        width: wp('80%'),
        height: wp('80%'),
        // Full circle
        borderRadius: wp('40%'),
        alignItems: 'center',
        justifyContent: 'center',
        padding: 2,
        backgroundColor: 'rgba(183,56,68,0.1)', // 'rgba(255,255,255,0.2)
    },
});

It looks like this

For Reference, this is the location where the marker should be, with the red circle coming from the pin

Answer 1

Try to add this anchor it worked for me

<Marker anchor={{ x: 0.5, y: 0.5 }}
                                    coordinate={{ }}