Android vs iOS Marker Placement

Bug report

Edit : After more thought it seems that this is an issue with the difference in marker placement between the two OS, iOS seems to place centre of marker at the coordinate provided, and android places at bottom and centre. I do not see a way to align this behaviour at this point.
On iOS, the marker renders as expected – Over the top of a polyline, with the line visible underneath through the transparent parts of the png given to the Marker component. In Android the polyline is not at all visible underneath the Marker PNG as is shown in the following images
In Android :
Screenshot 2020-09-22 at 4 30 55 PM
In iOS
Screenshot 2020-09-22 at 4 39 45 PM

The expectation is for the android build to behave as the iOS build is doing

Environment info

react-native info output:

    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 46.72 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
    Node: 12.16.2 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
    CocoaPods: 1.9.3 - /usr/local/bin/pod
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
    Java: 14.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
    react-native-macos: Not Found
    *react-native*: Not Found

Library version: react-native-maps@0.27.1

Steps to reproduce

              ref={(marker) => {
                this.marker = marker;
              style={{ width: 72, height: 72 }}


             strokeColor="rgba(18, 72, 87, 0.9)"

I listed this as a bug, i could understand if it’s considered more of a feature request. I figured a bug as the two environments do not behave the same so this leads to unexpected behaviour. I imagine the easiest way to reproduce this is to draw a PNG with transparency over any Polyline on the same coordinates.

1 possible answer(s) on “Android vs iOS Marker Placement

  1. You can use the centerOffset prop on iOS and anchor prop on Android as seen here.
    For Android, if you wanna have the marker centered on a position, pass the prop anchor={{ x: 0.5, y: 0.5 }}