burkeholland / nativescript-statusbar Goto Github PK

View Code? Open in Web Editor NEW

32.0 3.0 14.0 3.14 MB

A NativeScript plugin to change the style of the status bar. Currently ios only.

License: MIT License

TypeScript 76.24% CSS 6.32% HTML 4.97% Shell 12.47%

nativescript-statusbar's Introduction

NativeScript Status Bar

A NativeScript plugin to change the style of the status bar.

Usage

npm install nativescript-statusbar --save

Then in your NativeScript project .xml file, add the namespace for the plugin. I'm calling it "x" here, but you can name it anything you want.

iOS only supports a list of settings (default, light, dark, opaque), not a specific color. Android will support any hex background color, but you cannot change the text color on the status bar.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:x="nativescript-statusbar"> 
      
      <!-- Use the tag with StatusBar to style it 
           Available ios settings:
           default 
           light 
           dark
           opaque
      -->
      <x:StatusBar ios:barStyle="light" barColor="#00A7DC" />
</Page>

Those settings, combined with an ActionBar that has background-color: #00C0F5 will give you...

Note The StatusBar plugin will not set the color of the StatusBar on iOS if you don't have an ActionBar as well. If you want to set the color of the StatusBar in NativeScript without having an ActionBar, you can set it to the page background color by setting backgroundSpanUnderStatusBar="true". Otherwise you will have a white StatusBar no matter what you do.

Webpack

To use the NativeScript status bar plugin with webpack, you must add the following line of code to your app’s app/bundle-config.js file.

global.registerModule("nativescript-statusbar", function() { return require("nativescript-statusbar"); });

Development workflow

If you would like to contribute to this plugin in order to enabled the repositories code for development follow this steps:

Fork the repository locally
Open the repository in your favorite terminal
Navigate to the src code that contains the plugin's code cd /src
Execute the npm script nmp run build.wrappers or npm run build.wrappers.watch
When running the Vanila NativeScript demo app execute: npm run demo.android or npm run demo.ios
When running the Angular NativeScript demo app execute: npm run demo.angular.android or npm run demo.angular.ios

nativescript-statusbar's People

Contributors

Stargazers

Watchers

Forkers

mauriliofilho dwi-lanang ntrp manojdcoder sitefinitysteve radeva fmsaraujo hypery2k nativescript-forks panayotcankov jonarod bradmartin

nativescript-statusbar's Issues

Issue with Angular 10 Nativescript 7 Incompatibility

After upgrading to Angular 10 and Nativescript 7 I see this error:

ERROR in The target entry-point "statusbar-directives" has missing dependencies:
nativescript-angular/element-registry./../

It is because of import "nativescript-angular" should be changed to "@nativescript/angular", see: https://nativescript.org/blog/angular-10-support/

After closing App status bar changes color to black

I have noticed that if I close my app and leave it running in the background and I resume it, the status bar color changes to black even though I have the element defined in every page. However, after relaunching the app status bar displays my defined color.

NS 5+
Android: API 26+ (NS Android 5+)

Haven`t tested on iOS yet

Works in VueJS too !!!

Here are the tips:

My page code:

<template>
    <Page class="page" 
        backgroundSpanUnderStatusBar="true"
        actionBarHidden="true">
        <StatusBar ios:barStyle="light" barColor="#23D5AB" />
        ...
    </Page>
</template>

Another tricks.js file that I import before in main.js with some tricks, workarounds and so on...

require("nativescript-vue").registerElement(
    "StatusBar",
    () => require("nativescript-statusbar").StatusBar
);

And that's it !!!

Does not change the status bar color on the first page (iOS)

Thanks for the module. Much easier than the old alternatives!

I may be doing something wrong here but this worked great for me on subsequent pages, but on the "start" page (where I added the module) it did not work. I note that I don't have an ActionBar on the start page and I am combining it with BackgroundSpanUnderStatusBar on that page.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:x="nativescript-statusbar" loaded="loaded">
  <x:StatusBar ios:barStyle="dark" android:barStyle="#E34900" />
  ...

exports.loaded = function(args) {
  var page = args.object;
  page.backgroundSpanUnderStatusBar = true;
}

Any ideas how I could change the colour on this start page?

Previous color statusbar persist after back button on Android

After changing the page view and the color, then when going back previous color statusbar persist. How to update the status bar after back button?

Does this work with NNG2?

JS: Error: Uncaught (in promise): TypeError: this.page.frame._getNavBarVisible is not a function
JS:     at resolvePromise (/data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:416:31)
JS:     at /data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:393:13
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:190:28)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvoke (/data/data/org.nativescript.test/files/app/tns_modules/@angular/core/bundles/core.umd.js:6242:41)
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:189:34)
JS:     at Zone.run (/data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:83:43)
JS:     at /data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:449:57
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.test/files/app/tns_modules/@angular/core/bundles/core.umd.js:6233:41)
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.test/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:222:42)
JS: Unhandled Promise rejection: this.page.frame._getNavBarVisible is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: this.page.frame._getNavBarVisible is not a function 
TypeError: this.page.frame._getNavBarVisible is not a function
JS:     at ActionBar.update (/data/data/org.nativescript.test/files/app/tns_modules/ui/action-bar/action-bar.js:146:50)
JS:     at ActionBar.onLoaded (/data/data/org.nativescript.test/files/app/tns_modules/ui/action-bar/action-bar.js:140:14)
JS:     at eachChild (/data/data/org.nativescript.test/files/app/tns_modules/ui/core/view-common.js:736:23)
JS:     at Page._eachChildView (/data/data/org.nativescript.test/files/app/tns_modules/ui/page/page-common.js:286:9)
JS:     at Page.View._loadEachChildView (/data/data/org.nativescript.test/files/app/tns_modules/ui/core/view-common.js:739:18)
JS:     at Page.View.onLoaded (/data/data/org.nativescript.test/files/app/tns_modules/ui/core/view-common.js:729:14)
JS:     at Page.View.onLoaded (/data/data/org.nativescript.test/files/app/tns_modules/ui/core/view.js:82:35)
JS:     at Page.onLoaded (/data/data/org.nativescript.test/files/app/tns_modules/ui/page/page-common.js:53:35)
JS:     at eachChild (/data/data/org.nativescript.test/files/app/tns_modules/ui/core/view-common.js:736:23)
JS:     at ProxyViewContainer.LayoutBase._eachChildView (/data/data/org.nativescript.test/files/app/tns_modules/ui/layouts/layout-base-common.js:146:22)
JS: Error: Uncaught (in promise): TypeError: this.page.frame._getNavBarVisible is not a function

My setup is is exactly like in the example

Not working with Angular modals in Android

When creating a full-screen modal with the ModalDialogService, the StatusBar changes do not go on the modal but on the page behind it. You can tell this by hitting the back button, and the changes persist on the previous page (as mentioned in this issue).

isnt compatible with webpack

The plugin doesnt work when you try to webpack bundle

can not hide a status bar

Crashing on both iOS and Android

Hi, I've installed the module and added the lines in the page.xml file:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:x="nativescript-statusbar" navigatingTo="onNavigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="Settings" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
      <x:StatusBar ios:barStyle="light" android:barColor="#00C0F5" />
...

However, running the app I get the following error:
An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onMenuItemClick failed

Error: Building UI from XML. @file:///app/settings-page.xml:23:7

Module '/data/data/com.asouza.buddyFinder/files/app/nativescript-statusbar' not found for element 'nativescript-statusbar:StatusBar'.
com.tns.NativeScriptException: Failed to find module: "/data/data/com.asouza.buddyFinder/files/app/nativescript-statusbar", relative to: app//
com.tns.Module.resolvePathHelper(Module.java:146)
...

Any ideas on what I did wrong? I am running
│ nativescript │ 3.0.0
│ tns-core-modules │ 2.5.0
│ tns-android │ 3.0.0
│ tns-ios │ 2.5.0

NativeScript 4

Are there any plans to upgrade this plugin to {N} 4? It is still using {N} 3.

    "peerDependencies":{
        "tns-core-modules": "^3.0.0 || ^3.0.0-rc.1"
    },

The plugin works perfectly with {N} 4. I have tested this in the playground: https://play.nativescript.org/?template=play-ng&id=hM2zxJ&v=8

registerElement("StatusBar", () => require("nativescript-statusbar").StatusBar);

@Component({
    selector: "Login",
    moduleId: module.id,
    template: `<StatusBar ios:barStyle="light" android:barStyle="#4286f4" #fff></StatusBar>`
})

It does not work with NS 3.1.4 + Angular