StatusBar plugin color not working with --prod build

Ionic Native
1

I’m trying to style an app’s status bar color with the StatusBar plugin. Specifically the backgroundColorByHexString function as specified here https://ionicframework.com/docs/native/status-bar/#backgroundColorByHexString.

Here’s my code, really simple:

this.statusBar.styleLightContent();
this.statusBar.backgroundColorByHexString("#2f2e33");

I’m testing on the Android platform for now, and it works fine when I run with ionic cordova run android. The status bar is the correct grey color.

However, when I run it with ionic cordova run android --prod the style isn’t applied.

I’ve tried using the vanilla plugin with

(<any>window).StatusBar.styleLightContent();
(<any>window).StatusBar.backgroundColorByHexString("#2f2e33");

with the same results. It works in a debug build but not prod.

I’ve opened an issue in the ionic native github, where some other developers have indicated that they’ve run into the same issue but there hasn’t been any response so far. https://github.com/ionic-team/ionic-native/issues/2307

I don’t know enough about cordova plugin development or the Ionic build process to even know where to start debugging/troubleshooting.

Can anyone provide some insight as to why the --prod build would break a plugin or look into this?

2

I have the same issue. I’ve even tried adding this to the config:
<preference name="StatusBarBackgroundColor" value="#2F2E33" />

Works perfectly without the --prod build flag.

The backgroundColorByHexString is also been called in ionic ready.

This is android@6.3.0 with the following:

    <preference name="android-minSdkVersion" value="16" />
    <preference name="android-targetSdkVersion" value="26" />
3

I just tried this with a blank starter, but was not able to replicate the issue

ionic start tmp blank 
cd tmp

And modified app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      // statusBar.styleDefault();
      statusBar.backgroundColorByHexString("#ff1000");
      splashScreen.hide();
    });
  }
}

and it worked fine for me

Screenshot_20180305-092939
Screenshot_20180305-092939.png1080×1920 57.5 KB

4

This appears to be broken again. It was working last week in a build I did, but when I cracked open my project today and prepared my iOS build, the status bar is now translucent no matter what I do. I tried doing as mharington suggested and starting with a blank project, but the problem persists there as well. Any idea on how to fix?