I’ve just started using Ionic 2 and noticed that the statusbar in ios defaults to light, resulting in it not being readable if you for example use the default navbar.
The cordova statusbar plugin is included as far as i can see, but how to use ut? I can’t even figure out how to import it properly. Could someone please make a really simple example on how to change the statusbar to dark? This example would also be a great starting point for all the other plugins as well.
I’ve seen that the Ionic team started to implement wrappers that could be used like this: import {StatusBar} from ‘ionic/ionic’;
But this doesn’t seem to work any longer. StatusBar ends up being undefined.
You’ll need to check the documentation for the individual plugin - for the one you request, the documentation is here:
In general the plugins are accessed in a much less elegant way that you’re attempting- they are almost always exposed as some sort of global object. In your case the object is ‘StatusBar’. It should become available after the onready call on any system that includes the plugin- if you’re developing using ionic serve there is a good chance the plugin will not be available and you’ll have to test the changes on a device. Most plugins do not have a browser version.
I understand that most plugins are device-only, that’s not the issue. The problem is that I don’t know how to import them into my project.
There is a /plugins folder in my project, containing a few default plugins, including StatusBar. So what would be the correct way of importing it for usage? Do I just include it it as a script tag inside index.html?
looking at the examples on the link you provided, there is no mention of how it is supposed to be included into the project, only that it somehow ends up creating a global object called StatusBar.
They are global objects- you don’t import anything. To add one to your project you would do 'ionic plugin add ’ from the root directory of your project, but once it is added, it is present. If you are looking for intellisense for it in typescript you can add a ts.d file for it and use it for reference but if you don’t care about intellisense, the plugin will be active if you have it installed immediately following the onready call from the document.
To test it, somewhere in your code add something like this:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(StatusBar);
}
Please see the Methods section of the website I linked previously- it shows usage examples (including the one I just posted)
The browser/webview part of a plugin is basically just a javascript-file, and as such, it must be referenced somehow. Otherwise, how will the browser/webview/ionic know how to read it? If I just drop a random javascript file inside the plugins folder, it’s not just gonna get loaded and executed by itself.
Somewhere, there must be a reference to the plugin, firstly so that it gets bundled in app.bundle.js, and secondly, that it actually loads and creates the global object.
I actually tried just referencing it in index.html like this:
This works, but feels icky. I’m assuming that there is a more proper way of doing it.
Cordova will load the plugin .js files for you. You do not need to manually import anything. The objects are global and exist app-wide immediately after the deviceready call fires. The Cordova platform handles all the linking you need to do.
If you have tried to do what I have suggested and it did not work, please post the section of code in which you are having problems and I’ll try to address what you did wrong.
I’m sorry for my stubbornness, I now tried removing the script tag from index.html and the plugin is still available, so it’s obviously somehow automatically loaded by Cordova somehow, I must have made some change to the code where the plugin was being used, since I could swear it didn’t work before I referenced the plugin from index.html.
Anyhow, thanks for your patience and for helping out!
