Cordova: StatusBar plugin works on emulator but not on device

Question

I have a cordova project and I installed the StatusBar plugin to color the status bar of the device in the Android platform. The plugin displays the correct status bar color if I run the project on an AVD (pic1), but when I run it on the device it does not appear to work.

I also noticed that when I run the project on device with the plug in uninstalled the view takes up the entire screen, but if I run it with the plugin installed there is black space between the app view and the top and bottom of the phone's nav bar and status bar (pic2).

Device: Samsung S9 running Android 8.0.0 (Oreo)
Cordova version: 8.0.0
StatusBar plugin version: 2.4.2
Cordova whitelist plugin: 1.3.3

index.js:

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        StatusBar.backgroundColorByHexString("#CF4D4D");
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
    }
};

app.initialize();

Answer 1

I've tested your code and it works fine on 4 different devices with Android 5, 6, 7 and 8.1, so it's clearly a bug in the plugin. (probably device specific or vendor specific)

So report it on https://issues.apache.org/jira/browse/CB providing all the possible information. (The information on this "question" should be enough)