Inconsistent Polygon Rendering (iOS/Android)

[MichielDeMey]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.53.0
react: 16.2.0
react-native-maps: 0.20.0

Steps to Reproduce

1. Use a simple <MapView> component with a <Polygon> covering half the world.

<MapView>
          <Polygon
            coordinates={
              [{
                longitude: 180,
                latitude: 90
              }, {
                longitude: 0,
                latitude: 90
              }, {
                longitude: 0,
                latitude: -90
              }, {
                longitude: 180,
                latitude: -90
              }, {
                longitude: 180,
                latitude: 90
              }]
            }
            strokeColor={'#ff0000'}
            fillColor={'rgba(0,0,0,0.5)'}
            strokeWidth={2}
          />
        </MapView>

Expected Behavior

Polygon covers the right half the world on both iOS and Android.
The Polygon on Android is 'filled', same like on iOS.

Actual Behavior

Polygon only covers the right half the world on iOS, partially covers the left side of the world on Android.

Reproducible Demo

https://snack.expo.io/rJEdDBgvG

Additional information

Initially, I wanted to create a polygon covering the entire world and then have holes in it to create a mask effect. However, the <Polygon> component does not seem to render the polygon covering the entire world, instead it's hidden.

Polygon covering the world:

<Polygon
            coordinates={
              [{
                longitude: 180,
                latitude: 90
              }, {
                longitude: -180,
                latitude: 90
              }, {
                longitude: -180,
                latitude: -90
              }, {
                longitude: 180,
                latitude: -90
              }, {
                longitude: 180,
                latitude: 90
              }]
            }
            strokeColor={'#ff0000'}
            fillColor={'rgba(0,0,0,0.5)'}
            strokeWidth={2}
/>

[socar-chef]

I made approximate and middle coordinates for mask.
And it works on me.
In my case, It's all of the earth.

<Polygon
coordinates = {
[
    { latitude: -89, longitude: -179.99999999 },
    { latitude: 0, longitude: -179.99999999 },
    { latitude: 89, longitude: -179.99999999 },
    { latitude: 89, longitude: 0 },
    { latitude: 89, longitude: 179.99999999 },
    { latitude: 0, longitude: 179.99999999 },
    { latitude: -89, longitude: 179.99999999 },
    { latitude: -89, longitude: 0 },
    { latitude: -89, longitude: -179.99999999 },
  ]
}

[MichielDeMey]

@socar-chef Thanks, that seems to be a valid workaround for now!