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:

System:
    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
  Binaries:
    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
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @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
  npmGlobalPackages:
    *react-native*: Not Found

Library version: react-native-maps@0.27.1

Steps to reproduce

<Marker.Animated
              ref={(marker) => {
                this.marker = marker;
              }}
              image={Icons.LocationCircle}
              coordinate={this.state.coordinate}
              style={{ width: 72, height: 72 }}
              opacity={0.9}

            />`

`<Polyline
             coordinates={this.state.gpsData}
             strokeColor="rgba(18, 72, 87, 0.9)"
             strokeWidth={7}
              />

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 }}