Use Mapbox style URL with MapLibre

Describe the bug

When using MapLibre, it cannot display Mapbox style url like: ‘mapbox://styles/mapbox/outdoors-v11’

To Reproduce

1. Install react-native-mapbox-gl/maps: 8.5.0
2. Install maplibre for iOS: 5.12.2
3. MapView styleURL={‘mapbox://styles/mapbox/outdoors-v11’}

Example:

import React from 'react';
import {
  MapView,
} from '@rnmapbox/maps';

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView styleURL={'mapbox://styles/mapbox/outdoors-v11'}>
      </MapView>
    );
  }
}

Expected behavior
Show the Mapbox style.

Actual behavior
White screen, no map.

ERROR Mapbox error [event]:Setup [code]:-1 [message]:loading style failed: unsupported URL {“filePath”: “virtual bool mbgl::MGLCoreLoggingObserver::onRecord(mbgl::EventSeverity, mbgl::Event, int64_t, const std::string &)”, “level”: “error”, “line”: 30, “message”: “[event]:Setup [code]:-1 [message]:loading style failed: unsupported URL”}

Versions:

• Platform: iOS, Android very likely
• Platform OS: iOS 15.4.1
• Device: iPhone 8 Plus
• Emulator/ Simulator: no
• Dev OS: macOS Montery 12.3.1
• @rnmapbox/maps Version 8.5.0
• Maplibre ios-v5.12.2
• React Native Version 0.66.4

Possible solution
maplibre PR #90

Set the MGLSettings useWellKnownTileServer to MGLMapbox.

[MGLSettings useWellKnownTileServer:]; Possible options are: MGLMapLibre, MGLMapbox and MGLMapTiler.

File to modify: maps/ios/RCTMGL/MGLModule.m

[mfazekas]

This should be fixed with MapboxGL.setWellKnownTileServer(MapboxGL.TileServers.Mapbox) in recent versions

[hexadecy]

A Quick patch for iOS: https://github.com/Hortau/maps/commit/a6c3c7fee83b044961a0f9707557f503c9a0eafa The Android version of Maplibre has breaking changes with rnmapbox 8.5.0.

npmjs: @hortau/maps:8.5.1