Polygons partly not rendered on higher zoomLevels

NOTE: Just before submitting this issue I found out why it was happening and how to easily fix it. I decided to open the issue anyway because the mistake seems easy to make and someone else might be experiencing the same problem and this makes the fix more googlable. If you’re looking for the fix, just skip to my first comment.

Describe the bug Polygon features in a ShapeSource with FillLayer and/or LineLayer, ofter get cut off on higher zoomLevels. It often happens after level 14, but I’ve seen it happen after 12 too.

Example of Polygon at zoomLevel 13.99:

Example of Polygon at zoomLevel 14:

To Reproduce Just replace your App’s main render method with the following:

<MapboxGL.MapView style={{flex: 1}}>
      <MapboxGL.Camera
        centerCoordinate={[-7.946227, 39.589127]}
        zoomLevel={14}
      />

      <MapboxGL.ShapeSource
        id="source"
        shape={{
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-7.941227, 39.584127],
                [-7.951227, 39.584127],
                [-7.951227, 39.594127],
              ],
            ],
          },
        }}>
        <MapboxGL.FillLayer id="fill" style={{fillColor: 'blue'}} />
        <MapboxGL.LineLayer
          id="line"
          style={{lineColor: 'red', lineWidth: 2}}
        />
      </MapboxGL.ShapeSource>
    </MapboxGL.MapView>

Expected behavior Polygons show correctly on all zoomLevels.

Versions (please complete the following information):

• Platfrom: Android (haven’t tested iOS, no idea if it has same problem)
• Device: Moto G7 Power
• OS: Android version 9
• react-native-mapbox-gl/maps Version: 7.0.9
• SDK Version: ???
• React Native Version: 0.61.5

Additional context What gets cut from the polygon varies depending on where it is. For example, just replacing the polygon’s coordinates with these below

[-7.941227 + 0.1, 39.584127],
[-7.951227 + 0.1, 39.584127],
[-7.951227 + 0.1, 39.594127],

results in the triangle being cut in two places (see below).

[fvieira]

So, the mistake here is that a proper Polygon must have the first coordinate repeated at the end. If we replace these coordinates

[
    [-7.941227, 39.584127],
    [-7.951227, 39.584127],
    [-7.951227, 39.594127],
],

with these

[
    [-7.941227, 39.584127],
    [-7.951227, 39.584127],
    [-7.951227, 39.594127],
    [-7.941227, 39.584127],
],

everything works properly.

This mistake is very easy to make because 1) the repetition seems unecessary and 2) this actually works for most zoomLevels. I think react-native-mapbox-gl/maps could do a better job here, either by actually working without the repeated coordinate, or at least warning the user if the repeated coordinate is not there.

Anyway, feel free to close this issue, it’s googlable purpose has been fulfilled.

[kobagapu]

@fvieira is it possible to draw a polygon dynamically with out using JSON or static Coordinates only onpress method pick coords and draw the polygon