{"id":933,"date":"2018-08-29T12:38:52","date_gmt":"2018-08-29T12:38:52","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=933"},"modified":"2018-08-29T12:48:14","modified_gmt":"2018-08-29T12:48:14","slug":"cordova-ios-mobile-app-displays-white-background-color-after-splash-screen","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/cordova-ios-mobile-app-displays-white-background-color-after-splash-screen\/","title":{"rendered":"Cordova iOS Mobile App displays White Background Color after Splash Screen"},"content":{"rendered":"<p>Cordova Mobile apps display\u00a0a\u00a0white background right after Splash screen. This happens because WebView is loaded before our app is initialized. I tried many suggestions such as setting\u00a0<strong><em>AutoHideSplashScreen<\/em><\/strong> to <em>false<\/em> and then call <strong><em>navigator.splashscreen.hide()<\/em><\/strong> in <em>deviceready<\/em> function which did not work for me. It gets called before WebView is even loaded. After trying a lot of\u00a0things\u00a0I finally had to look into the main view controller code which is automatically generated by Cordova (I am using Cordova 8.0.0).<\/p>\n<p>Go to\u00a0MainViewController.m file in the platforms\/ios\/CordovaLib\/Classes folder and look for following code<\/p>\n<pre class=\"lang:default decode:true\">- (void)viewDidLoad\r\n{\r\n    [super viewDidLoad];\r\n    \/\/ Do any additional setup after loading the view from its nib.\r\n}<\/pre>\n<p>Add the lines highlighted as below. I\u00a0used a transparent Splash screen (which gives black background while\u00a0splash screen is shown) and changed the background color of the WebView to\u00a0the color which matched with my app&#8217;s background color.<\/p>\n<pre class=\"lang:default mark:4,5 decode:true\">- (void)viewDidLoad\r\n{\r\n    [super viewDidLoad];\r\n    self.webView.opaque=NO;\r\n    self.webView.backgroundColor = [UIColor blackColor];\r\n    \/\/ Do any additional setup after loading the view from its nib.\r\n}<\/pre>\n<p>Now background color doesn&#8217;t transition from black to white to the app background which looked bad earlier. Now when I\u00a0open app on my iOS device, it starts with black background and then goes to\u00a0app UI as soon as it is loaded.\u00a0We can match all three (splash, webview and app) background colors to\u00a0any\u00a0color we want.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cordova Mobile apps display\u00a0a\u00a0white background right after Splash screen. This happens because WebView is loaded before our app is initialized. I tried many suggestions such as setting\u00a0AutoHideSplashScreen 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\u00a0things\u00a0I 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\u00a0MainViewController.m file in the platforms\/ios\/CordovaLib\/Classes folder and look for following code &#8211; (void)viewDidLoad { [super viewDidLoad]; \/\/ Do any additional setup after loading the view from its nib. } Add the lines highlighted as below. I\u00a0used a transparent Splash screen (which gives black background while\u00a0splash screen is shown) and changed the background color of the WebView to\u00a0the color which matched with my app&#8217;s background color. &#8211; (void)viewDidLoad { [super viewDidLoad]; self.webView.opaque=NO; self.webView.backgroundColor =[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,19],"tags":[],"class_list":["post-933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cordova","category-ios","category-mobile"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=933"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions"}],"predecessor-version":[{"id":939,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions\/939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}