Maps: [ios] Adding URLProtocol to MGLNetworkConfiguration does not work

[Mr-Alirezaa]

Hi,
I need to intercept all network calls made by Mapbox's SDK. I add a couple of lines of code to the iOS source code to add my own URLProtocol subclass to a URLSessionConfiguration and finally assign the URLSessionConfiguration to the MGLNetworkConfiguration.sharedConfiguration.sessionConfiguration.

NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
NSMutableArray *classes = [configuration.protocolClasses mutableCopy];
[classes insertObject:[CustomURLProtocol class] atIndex:0];
configuration.protocolClasses = classes;
[MGLNetworkConfiguration.sharedManager setSessionConfiguration:configuration];

This is needed to be done before the initialization of any MGLMapView instance.

I add these lines in RCTMGLMapView.m in - (instancetype)initWithFrame:(CGRect)frame initializer like below:

- (instancetype)initWithFrame:(CGRect)frame
{
    NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
    NSMutableArray *classes = [configuration.protocolClasses mutableCopy];
    [classes insertObject:[CustomURLProtocol class] atIndex:0];
    configuration.protocolClasses = classes;
    [MGLNetworkConfiguration.sharedManager setSessionConfiguration:configuration];
    if (self = [super initWithFrame:frame]) {

        _pendingInitialLayout = YES;
        ...
    }
    return self;
}

This technique does not work in React Native. But the same thing works in a pure iOS project with Objective-C or Swift.

NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
NSMutableArray *classes = [configuration.protocolClasses mutableCopy];
[classes insertObject:[CustomURLProtocol class] atIndex:0];
configuration.protocolClasses = classes;
[MGLNetworkConfiguration.sharedManager setSessionConfiguration:configuration];

MGLMapView *mapView = [[MGLMapView alloc] initWithFrame: ...];

Any idea about why this does not work in React Native?

[mfazekas]

@Mr-Alirezaa pls loook into https://github.com/react-native-mapbox-gl/maps/blob/master/ios/RCTMGL/MGLCustomHeaders.m maybe it's interfering with your stuff

[Mr-Alirezaa]

@mfazekas I checked it. I also used breakpoints to see whether the requests are being intercepted by this or not. The answer was no.
As far as I learned, this custom header feature only runs when initialized at AppDelegate.m functions and I didn't initialize it.

[mfazekas]

@Mr-Alirezaa yep you're right.

[mfazekas]

@Mr-Alirezaa i'm closing this, this is very special usecase. You can try this in a bar bone RN app, to see if it's issue in our plugin or in RN env.

[snazarkoo]

@Mr-Alirezaa Hey, I wonder if you have managed this problem. And if yes, have you used your CustomURLProtocol or found another solution for it?

[Mr-Alirezaa]

Hey @snazarkoo, I couldn't use my own subclass of URLProtocol to solve my problem. Since my company is using Mapbox SDK to show its tiles and style I needed it to send some custom request headers with all (especially style and tiles) requests.
This solution was only usable when I wasn't using react-native SDK.
I think this is because of that react-native SDK itself is registering some custom URLProtocol classes with higher priorities at the launch of the application. So my custom URLProtocol will not be used.
I am an iOS engineer and I don't have any specialty in React-Native but I think there is a way provided by Mapbox React-Native SDK to add custom headers to the requests.
I think it might be helpful to google terms like "mapbox react native sdk change tile headers" or "custom headers in mapbox react native sdk".