joshdsommer / nativescript-swiss-army-knife

A repo for all those functions you copy and paste between NativeScript projects.

nativescript-swiss-army-knife

A repo for all those functions you copy and paste between projects.

Common Functions

getListViewVerticalOffset Returns the scroll position/vertical offset relative to the visibile contenten of the listView on Android and iOS

disableScrollBounce Disables bounce/overscroll for a ScrollView or ListView on Android and iOS.

removeHorizontalScrollBars Hides horizontal scrollbars for scrollViews or ListViews on Android and iOS

removeVerticalScrollBars Hides vertical scrollbars for scrollViews or ListViews on Android and iOS

pluckChildViewsFromLayout accepts any layout and removes all it's child views and returns them in an array.

getScreenHeight returns an object of type IScreenHeight with the properties portrait and landscape dimensions. IScreenHeight also has the properties androidStatusBar and androidNavBar which are android specific properties that will return the Nav bar and Status bar heights as well. if accessed on iOS they will have a value of 0. These can come in handy since the portrait and landscape dimensions do not take these into account.

dismissSoftKeyboard Dismiss the soft keyboard.

• ActionBar Utilities

actionBarSetTitle Programmatically set title on ActionBar

actionBarAddButton Programmatically add button to the ActionBar

actionBarClearButtons Programmatically remove all buttons from the ActionBar

Android specific functions

setAndroidStatusBarTranslucentFlag sets the Android statusbar to translucent Android Documentation

resetAndroidStatusBarTranslucentFlag resets the Translucent Android statusbar flag.

setAndroidNavBarTranslucentFlag sets the Android navigation bar to translucent Android Documentaion

resetAndroidNavBarTranslucentFlag resets the Translucent Android navigation bar flag.

setAndroidStatusBarColor Sets the Android navigation bar color, accepts either a string color or a Color object

setAndroidNavBarColor Sets the Android status bar color, accepts either a string color or a Color object

iOS specific functions

actionBarHideBackButton Programmatically hide the back button from the ActionBar

actionBarSetStatusBarStyle Programmatically remove all buttons from the ActionBar

Plugin Development Work Flow:

• Clone repository to your machine.
• Run npm run setup to prepare the demo project
• Build with npm run build
• Run and deploy to your device or emulator with npm run demo.android or npm run demo.ios

If you add a new function make sure to add it to nativescript-swiss-army-knife.d.ts as well.

Thanks to these awesome contributors!

Brad Martin

Nathan Walker

Contributing guidelines

Contributing guidelines

MIT

for {N} version 2.0.0+

nativescript-swiss-army-knife's Issues

New release for https://github.com/TheOriginalJosh/nativescript-swiss-army-knife/pull/16

Hi, I would be very thankful for a new release including #16.

Thanks!

removeHorizontalScrollBars is not a function

Hi! I tried remove horizontal ScrollBars, but my app breaks with "removeHorizontalScrollBars is not a function". Plugin is already installed and required to my js file.

In one project I use it to remove the scrollbar ,but in different page one is effective while one is wrong

It is the error:
JS: TypeError: Cannot read property 'setVerticalScrollBarEnabled' of undefined
I don't know why

Error using plugin in nativescript android app

I installed the plugin using tns plugin add
In the component ts file my code reads

` import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";
import { device } from "platform";
import { DeviceType } from "ui/enums";
import { ScrollView, ScrollEventData } from "ui/scroll-view";
import { topmost } from "ui/frame";
import { SwissArmyKnife } from 'nativescript-swiss-army-knife';


const isTablet: boolean = (device.deviceType == DeviceType.Tablet);

@Component({
selector: "ns-items",
moduleId: module.id,
templateUrl: "./items.component.html",
styleUrls: ['/app/app.css', (isTablet ? '../tablet.css' : '../phone.css')],
})
export class ItemsComponent implements OnInit {
items: Item[];
constructor(private itemService: ItemService) { }

ngOnInit(): void {
    this.items = this.itemService.getItems();
    const scrollV = topmost().getViewById("tagView") as ScrollView;
    SwissArmyKnife.removeHorizontalScrollBars(scrollV);
}

} `

When i run the project I get the following error

JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode. JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'android' of undefined JS: TypeError: Cannot read property 'android' of undefined JS: at Function.SwissArmyKnife.removeHorizontalScrollBars (file:///data/data/org.nativescript.hellong/files/app/tns_modules/nativescript-swiss-army-knife/nativescript-swiss-army-knife.js:44:17) JS: at ItemsComponent.ngOnInit (file:///data/data/org.nativescript.hellong/files/app/item/items.component.js:20:56) JS: at checkAndUpdateDirectiveInline (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:10822:19) JS: at checkAndUpdateNodeInline (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12245:17) JS: at checkAndUpdateNode (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12184:16) JS: at debugCheckAndUpdateNode (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12887:59) JS: at debugCheckDirectivesFn (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12828:13) JS: at Object.eval [as updateDirectives] (ng:///AppModule/ItemsComponent_Host.ngfactory.js:10:5) JS: at Object.debugUpdateDirectives [as updateDirectives] (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12813:21) JS: at checkAndUpdateView (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12151:14) JS: at callWithDebugContext (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:13213:42) JS: at Object.debugCheckAndUpdateView [as checkAndUpdateView] (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:12753:12) JS: at ViewRef_.detectChanges (file:///data/data/org.nativescript.hellong/files/app/tns_modules/@angular/core/bundles/core.umd.js:10225:63) JS: at PageRouterOutlet.activateOnGoForward (file:///data/data/org.nativescript.hellong/files/app/tns_modules/nativescript-angular/router/page-router-outlet.js:155:57) JS: at PageRouterOutlet.activateWith (file:///data/data/org.nativescript.hellong/files/app/tns_modules/nativescript-angular/router/page-router-outlet.js:140:18)

Please verify the demo

It is giving error in main.ts file.

Found peer TypeScript 1.8.10
app/main-page.ts(17,62): error TS2339: Property 'androidStatusBar' does not exist on type 'IScreenHeight'.

support nativescript 7

Nativescript 7 has introduced new plugin structure.
https://nativescript.org/blog/nativescript-7-for-plugin-authors/
Is it possible to upgrade this plugin?

Feature Request: connectivity status

hello, first thank you for this wonderfull plugin.
If its okay i would like to request a feature to add on this plugin, internet connectivity status. :)
i think it will be more awesome if utility feature like my request will be added on this plugin.
more power and thank you in advance.

SwissArmyKnife.getScreenHeight().androidStatusBar returning incorrect size

I have installed this plugin in my Android app and once I set the navbar to translucent I get the following as expected:

If I add the following code:

console.log(SwissArmyKnife.getScreenHeight().androidNavBar); page.addCss("Page {padding-top:" + SwissArmyKnife.getScreenHeight().androidStatusBar + "}");

I get the following:

The console.log returns 75 for the size of the statusbar, looking at the second image above I think it should be 25, and if I set the page padding-top in CSS to 25 it works great.

If I use the androidNavBar method in the console.log it returns 144, which is also obviously wrong.

I using Angular if that matters and get the same results on Genymotion emulators and a LG G2.

Thanks for looking into this!
Steve

Navigation bar height

Thank you for a great plugin.

I need to access androidNavBar height, but on a few emulators I have tested, with both hardware controls and on-screen controls - the value returned is always 48?