Fixing the incompatibility between Cordova Statusbar Plug-in and MobileFirst Foundation 8.0

When integrating the cordova-plugin-statusbar to an iOS Cordova application that uses the MobileFirst Cordova SDK for MobileFirst Foundation 8.0, you may notice that the status bar is not displayed properly in your application.

As MFP sample screenshot with cordova-plugin-statusbar and the status bar style set to blacktranslucent the output should look as seen here below:

By default, the status bar should display like this:

But the way it is rendered is like this:

This is because of following reasons:

• MFPAppDelegate of cordova-plugin-mfp is designed to meet the MobileFirst Foundation product requirement of a Cordova application that can contain both hybrid and native screens, where it loads the UIViewController as the root view controller and CDVViewController as child view controller.

• This implementation introduces potential friction points with cordova-plugin-statusbar that assumes CDVViewController is the root view controller.

In order to make cordova-plugin-statusbar work as expected, you will need to set CDVViewController as the root view controller. Replacing the code snippet in the wlInitDidCompleteSuccessfully method as suggested below in the MFPAppdelegate.m file of the cordova iOS project will resolve the issue.

Existing snippet:

-(void)wlInitDidCompleteSuccessfully
{
   UIViewController* rootViewController = self.window.rootViewController;

   // Create a Cordova View Controller
   CDVViewController* cordovaViewController = [[CDVViewController alloc] init] ;

   cordovaViewController.startPage = [[WL sharedInstance] mainHtmlFilePath];
   
   // Adjust the Cordova view controller view frame to match its parent view bounds
   cordovaViewController.view.frame = rootViewController.view.bounds;

   // Display the Cordova view
   [rootViewController addChildViewController:cordovaViewController];  
   [rootViewController.view addSubview:cordovaViewController.view];
   [cordovaViewController didMoveToParentViewController:rootViewController];  
}

Suggested fix:

-(void)wlInitDidCompleteSuccessfully
{
   // Create a Cordova View Controller
   CDVViewController* cordovaViewController = [[CDVViewController alloc] init] ;

   cordovaViewController.startPage = [[WL sharedInstance] mainHtmlFilePath];
 
   [self.window setRootViewController:cordovaViewController];
   [self.window makeKeyAndVisible];
}

Your application status bar will now be renedered as expected with cordova-plugin-statusbar without issues.