Cordova iOS Mobile App displays White Background Color after Splash Screen

Cordova Mobile apps display a white background right after Splash screen. This happens because WebView is loaded before our app is initialized. I tried many suggestions such as setting AutoHideSplashScreen to false and then call navigator.splashscreen.hide() in deviceready function which did not work for me. It gets called before WebView is even loaded. After trying a lot of things I finally had to look into the main view controller code which is automatically generated by Cordova (I am using Cordova 8.0.0).

Go to MainViewController.m file in the platforms/ios/CordovaLib/Classes folder and look for following code

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
}

Add the lines highlighted as below. I used a transparent Splash screen (which gives black background while splash screen is shown) and changed the background color of the WebView to the color which matched with my app’s background color.

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.webView.opaque=NO;
    self.webView.backgroundColor = [UIColor blackColor];
    // Do any additional setup after loading the view from its nib.
}

Now background color doesn’t transition from black to white to the app background which looked bad earlier. Now when I open app on my iOS device, it starts with black background and then goes to app UI as soon as it is loaded. We can match all three (splash, webview and app) background colors to any color we want.